/* ============================================
   KITCHEN DISPLAY SCREENS - SMARTPHONE (344px - 600px)
   ============================================ */

@media only screen and (min-width: 344px) and (max-width: 600px) {
    
    /* ----------------------------------------
       ISSUE 1: Stack Image Below Text
       ---------------------------------------- */
    
    /* Hero section - stack columns vertically */
    .content-row.full > div[style*="display: flex"][style*="gap: 60px"] {
        flex-direction: column !important;
        gap: 30px !important;
        padding: 0 20px !important;
    }
    
    /* Text column - full width, appears first */
    .content-row.full > div[style*="display: flex"] > div[style*="flex: 1.3"] {
        flex: 1 1 100% !important;
        width: 100% !important;
        order: 1;
    }
    
    /* Image column - full width, appears after text */
    .content-row.full > div[style*="display: flex"] > div[style*="flex: 0.935"] {
        flex: 1 1 100% !important;
        width: 100% !important;
        order: 2;
    }
    
    /* Image sizing */
    .content-row.full > div[style*="display: flex"] > div[style*="flex: 0.935"] img {
        width: 100% !important;
        height: auto !important;
    }
    
    /* ----------------------------------------
       ISSUE 2: Uncover "Faster Lanes" Text
       ---------------------------------------- */
    
    /* Remove negative margin causing overlap */
    .content-row.full[style*="margin-top: -230px"] {
        margin-top: 20px !important;
    }
    
    /* ----------------------------------------
       ISSUE 3: Stack List Below Blue Box
       ---------------------------------------- */
    
    /* Features section - stack vertically */
    .content-row.full[style*="margin-top: -230px"] > div[style*="display: flex"][style*="gap: 0px"] {
        flex-direction: column !important;
        gap: 30px !important;
        padding: 0 20px !important;
    }
    
    /* Blue box - full width */
    .content-row.full[style*="margin-top: -230px"] > div > div[style*="background: linear-gradient"] {
        flex: 1 1 100% !important;
        width: calc(100% - 40px) !important;
        max-width: calc(100vw - 40px) !important;
        padding: 25px 20px !important;
        border-radius: 20px !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
    }
    
    /* Features list column - full width */
    .content-row.full[style*="margin-top: -230px"] > div > div[style*="padding: 10px 50px"] {
        flex: 1 1 100% !important;
        width: 100% !important;
        padding: 20px 0 !important;
    }
    
    /* ----------------------------------------
       ADDITIONAL MOBILE OPTIMIZATIONS
       ---------------------------------------- */
    
    /* Reduce main heading size */
    .content-row.full h1[style*="font-size: 88px"] {
        font-size: 36px !important;
        letter-spacing: -2px !important;
        padding: 0 20px !important;
    }
    
    /* Reduce heading container padding */
    .content-row.full > div[style*="text-align: center"][style*="padding: 0 60px"] {
        padding: 0 20px !important;
        margin-bottom: 30px !important;
    }
    
    /* Adjust paragraph font sizes */
    .content-row.full p[style*="font-size: 21px"] {
        font-size: 16px !important;
        line-height: 26px !important;
    }
    
    /* Adjust "Faster Lanes" text size */
    .content-row.full p[style*="font-size: 36px"] {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    
    /* Blue box headings */
    .content-row.full > div > div[style*="background: linear-gradient"] h2 {
        font-size: 24px !important;
    }
    
    /* Features list headings */
    .content-row.full > div > div[style*="padding: 10px 50px"] h2 {
        font-size: 22px !important;
    }
    
    /* ----------------------------------------
       ISSUE 4: Stack Hardware Product Cards
       ---------------------------------------- */
    
    /* Hardware section - reduce negative margin */
    .content-row.full[style*="margin-top: -230px"] {
        margin-top: 20px !important;
    }
    
    /* Hardware products - stack rows vertically */
    .content-row.full[style*="margin-top: -230px"] > div[style*="display: flex"][style*="gap: 40px"] {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 20px !important;
    }
    
    /* Second hardware card - add top margin */
    .hardware-card:nth-child(2) {
        margin-top: -20px !important;
    }

    /* Hardware cards - full width */
    .hardware-card {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    
    /* Hardware card image containers */
    .hardware-card > div[style*="height: 300px"] {
        height: 200px !important;
    }
    
    /* Hardware card headings */
    .hardware-card h3 {
        font-size: 22px !important;
        white-space: normal !important;
    }
    
    /* Hardware card descriptions */
    .hardware-card p {
        font-size: 16px !important;
    }
    
    /* Empty placeholder column - hide it */
    .content-row.full[style*="margin-top: -230px"] > div > div[style*="flex: 0 0 calc(33.333% - 27px)"]:empty {
        display: none !important;
    }
    
    /* ----------------------------------------
       ISSUE 5: Spacing Before Full Width Image
       ---------------------------------------- */
    
    /* Full width image section - increase top margin, remove bottom padding */
    .content-row.full[style*="margin-top: -210px"] {
        margin-top: 20px !important;
        padding-bottom: 0 !important;
    }
    
    /* Image container - only 20px bottom padding for spacing to horizontal line */
    .content-row.full[style*="margin-top: -210px"] > div[style*="padding: 0 60px"] {
        padding: 0 20px 20px 20px !important;
    }
    
    /* ----------------------------------------
       ISSUE 6: Horizontal Line & FAQ Spacing
       ---------------------------------------- */
    
    /* Horizontal line section - reset margin, remove top padding */
    .content-row.full[style*="margin-top: -110px"] {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Horizontal line container - padding adjustment */
    .content-row.full[style*="margin-top: -110px"] > div[style*="padding: 0 60px"] {
        padding: 0 20px !important;
    }
    
    /* FAQ title section - add 20px top margin from horizontal line */
    .content-row.full[style*="margin-top: -40px"] {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* FAQ title container - padding adjustment */
    .content-row.full[style*="margin-top: -40px"] > div[style*="padding: 0 60px"] {
        padding: 0 20px !important;
    }
    
    /* Accordion section - proper spacing */
    .content-row.full[style*="margin-top: -20px"][style*="padding-bottom: 60px"] {
        margin-top: 10px !important;
        padding-bottom: 40px !important;
    }
    
    /* Accordion container - padding adjustment */
    .content-row.full[style*="margin-top: -20px"] > div[style*="padding: 0 60px"] {
        padding: 0 20px !important;
    }
    
    /* ----------------------------------------
       ISSUE 7: FAQ Accordion Blue Flash Fix
       ---------------------------------------- */
    
    /* Remove tap highlight on FAQ accordions */
    details[name="kds-faq"] summary {
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
    }
    
    details[name="kds-faq"] summary:focus {
        outline: none !important;
    }
    
    details[name="kds-faq"] summary:active {
        background-color: transparent !important;
    }
    
    /* ----------------------------------------
       ISSUE 8: Explore more Solutions Vertical Stack
       ---------------------------------------- */

    /* Fix: Allow overflow so Explore text is visible */
    #page-nav {
        overflow: visible !important;
    }

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

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

    /* Move entire block down by 3px and stack words vertically */
    .next-hero-title.purple-nav-accent {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 3px !important;
        margin-top: 3px !important;
    }
    
    /* "Explore" - before pseudo-element */
    .next-hero-title.purple-nav-accent::before {
        display: block !important;
        position: static !important;
        margin: 0 !important;
    }
    
    /* "more" - span element */
    .next-hero-title.purple-nav-accent span {
        display: block !important;
        position: static !important;
        margin: 0 !important;
    }
    
    /* "Solutions" - after pseudo-element */
    .next-hero-title.purple-nav-accent::after {
        display: block !important;
        position: static !important;
        margin: 0 !important;
    }
    
    /* ============================================
       ISSUE 9: Footer Mobile Layout
       Back to Top Arrow + Social Icons in Same Row
       ============================================ */

    /* Footer container: flex-wrap to create rows */
    .clapat-footer.compact-footer {
        height: auto !important;
        min-height: 130px !important;
    }

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

    /* ----- ROW 1: Footer Navigation (Full Width) ----- */
    .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: 3px !important;
        position: relative !important;
        height: auto !important;
        width: 100% !important;
        pointer-events: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }

    .clapat-footer.compact-footer .footer-middle nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 3px !important;
    }

    /* Copyright notice - show below Let's Talk with 5px gap */
    /* Hide full content, show only copyright via pseudo-element */
    .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;
    }

    /* Show only "Copyright © 2026. All Rights Reserved" - hide Terms/Privacy */
    .clapat-footer.compact-footer .footer-middle > div[style*="font-size: 8px"]::before {
        content: "Copyright © 2026. All Rights Reserved" !important;
        visibility: visible !important;
        font-size: 16px !important;
        color: #02042a !important;
        display: block !important;
    }

    /* ----- ROW 2: Back to Top Arrow + Social Icons ----- */

    /* Back to Top Button: LEFT side of row 2 */
    .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;
        margin-top: -8px !important;
        margin-right: auto !important;
        padding: 0 0 0 -50px !important;
        margin-left: -10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* Hide "Back to Top" text completely */
    .clapat-footer.compact-footer #footer-container #backtotop.button-wrap.left .button-text {
        display: none !important;
    }

    /* Arrow icon wrapper */
    .clapat-footer.compact-footer #footer-container #backtotop.button-wrap.left .icon-wrap {
        float: none !important;
        position: relative !important;
        left: auto !important;
        right: auto !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;
    }

    /* Blue arrow - visible */
    .clapat-footer.compact-footer #footer-container #backtotop.button-wrap.left .button-icon i {
        color: #601fe0 !important;
        font-size: 16px !important;
        line-height: 36px !important;
    }

    /* Social Icons: Centered in row 2, shifted 60px left */
    .clapat-footer.compact-footer #footer-container .socials-wrap {
        flex: 0 0 auto !important;
        order: 3 !important;
        position: relative !important;
        float: none !important;
        width: auto !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        transform: translateX(-45px) !important;
    }

    /* Hide "Follow Us" text and share icon */
    .clapat-footer.compact-footer #footer-container .socials-wrap .socials-text,
    .clapat-footer.compact-footer #footer-container .socials-wrap .socials-icon {
        display: none !important;
    }

    /* Social icons: horizontal row */
    .clapat-footer.compact-footer #footer-container .socials-wrap .socials {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        transform: none !important;
        text-align: center !important;
        width: auto !important;
        height: auto !important;
        line-height: normal !important;
    }

    /* Each social icon: always visible */
    .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;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        line-height: 28px !important;
    }

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