/*
 * DEDICATED MOBILE AND TABLET OVERRIDES
 * This file strictly targets max-width 1024px to ensure zero effect on desktop layouts.
 * It enforces sharp corners, vertical stacking, and strict container margins.
 */

@media (max-width: 1024px) {
    /* 1. Global Sharp Corners - All Photos and Form Elements */
    /* REMOVED .btn, .pill, .btn-read-more, etc. to preserve original design */
    body img,
    body figure,
    body .wp-post-image,
    body .feature-image,
    body .img-placeholder,
    body .product-image,
    body .product-thumb,
    body .gallery-item,
    body .category-thumbnail,
    body .form-group input,
    body .form-group select,
    body .form-group textarea,
    body .card,
    body .contact-info-card,
    body .contact-form-section,
    body .about-form-success,
    body .dogsan-editor-welcome-card,
    body .dogsan-editor-welcome-link,
    body .tax-card,
    body .tax-card-image,
    body .dogsan-products-wrapper .feature-image,
    body .dogsan-products-wrapper .about-form-success,
    body .dogsan-products-wrapper input,
    body .dogsan-products-wrapper textarea,
    body .dogsan-products-wrapper select {
        border-radius: 0 !important;
    }

    /* 2. Container Standard Margins / Paddings to fit perfectly on screen */
    body .container,
    body .wrapper,
    body .site-main,
    body .site-content,
    body .dogsan-products-wrapper .container,
    body .dogsan-about-wrapper .container,
    body .contact-section .container,
    body .categories-section .container,
    body .grid-section .container,
    body .products-hero,
    body .dogsan-about-wrapper #about-contact,
    body .dogsan-about-wrapper #about-help {
        padding-left: 24px !important;
        padding-right: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Fix the 100vw sections to prevent horizontal scroll and obey padding */
    body .dogsan-products-wrapper .categories-section,
    body .dogsan-products-wrapper .contact-section,
    body .dogsan-products-wrapper .products-breadcrumb-strip,
    body .dogsan-about-wrapper .contact-section,
    body .dogsan-about-wrapper .help-section,
    body .dogsan-about-wrapper .bottom-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Prevent overflow on the body horizontally */
    body, html {
        overflow-x: hidden !important;
    }

    /* 3. Vertical Stacking for All Grids and Lists */
    /* Products Grid, Feature Rows, Form Grids, Category Pills */
    body .four-grid,
    body .form-grid,
    body .products-grid,
    body .contact-grid,
    body .wp-block-columns,
    body .feature-row,
    body .contact-info-grid,
    body .modern-contact-form > div,
    body .product-top-section,
    body .product-left-col,
    body .product-lower-section,
    body .product-meta-column,
    body .product-details,
    body .tax-grid,
    body .dogsan-products-wrapper .four-grid,
    body .dogsan-products-wrapper .form-grid,
    body .dogsan-products-wrapper .feature-row,
    body .dogsan-products-wrapper .feature-row.reverse {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 24px !important;
    }

    body .four-grid,
    body .form-grid,
    body .contact-grid,
    body .contact-info-grid,
    body .modern-contact-form > div,
    body .details-row,
    body .tax-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    body .feature-image,
    body .feature-content,
    body .grid-item,
    body .wp-block-column,
    body .product-item,
    body .category-item,
    body .product-documents,
    body .product-main-image,
    body .dogsan-products-wrapper .feature-image,
    body .dogsan-products-wrapper .feature-content {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Product Thumbnails to flow horizontally but fit screen */
    body .product-thumbnails-col {
        width: 100% !important;
        flex-direction: column !important;
    }

    body .product-thumbnails {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        height: auto !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        justify-content: flex-start !important;
        padding-bottom: 8px !important;
    }

    body .product-thumb-item {
        flex-shrink: 0 !important;
        width: 80px !important;
        height: 80px !important;
    }

    /* Pills / Category Buttons */
    body .pills-container,
    body .dogsan-products-wrapper .pills-container,
    body.home .dogsan-home-grid .home-grid-pills,
    .dogsan-home-grid .home-grid-pills {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 16px !important;
    }

    body .pill,
    body .docs-downloads-pill,
    body .dogsan-products-wrapper .pill,
    body.home .dogsan-home-grid .home-grid-pill,
    .dogsan-home-grid .home-grid-pill {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: relative !important;
        z-index: 3 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(42, 58, 154, 0.22) !important;
    }

    body.home .dogsan-home-grid .home-grid-products,
    body .dogsan-products-wrapper .categories-section {
        position: relative !important;
        z-index: 2 !important;
    }

    body.home .dogsan-home-grid .home-grid-pills,
    body .dogsan-products-wrapper .pills-container {
        position: relative !important;
        z-index: 3 !important;
        pointer-events: auto !important;
    }

    body.home .dogsan-home-grid .home-grid-pill:hover,
    body.home .dogsan-home-grid .home-grid-pill:focus,
    body.home .dogsan-home-grid .home-grid-pill:active,
    body .dogsan-products-wrapper .pill:hover,
    body .dogsan-products-wrapper .pill:focus,
    body .dogsan-products-wrapper .pill:active {
        background: #2a3a9a !important;
        color: #ffffff !important;
    }

    /* 4. Contact Forms Fit Screen Perfectly */
    body .form-container,
    body .contact-form,
    body #about-help-form,
    body .wpforms-container,
    body .dogsan-products-wrapper .form-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body .form-group,
    body .form-full,
    body .dogsan-products-wrapper .form-group {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: 1 / -1 !important;
    }

    /* Override inline padding for contact section */
    body .contact-form-section {
        padding: 24px !important;
    }
    body .contact-info-card {
        padding: 24px 16px !important;
    }

    /* 5. Typography and General Cleanups */
    body .hero-title,
    body .section-title,
    body .dogsan-products-wrapper .hero-title,
    body .dogsan-products-wrapper .section-title {
        font-size: 32px !important;
        line-height: 40px !important;
        word-wrap: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    body .hero-text,
    body .feature-content p,
    body .grid-item p,
    body .dogsan-products-wrapper .hero-text {
        font-size: 16px !important;
        line-height: 24px !important;
        word-wrap: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
        white-space: normal !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body p,
    body li,
    body h1,
    body h2,
    body h3,
    body h4,
    body h5,
    body h6 {
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
        white-space: normal !important;
        max-width: 100% !important;
    }

    /* Ensuring feature rows properly reset */
    body .feature-image,
    body .dogsan-products-wrapper .feature-image {
        height: auto !important;
        min-height: 240px !important;
        aspect-ratio: 16 / 9 !important;
    }

    /* 6. Homepage Hero Slider Overrides */
    body .hero-section {
        height: auto !important;
        min-height: unset !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    body .hero-content-wrapper {
        position: relative !important;
    }
    body .hero-slider {
        overflow: visible !important;
    }
    body .hero-slide {
        position: relative !important;
        display: none;
    }
    body .hero-slide.active {
        display: block;
    }
    body .hero-bg {
        position: relative !important;
        height: 250px !important;
        inset: auto !important;
    }
    body .slider-controls,
    body .slider-controls-wrapper,
    body .slider-btn,
    body .slider-dots {
        display: none !important;
    }

    /* 7. Global Mobile Button Centering (all pages) */
    body .wp-block-buttons,
    body .button-group,
    body .hero-buttons,
    body .info-card-actions,
    body .post-actions,
    body .form-submit,
    body .cta-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        gap: 12px !important;
    }

    body .wp-block-button,
    body .wp-block-button__link,
    body .btn,
    body .btn-primary,
    body .btn-outline,
    body .btn-blue,
    body .btn-accent,
    body .button,
    body input[type="submit"],
    body button[type="submit"],
    body .filter-btn,
    body .pill,
    body .docs-downloads-pill {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        justify-content: center !important;
    }

    body .wp-block-button,
    body .btn,
    body .btn-primary,
    body .btn-outline,
    body .btn-blue,
    body .btn-accent,
    body .button,
    body input[type="submit"],
    body button[type="submit"],
    body .filter-btn,
    body .pill,
    body .docs-downloads-pill {
        display: inline-flex !important;
        align-items: center !important;
        width: fit-content !important;
        max-width: 100% !important;
    }

    /* 8. Burger Menu: centered text + no animation */
    body .mobile-menu-overlay,
    body .mobile-menu-overlay.active,
    body .mobile-menu-inner,
    body .mobile-navigation,
    body .mobile-navigation ul,
    body .mobile-navigation li,
    body .mobile-navigation .sub-menu,
    body .mobile-toggle span,
    body .mobile-dropdown-toggle,
    body .hamburger-icon span,
    body .menu-toggle.active .hamburger-icon span:nth-child(1),
    body .menu-toggle.active .hamburger-icon span:nth-child(2),
    body .menu-toggle.active .hamburger-icon span:nth-child(3) {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    body .mobile-menu-header {
        position: relative !important;
        justify-content: center !important;
        text-align: center !important;
    }

    body .mobile-menu-title {
        width: 100% !important;
        text-align: center !important;
    }

    body .mobile-menu-close {
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    body .mobile-navigation,
    body .mobile-navigation ul,
    body .mobile-navigation li,
    body .mobile-navigation a,
    body .mobile-navigation .sub-menu a {
        text-align: center !important;
    }

    body .mobile-navigation a {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    /* 9. Burger Menu text overlap fix */
    body .mobile-navigation ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    body .mobile-navigation li {
        display: block !important;
        position: relative !important;
        width: 100% !important;
    }

    body .mobile-navigation a {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        padding: 12px 0 !important;
        min-height: 44px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
        box-sizing: border-box !important;
    }

    body .mobile-navigation .sub-menu {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body .mobile-navigation > ul > li {
        margin-bottom: 6px !important;
    }

    body .mobile-navigation > ul > li > a {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    body .mobile-navigation .menu-item-has-children > a {
        padding-right: 0 !important;
    }

    body .mobile-navigation .menu-item-has-children > .mobile-dropdown-toggle {
        display: inline-flex !important;
        position: absolute !important;
        right: 0 !important;
        top: 8px !important;
        width: 40px !important;
        height: 40px !important;
        border: 0 !important;
        background: transparent !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        color: #0f172a !important;
        z-index: 2 !important;
    }

    body.single-product-page .product-main,
    body.single-surgical_product .product-main {
        padding-top: 96px !important;
    }

    body .dogsan-products-wrapper .feature-content .btn-read-more,
    body .dogsan-products-wrapper .btn-read-more,
    body .dogsan-products-wrapper .submit-wrapper .btn-submit,
    body .dogsan-products-wrapper .btn-submit {
        display: inline-flex !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: center !important;
    }

    body .dogsan-products-wrapper .feature-content,
    body .dogsan-products-wrapper .grid-item,
    body .dogsan-products-wrapper .form-container {
        text-align: left !important;
    }

    body .dogsan-products-wrapper .hero-title br,
    body .dogsan-products-wrapper .hero-text br,
    body .dogsan-products-wrapper .feature-content h2 br,
    body .dogsan-products-wrapper .feature-content p br,
    body .dogsan-products-wrapper .grid-item h3 br,
    body .dogsan-products-wrapper .grid-item p br,
    body .dogsan-about-wrapper .hero-title br,
    body .dogsan-about-wrapper .hero-text br,
    body .dogsan-about-wrapper .feature-content h2 br,
    body .dogsan-about-wrapper .feature-content p br,
    body .dogsan-about-wrapper .grid-item h3 br,
    body .dogsan-about-wrapper .grid-item p br {
        display: none !important;
    }
}

@media (max-width: 768px) {
    body main br,
    body .site-main br,
    body .dogsan-products-wrapper br,
    body .dogsan-about-wrapper br {
        display: none !important;
    }

    body main p,
    body main li,
    body main h1,
    body main h2,
    body main h3,
    body main h4,
    body main h5,
    body main h6,
    body main span,
    body .dogsan-products-wrapper p,
    body .dogsan-products-wrapper h1,
    body .dogsan-products-wrapper h2,
    body .dogsan-products-wrapper h3,
    body .dogsan-products-wrapper h4,
    body .dogsan-products-wrapper h5,
    body .dogsan-products-wrapper h6,
    body .dogsan-about-wrapper p,
    body .dogsan-about-wrapper h1,
    body .dogsan-about-wrapper h2,
    body .dogsan-about-wrapper h3,
    body .dogsan-about-wrapper h4,
    body .dogsan-about-wrapper h5,
    body .dogsan-about-wrapper h6 {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        max-width: none !important;
        width: auto !important;
    }

    body.home .hero-content,
    body.home .dogsan-home-grid .hero-content,
    .dogsan-home-grid .hero-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    body.home .hero-buttons,
    body.home .dogsan-home-grid .hero-buttons,
    .dogsan-home-grid .hero-buttons {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.home .hero-buttons .btn,
    body.home .dogsan-home-grid .hero-buttons .btn,
    .dogsan-home-grid .hero-buttons .btn {
        width: fit-content !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: center !important;
    }

    body.home .hero-title,
    body.home .hero-text,
    body.home .dogsan-home-grid .hero-title,
    body.home .dogsan-home-grid .hero-text,
    .dogsan-home-grid .hero-title,
    .dogsan-home-grid .hero-text {
        text-align: left !important;
    }

    body.home .home-grid-news-content,
    body.home .section-content.home-grid-news-content,
    .dogsan-home-grid .home-grid-news-content,
    .dogsan-home-grid .section-content.home-grid-news-content {
        align-items: flex-start !important;
        text-align: left !important;
    }

    body.home .home-grid-news-content *,
    .dogsan-home-grid .home-grid-news-content *,
    body.home .home-grid-news-title,
    body.home .home-grid-news-excerpt,
    .dogsan-home-grid .home-grid-news-title,
    .dogsan-home-grid .home-grid-news-excerpt {
        text-align: left !important;
    }

    body.home .home-grid-news-button,
    body.home .btn-read-more.home-grid-news-button,
    .dogsan-home-grid .home-grid-news-button,
    .dogsan-home-grid .btn-read-more.home-grid-news-button {
        align-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: inline-flex !important;
        width: fit-content !important;
        max-width: 100% !important;
    }
}