/* ============================================================
   TERAPRINT MOBILE v1.0
   Globale Mobile-Optimierung für alle Seiten
   Lädt NACH allen anderen CSS-Dateien (Spezifität durch Selektoren)
   
   Breakpoints:
   - 1024px: Tablet
   - 768px:  Tablet Portrait / großes Phone
   - 640px:  Phone
   - 480px:  Kleines Phone
   - 375px:  iPhone SE / Mini
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   GLOBAL: Overflow Protection
   ═══════════════════════════════════════════════════════════ */
html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE HEADER IMPROVEMENTS (≤768px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Ensure no Kadence elements leak through */
    #masthead, #mobile-header, #mobile-drawer,
    .popup-drawer, .drawer-overlay,
    .site-mobile-header-wrap { display: none !important; }

    /* Mobile header bar */
    .tp-mobile-header {
        position: sticky;
        top: 0;
        z-index: 9999;
        box-shadow: 0 1px 4px rgba(0,0,0,.08);
    }

    .tp-mobile-header .tp-header-inner {
        padding: 0 12px;
    }

    /* Bigger touch targets */
    .tp-mobile-menu-btn {
        width: 48px;
        height: 48px;
        -webkit-tap-highlight-color: transparent;
    }

    .tp-header-cart {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }

    /* Better drawer styling */
    .tp-mobile-dropdown {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: none;
        z-index: 9998;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Drawer categories */
    .tp-mobile-drawer__cat-btn {
        min-height: 48px;
        padding: 12px 16px;
        font-size: 15px;
    }

    .tp-mobile-drawer__item {
        min-height: 44px;
        padding: 10px 16px 10px 28px;
        font-size: 14px;
        display: flex;
        align-items: center;
    }

    .tp-mdrop-nav a {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 12px 16px;
    }

    .tp-mdrop-links a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 10px 16px;
    }
}


/* ═══════════════════════════════════════════════════════════
   HOMEPAGE: Tablet (≤1024px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .tp-page .tp-featured,
    .tp-page .tp-products,
    .tp-page .tp-usps,
    .tp-page .tp-process,
    .tp-page .tp-reviews,
    .tp-page .tp-b2b,
    .tp-page .tp-seo,
    .tp-page .tp-faq,
    .tp-page .tp-final-cta,
    .tp-page .tp-stats {
        padding-left: 32px;
        padding-right: 32px;
    }

    .tp-page .tp-trust {
        padding: 12px 20px;
    }

    .tp-page .tp-sh h2 {
        font-size: 28px;
    }
}


/* ═══════════════════════════════════════════════════════════
   HOMEPAGE: Phone (≤640px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* ── Sections: Reduce padding ── */
    .tp-page .tp-featured,
    .tp-page .tp-products,
    .tp-page .tp-usps,
    .tp-page .tp-process,
    .tp-page .tp-reviews,
    .tp-page .tp-b2b,
    .tp-page .tp-seo,
    .tp-page .tp-faq,
    .tp-page .tp-final-cta,
    .tp-page .tp-stats {
        padding-left: 16px;
        padding-right: 16px;
    }

    .tp-page .tp-usps,
    .tp-page .tp-process,
    .tp-page .tp-reviews,
    .tp-page .tp-faq {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    /* ── Trust Bar ── */
    .tp-page .tp-trust {
        padding: 10px 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tp-page .tp-trust::-webkit-scrollbar { display: none; }
    .tp-page .tp-trust-inner {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 12px;
        min-width: max-content;
    }
    .tp-page .tp-trust-item {
        font-size: 12px;
        gap: 6px;
    }
    .tp-page .tp-trust-item svg {
        width: 16px;
        height: 16px;
    }

    /* ── Section Headers ── */
    .tp-page .tp-sh h2 {
        font-size: 24px;
    }
    .tp-page .tp-sh p {
        font-size: 14px;
    }

    /* ── Featured Cards ── */
    .tp-page .tp-featured-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .tp-page .tp-fcard {
        grid-template-columns: 1fr;
    }
    .tp-page .tp-fcard-img {
        min-height: 200px;
        order: -1;
    }
    .tp-page .tp-fcard-body {
        padding: 20px;
    }
    .tp-page .tp-fcard-body h3 {
        font-size: 20px;
    }
    .tp-page .tp-fcard-price {
        font-size: 24px;
        margin-bottom: 16px;
    }
    .tp-page .tp-fcard-cta {
        width: 100%;
        text-align: center;
        padding: 14px 20px;
    }
    .tp-page .tp-fcard-features li {
        font-size: 13px;
    }

    /* ── Product Grid ── */
    .tp-page .tp-pgrid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        max-width: none;
        margin: 0;
    }
    .tp-page .tp-pcard-body {
        padding: 12px;
    }
    .tp-page .tp-pcard-body h3 {
        font-size: 14px;
    }
    .tp-page .tp-pcard-desc {
        display: none;
    }
    .tp-page .tp-pcard-price {
        font-size: 16px;
        margin-bottom: 10px;
    }
    .tp-page .tp-pcard-cta {
        font-size: 13px;
        padding: 10px 12px;
    }
    .tp-page .tp-products-head h3 {
        font-size: 18px;
    }

    /* ── Stats ── */
    .tp-page .tp-stats {
        padding-top: 32px;
        padding-bottom: 32px;
    }
    .tp-page .tp-stats-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .tp-page .tp-stat-num {
        font-size: 28px;
    }
    .tp-page .tp-stat-label {
        font-size: 12px;
    }

    /* ── USP Cards ── */
    .tp-page .tp-ugrid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .tp-page .tp-ucard {
        padding: 24px 20px;
        text-align: left;
        display: grid;
        grid-template-columns: 56px 1fr;
        gap: 0 16px;
    }
    .tp-page .tp-ucard-icon {
        width: 56px;
        height: 56px;
        margin: 0;
        grid-row: 1 / 3;
    }
    .tp-page .tp-ucard h3 {
        font-size: 17px;
        margin-bottom: 6px;
        align-self: end;
    }
    .tp-page .tp-ucard p {
        font-size: 14px;
        align-self: start;
    }

    /* ── Process Steps ── */
    .tp-page .tp-proc-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: none;
        margin: 0;
    }
    .tp-page .tp-proc-step {
        text-align: left;
        display: grid;
        grid-template-columns: 48px 1fr;
        gap: 0 16px;
    }
    .tp-page .tp-proc-num {
        width: 48px;
        height: 48px;
        font-size: 20px;
        margin: 0;
        grid-row: 1 / 3;
    }
    .tp-page .tp-proc-step h3 {
        font-size: 16px;
        align-self: end;
    }
    .tp-page .tp-proc-step p {
        font-size: 13px;
        align-self: start;
    }

    /* ── Reviews ── */
    .tp-page .tp-rev-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .tp-page .tp-rev-card {
        padding: 20px;
    }
    .tp-page .tp-rev-text {
        font-size: 14px;
    }

    /* ── B2B Section ── */
    .tp-page .tp-b2b {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .tp-page .tp-b2b-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .tp-page .tp-b2b-body h2 {
        font-size: 24px;
    }
    .tp-page .tp-b2b-cta {
        width: 100%;
        text-align: center;
        display: block;
        padding: 14px 24px;
    }

    /* ── SEO Text ── */
    .tp-page .tp-seo {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .tp-page .tp-seo-inner h2 {
        font-size: 22px;
    }
    .tp-page .tp-seo-inner p {
        font-size: 14px;
    }

    /* ── FAQ ── */
    .tp-page .tp-faq-item summary {
        font-size: 15px;
        padding: 16px 0;
    }
    .tp-page .tp-faq-item p {
        font-size: 14px;
    }

    /* ── Final CTA ── */
    .tp-page .tp-final-cta {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .tp-page .tp-final-cta h2 {
        font-size: 24px;
    }
    .tp-page .tp-final-cta p {
        font-size: 15px;
        margin-bottom: 24px;
    }
    .tp-page .tp-final-cta a {
        width: 100%;
        display: block;
        font-size: 16px;
        padding: 16px 24px;
        max-width: 320px;
        margin: 0 auto;
    }

    /* ── Smart Slider overflow protection ── */
    .tp-page .n2-section-smartslider,
    .tp-page [class*="n2-ss"] {
        max-width: 100vw !important;
        overflow: hidden !important;
    }
}


/* ═══════════════════════════════════════════════════════════
   HOMEPAGE: Small Phone (≤480px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .tp-page .tp-pgrid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tp-page .tp-pcard {
        display: grid;
        grid-template-columns: 120px 1fr;
    }
    .tp-page .tp-pcard-img {
        aspect-ratio: 1;
    }
    .tp-page .tp-pcard-cta {
        grid-column: 1 / -1;
    }

    .tp-page .tp-stats-inner {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .tp-page .tp-stat-num {
        font-size: 24px;
    }

    .tp-page .tp-fcard-img {
        min-height: 180px;
    }
    .tp-page .tp-fcard-body h3 {
        font-size: 18px;
    }
    .tp-page .tp-fcard-price {
        font-size: 22px;
    }

    .tp-page .tp-b2b-body h2 {
        font-size: 22px;
    }
    .tp-page .tp-b2b-list li {
        font-size: 14px;
    }
}


/* ═══════════════════════════════════════════════════════════
   SIDECART: Mobile Fix (inline styles have 420px fixed!)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .tp-sc-panel {
        width: 88vw !important;
        max-width: 420px !important;
    }

    .tp-sc-header {
        padding: 14px 16px !important;
    }

    .tp-sc-body {
        padding: 12px !important;
    }

    .tp-sc-footer {
        padding: 12px 16px !important;
    }

    /* Larger close button */
    .tp-sc-close {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    .tp-sc-panel {
        width: 100vw !important;
        max-width: 100vw !important;
        right: 0 !important;
    }
}


/* ═══════════════════════════════════════════════════════════
   PRODUCT PAGE: Mobile Configurator Tweaks
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Gallery takes full width */
    .tp-product-gallery {
        max-width: 100% !important;
    }

    /* WooCommerce default product images */
    .woocommerce div.product div.images {
        width: 100% !important;
        float: none !important;
    }

    .woocommerce div.product div.summary {
        width: 100% !important;
        float: none !important;
    }

    /* Breadcrumbs compact */
    .woocommerce .woocommerce-breadcrumb {
        font-size: 12px;
        padding: 8px 16px;
    }
}


/* ═══════════════════════════════════════════════════════════
   CART PAGE: Small Phone
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .tp-cart-container {
        padding: 0 12px;
    }

    .tp-item-thumb {
        width: 40px !important;
        height: 40px !important;
    }

    .tp-order-summary {
        padding: 16px !important;
    }

    .tp-checkout-btn {
        font-size: 15px;
        padding: 14px 20px;
    }
}


/* ═══════════════════════════════════════════════════════════
   FOOTER: Small Phone improvements
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .tp-footer-main > .tp-footer-inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    .tp-footer-col-title {
        font-size: 11px;
    }

    #tp-footer .tp-footer-link {
        font-size: 12px;
        min-height: 36px;
        display: flex;
        align-items: center;
    }

    .tp-footer-pay-icons {
        gap: 4px;
    }

    .tp-pay-icon {
        height: 24px;
        padding: 0 7px;
        font-size: 9px;
    }
}


/* ═══════════════════════════════════════════════════════════
   CATEGORY PAGES: Small Phone
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .tp-cat-products__grid {
        grid-template-columns: 1fr;
    }

    .tp-cat .cat-hero--split .cat-hero__content {
        padding: 20px 0 16px;
    }

    .tp-container {
        padding: 0 16px;
    }
}


/* ═══════════════════════════════════════════════════════════
   GLOBAL: Touch & UX
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Minimum touch targets */
    a, button, [role="button"], input[type="submit"] {
        min-height: 44px;
    }

    /* Better tap highlight */
    a, button {
        -webkit-tap-highlight-color: rgba(51, 122, 183, 0.1);
    }

    /* Smooth scrolling for fixed elements */
    .tp-mobile-dropdown,
    .tp-sc-body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Prevent zoom on input focus (iOS) */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* Image handling */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Table overflow protection */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Hide hover effects on touch */
    .tp-pcard:hover,
    .tp-fcard:hover,
    .tp-ucard:hover,
    .tp-rev-card:hover,
    .tp-cat-pcard:hover,
    .tp-cat-sc-card:hover {
        transform: none;
    }
}


/* ═══════════════════════════════════════════════════════════
   PAGE WIDTH: Prevent 1500px overflow on narrow screens
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1540px) {
    .page-id-9874 .site-header,
    .page-id-9874 .site-footer,
    .tp-page {
        max-width: 100% !important;
    }
}


/* ═══════════════════════════════════════════════════════════
   SMALL PHONE: iPhone SE / Mini (≤375px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
    /* Trust bar: smaller */
    .tp-page .tp-trust-item {
        font-size: 11px;
    }

    /* Featured card body */
    .tp-page .tp-fcard-body {
        padding: 16px;
    }
    .tp-page .tp-fcard-body h3 {
        font-size: 17px;
    }
    .tp-page .tp-fcard-price {
        font-size: 20px;
    }

    /* Section headers */
    .tp-page .tp-sh h2 {
        font-size: 22px;
    }

    /* Stats even more compact */
    .tp-page .tp-stat-num {
        font-size: 22px;
    }

    /* B2B section */
    .tp-page .tp-b2b-body h2 {
        font-size: 20px;
    }

    /* Footer: even more compact */
    .tp-footer-main > .tp-footer-inner {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Mobile header */
    .tp-mobile-header .tp-header-inner {
        padding: 0 8px;
    }

    .tp-logo-text .tp-logo-name {
        font-size: 16px;
    }

    /* Mobile drawer */
    .tp-mobile-drawer__cat-btn {
        font-size: 14px;
        padding: 10px 12px;
    }

    .tp-mobile-drawer__item {
        padding: 8px 12px 8px 24px;
        font-size: 13px;
    }
}