/*
Theme Name: USA Pharma
Theme URI: #
Author: Austin Russel
Author URI: #
Description: A custom WooCommerce theme for USA Pharma.
Version: 1.1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: usa-pharma
Tags: e-commerce, woocommerce, pharmacy, responsive
*/

.header-style-2 .logo-header img {
  width: 263px;
}

/* Breadcrumbs */
ul.breadcrumbs > li > span {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Add your custom styles here */
.orderby.tf-dropdown-sort {
    font-size: 14px;
    background: var(--white);
    color: var(--main);
    padding: 7px 12px;
}

.generic-page .list-faqs {
    gap: 20px;
}

.generic-page h1, .blog-detail-wrap .content h1, .product-description-list-content .tab-description h1 {
    font-size: 40px;
}

.generic-page h2, .blog-detail-wrap .content h2, .product-description-list-content .tab-description h2 {
    font-size: 32px;
}

.generic-page h3, .blog-detail-wrap .content h3, .product-description-list-content .tab-description h3 {
    font-size: 28px;
}

.generic-page h4, .blog-detail-wrap .content h4, .product-description-list-content .tab-description h4 {
    font-size: 24px;
}

.generic-page h5, .blog-detail-wrap .content h5, .product-description-list-content .tab-description h5 {
    font-size: 20px;
}

.generic-page h6, .blog-detail-wrap .content h6, .product-description-list-content .tab-description h6 {
    font-size: 18px;
}

/* Quick View Modal Responsive Styles */
.variant-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
    border-radius: 8px;
    width: 100%;
    max-width: 100%;
}

.variant-table {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    min-width: 100%;
    white-space: nowrap;
    width: 100%;
}

.variant-table th,
.variant-table td {
    min-width: 80px;
    white-space: nowrap;
}

/* Ensure modal content doesn't overflow */
#quickView .modal-content {
    overflow: hidden;
}

#quickView .modal-body {
    overflow-x: hidden;
    overflow-y: auto;
}

.pswp__top-bar {
  background: revert;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    .variant-table-wrap {
        margin: 15px -15px;
        border-radius: 0;
        width: calc(100% + 30px);
    }
    
    .variant-table {
        border-radius: 0;
        font-size: 14px;
        min-width: 450px; /* Ensure minimum width for readability */
    }
    
    .variant-table th,
    .variant-table td {
        padding: 8px 6px !important;
        min-width: 70px;
        font-size: 12px;
    }
    
    .variant-table .btn {
        font-size: 11px;
        padding: 4px 8px;
        min-width: 80px;
    }
    
    /* Make modal content scrollable on mobile */
    #quickView .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    #quickView .modal-body {
        padding: 15px;
        overflow-x: hidden;
    }
    
    #quickView .tf-product-info-price h5 {
        font-size: 18px;
    }
}

@media (max-width: 576px) {
    .variant-table-wrap {
        margin: 15px -10px;
        width: calc(100% + 20px);
    }
    
    .variant-table {
        min-width: 380px; /* Minimum width for very small screens */
    }
    
    .variant-table th,
    .variant-table td {
        padding: 6px 4px !important;
        min-width: 60px;
        font-size: 11px;
    }
    
    .variant-table .btn {
        font-size: 10px;
        padding: 3px 6px;
        min-width: 70px;
    }
    
    #quickView .modal-body {
        padding: 10px;
    }
}

@media only screen and (max-width: 1399px) {
    .tf-slideshow .wrap-slider {
        height: 520px;
    }
}