/* Mobile & Table */
@media (max-width: 1023px) {
    .hide-on-mobile-table{
        display: none;
    }
    .app__container {
        margin-top: 0;
    }

    li {
        padding: 0;
    }

    .header {
        background-color: var(--White-color);
        padding: 0 16px;
        box-shadow: 0 0 10px rgb(0 0 0 / 20%);
        height: var(--header-height-mobile-table);
    }

    .white-color{
        animation: none;
    }

    /* .app__container {
        margin-top: var(--header-height-mobile-table);
    } */
    
    .header-left{
        display: flex;
    }

    .header-function{
        margin-left: 0;
    }

    .box-search.active {
        display: block;
    }

    .box-search .header-search__form-input{
        background-color: #fff;
    }

    .nav-mobile-item{
        display: block !important;
    }

    .img-select{
        width: 20%;
    }

    .img-display {
        width: 80%;
    }
 

}

/* Table */
@media (min-width: 740px) and (max-width: 1023px) {
    .benefits-bar {
        margin-top: var(--header-height-mobile-table);
    }
    .hide-on-table {
        display: none;
    }
    .app__container {
        margin-top: 0;
    }

    .box-search{
        width: 400px;
    }

    .img-select {
        max-height: 920px;
    }

    .product-imgs {
        display: flex;
    }

    .slideshow-container{
        padding: 0 14px;
    }

    .product-content{
        padding: 2rem 1.4rem;
    }

    .breadcrumb-arrows {
        padding: 0;
        margin: 0;
    }

    .no-margin{
        margin: 0 14px !important;
    }

    
}

/* Mobile */
@media (max-width: 739px) {
    .hide-on-mobile{
        display: none;
    }

    .product-item{
        padding: 1px;
    }

    .product-heading__subtitle{
        max-width: 250px;
    }

    .products{
        margin: 0 8px;
    }

    .product:hover .product-item__btn {
        display: none;
    }

    .footer{
        padding: 0 8px;
    }

    .img-select{
        max-height: 450px;
    }

    .product-title {
        font-size: 2rem;
        line-height: 3rem;
    }

    .product-content {
        padding: 1rem 1.4rem;
    }

    .slideshow-container{
        padding: 0 14px;
        width: 100%;
    }

    .mySlides.fade {
        border-radius: 8px;
        overflow: hidden;
    }

}
/* Contact and Warranty Responsive */
@media (max-width: 1023px) {
    .contact-container,
    .warranty-container {
        padding: 30px 10px;
    }

    .contact-heading {
        font-size: 2.4rem;
    }

    .contact-info-title,
    .contact-form-title {
        font-size: 1.8rem;
        margin-top: 20px;
    }
}

@media (max-width: 739px) {
    .warranty-content {
        padding: 20px 15px;
    }

    .contact-map iframe {
        height: 250px;
    }

    .contact-form-btn {
        width: 100%;
        padding: 12px;
    }
}

/* Centering fix for Mobile */
@media (max-width: 739px) {
    .contact-container,
    .warranty-container {
        padding: 20px 0;
        width: 100%;
        margin: 0 auto;
    }

    .contact-container .row,
    .warranty-container .row {
        margin-left: 0;
        margin-right: 0;
    }

    .contact-container .col,
    .warranty-container .col {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .contact-heading {
        padding: 0 10px;
    }
}

/* Final alignment for small devices */
@media (max-width: 739px) {
    .grid.wide {
        width: 100% !important;
        padding: 0 5px; /* Tiny gutter for the grid edge */
    }
    
    .contact-container .row,
    .warranty-container .row {
        width: 100%;
        margin: 0 !important;
    }
    
    .contact-container .col,
    .warranty-container .col {
        width: 100% !important;
        padding: 0 10px !important;
    }
    
    .contact-heading {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    .header-right {
        min-width: 84px;
    }
    .header-function {
        margin-left: auto;
    }
}

/* Overwrite previous mobile alignment attempts with a cleaner solution */
@media (max-width: 739px) {
    .contact-container,
    .warranty-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .contact-container .row,
    .warranty-container .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .contact-container .col,
    .warranty-container .col {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    .contact-heading {
        font-size: 2.2rem !important;
        text-align: center !important;
        width: 100% !important;
        margin: 20px 0 !important;
        position: relative;
        left: 0;
    }
    
    .contact-info-title, 
    .contact-form-title {
        text-align: center !important;
    }

    .look-book-image {
        height: 100px;
    }
}

/* Absolute Centering Fix for Mobile */
@media (max-width: 739px) {
    .contact-container, 
    .warranty-container {
        width: 100% !important;
        padding: 20px 15px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .contact-container .row, 
    .warranty-container .row {
        margin: 0 !important;
        width: 100% !important;
        display: block !important;
    }

    .contact-container .col, 
    .warranty-container .col {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }

    .contact-heading {
        font-size: 2.2rem !important;
        text-align: center !important;
        margin: 10px 0 20px 0 !important;
        width: 100% !important;
    }
    
    .contact-info-title, 
    .contact-form-title {
        text-align: center !important;
        font-size: 1.8rem !important;
    }

    .contact-map iframe {
        width: 100% !important;
        border-radius: 8px !important;
    }

    .warranty-content {
        padding: 20px 10px !important;
        font-size: 1.4rem !important;
        text-align: justify !important;
    }
}

@media (max-width: 768px) {
    .slide, .warranty-container, .contact-container {
        margin-top: var(--header-height-mobile-table) !important;
    }
}

/* Fix padding for tablets and small laptops (1024px - 1160px) */
@media (min-width: 1024px) and (max-width: 1200px) {
    .header {
        padding: 0 10px !important;
    }
    .header-logo__img {
        max-width: 130px !important;
    }
    .header-logo__link-title {
        font-size: 2.2rem !important;
    }
    .header-menu__item {
        padding: 0 4px !important;
    }
    .header-menu__item-link {
        font-size: 1.15rem !important;
        white-space: nowrap !important;
    }
    .header-search {
        width: 140px !important;
    }
    .header-function {
        margin-left: 10px !important;
    }
    .call-btn-content .call-text {
        display: none !important;
    }
    .header-call .call-number {
        font-size: 1.2rem !important;
    }
    .contact-container,
    .warranty-container {
        padding-left: 40px !important;
        padding-right: 40px !important;
        width: 100% !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
    }
}

/* Ensure container doesn't overflow */
.app__container {
    overflow-x: hidden;
    width: 100%;
}