/**
 * Ahanit Theme Responsive Stylesheet
 *
 * Version: 1.2 (Tablet Hybrid View Update)
 * This file contains all styles for screens 1024px and smaller.
 * It is loaded conditionally via functions.php.
 * Changes: Removed duplicates, organized sections, added tablet hybrid view (show bottom-nav, hide search-user-contact).
 *
 * @package Ahanit
 * @since 1.0
 */
/* --- General Responsive Styles (Applies to Mobile and Tablet) --- */
@media (max-width: 1024px) {
    .header-wrap {
        display: none !important; /* Hide desktop header for mobile/tablet */
    }
    .contact-modal {
        display: none !important; /* Hide desktop modal */
    }
    /* Show mobile elements */
    .mobile-nav, .mobile-bottom-nav {
        display: flex;
    }
    .mobile-menu {
        display: block;
    }
}
/* --- Navigation Styles for Tablet (769px - 1024px) --- */
@media (max-width: 1024px) and (min-width: 769px) {
    .header-wrap {
        display: flex !important; /* Show hybrid desktop menu for tablet */
    }
    .header-nav-glass {
        justify-content: flex-end; /* Menu from right to logo */
    }
    .menu-section {
        flex: 1; /* Take space from right */
    }
    .search-user-contact-section {
        display: none !important; /* Hide left buttons for tablet */
    }
    .mobile-bottom-nav {
        display: flex; /* Show bottom nav for quick access */
        width: 70vw;
        max-width: 600px;
        font-size: 1.2rem; /* Larger font for readability */
        bottom: 2rem; /* Adjust position for tablet */
    }
    .mobile-bottom-btn {
        width: 8vw;
        max-width: 40px;
        max-height: 40px;
        font-size: 3.5vw;
    }
    .mobile-products-dropdown {
        width: 70vw;
        max-width: 600px;
        bottom: calc(10vw + 2rem); /* Adjust for tablet */
    }
    .mobile-products-link {
        font-size: 3vw;
    }
}
/* --- Navigation Styles for Mobile (768px and smaller) --- */
@media (max-width: 768px) {
    .mobile-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 14vw;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        z-index: 1000;
        align-items: center;
        justify-content: space-between;
        padding: 0 1rem;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .mobile-nav.hide {
        transform: translateY(-100%);
        opacity: 0;
    }
    .mobile-nav-logo img {
        width: 10vw;
        height: 10vw;
        object-fit: contain;
    }
    .hamburger-btn {
        background: transparent;
        border: none;
        color: #1a1a2e;
        font-size: 6vw;
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 50%;
        transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }
    .mobile-menu {
        position: fixed;
        top: 0;
        right: -40vw; /* Start off-screen like sample */
        width: 40vw;
        height: 100vh;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15));
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        z-index: 2000;
        padding: 1rem;
        transition: right 0.4s ease-in-out;
    }
    .mobile-menu.active {
        right: 0;
    }
    .mobile-menu-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(24, 20, 60, 0.2);
        -webkit-backdrop-filter: blur(5px) saturate(130%);
        backdrop-filter: blur(5px) saturate(130%);
        z-index: 1999;
        opacity: 0;
        transition: opacity 0.4s ease;
    }
    .mobile-menu.active + .mobile-menu-backdrop {
        display: block;
        opacity: 1;
    }
    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
    }
    .mobile-menu-logo {
        width: 12vw;
        height: 12vw;
        filter: grayscale(100%) brightness(0%);
    }
    .mobile-menu-close {
        background: linear-gradient(45deg, #6a5acd, #8a4af3);
        color: #ffffff;
        border: none;
        border-radius: 50%;
        font-size: 5vw;
        width: 10vw;
        height: 10vw;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.2s ease;
        box-shadow: 0 0.12vw 0.32vw rgba(0, 0, 0, 0.15);
    }
    .mobile-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .mobile-menu-item {
        margin-bottom: 1rem;
    }
    .mobile-menu-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        color: #1a1a2e;
        font-size: 4vw;
        text-decoration: none;
        border-radius: 8px;
        transition: background 0.2s ease, color 0.2s ease;
    }
    .mobile-menu-link:hover,
    .mobile-menu-link.active {
        background: linear-gradient(45deg, #6a5acd, #8a4af3);
        color: #ffffff;
    }
    .mobile-menu-link:hover i,
    .mobile-menu-link.active i {
        color: #ffffff;
    }
    .mobile-submenu {
        display: none;
        position: fixed;
        top: 0;
        right: -30vw; /* Like sample */
        width: 30vw;
        height: 100vh;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(1vw);
        z-index: 2100;
        padding: 1rem;
        transition: right 0.3s ease;
    }
    .mobile-submenu.active {
        display: block;
        right: 40vw; /* Beside main like sample */
    }
    .mobile-submenu-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .mobile-submenu-item {
        margin-bottom: 1rem;
    }
    .mobile-submenu-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 1rem;
        color: #6a5acd;
        font-size: 3.5vw;
        text-decoration: none;
        border-radius: 0.6vw;
        transition: background 0.2s ease, color 0.2s ease;
    }
    .mobile-submenu-link:hover,
    .mobile-submenu-link.active {
        background: linear-gradient(45deg, #6a5acd, #8a4af3);
        color: #ffffff;
    }
    .mobile-bottom-nav {
        position: fixed;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        width: 90vw;
        max-width: 500px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        z-index: 1000;
        justify-content: space-around;
        align-items: center;
        padding: 0.5rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        gap: 0.5rem;
    }
    .mobile-bottom-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 12vw;
        max-width: 50px;
        max-height: 50px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
        color: #1a1a2e;
        font-size: 5vw;
        cursor: pointer;
        transition: all 0.2s ease;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .mobile-bottom-btn.active {
        background: linear-gradient(45deg, #6a5acd, #8a4af3);
        color: #ffffff;
        transform: scale(1.05);
    }
    .mobile-products-dropdown {
        display: none;
        position: fixed;
        bottom: calc(14vw + 2rem);
        left: 5%;
        width: 90%;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15));
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        z-index: 999;
        padding: 1rem;
        animation: slideInBottom 0.3s ease;
    }
    .mobile-products-dropdown.active {
        display: block;
    }
    @keyframes slideInBottom {
        from { opacity: 0; transform: translateY(2rem); }
        to { opacity: 1; transform: translateY(0); }
    }
    .mobile-products-list { list-style: none; padding: 0; margin: 0; }
    .mobile-products-item:not(:last-child) { margin-bottom: 0.5rem; }
    .mobile-products-link { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; color: #1a1a2e; font-size: 4vw; text-decoration: none; border-radius: 8px; }
    .mobile-products-link.active, .mobile-products-link:hover { background: linear-gradient(45deg, #6a5acd, #8a4af3); color: #ffffff; }
}
/* --- Responsive Page Sections (Mobile and Tablet) --- */
@media (max-width: 1024px) {
    .intro-section { margin: 16vw auto 8vw auto; padding: 4vw; }
    .intro-container { flex-direction: column; gap: 4vw; align-items: center; }
    .intro-content { flex: 0 0 100%; text-align: center; }
    .intro-title { font-size: 5vw; margin-bottom: 2vw; }
    .intro-description { font-size: 3.5vw; margin-bottom: 4vw; }
    .intro-cta { justify-content: center; }
    .intro-btn { padding: 2vw 4vw; font-size: 3vw; }
    .intro-logo { flex: 0 0 auto; order: -1; }
    .intro-img { width: 40vw; height: auto; }
    .intro-links { margin-top: 4vw; }
    .intro-links-list { flex-wrap: wrap; gap: 3vw; justify-content: center; }
    .intro-link { font-size: 3vw; padding: 2vw 4vw; }
    .products-container { grid-template-columns: 1fr; gap: 3vw; }
    .product-box { padding: 3vw; }
    .product-table td { font-size: 2.5vw; }
    .factory-logo { width: 5vw; height: 5vw; }
    .chart-btn i { font-size: 2.5vw; }
    .category-title { font-size: 3.5vw; }
    .category-description { font-size: clamp(14px, 2.5vw, 16px); }
    .category-btn { font-size: 2.5vw; padding: 1.5vw 3vw; }
    .chart-modal-content { width: 85vw; padding: 3vw; }
    .chart-modal-title { font-size: 3.5vw; }
    .chart-placeholder { height: 35vw; }
    .chart-modal-description { font-size: 2.5vw; }
    .chart-modal-btn { font-size: 2.5vw; padding: 1.5vw 3vw; }
    .chart-modal-close { font-size: 2.5vw; width: 5vw; height: 5vw; }
    .magazine-section { margin: 8vw auto; padding: 4vw; }
    .section-title { font-size: 4vw; }
    .section-title::after { width: 10vw; height: 0.4vw; }
    .blog-grid { grid-template-columns: 1fr; gap: 3vw; }
    .blog-card { padding: 3vw; }
    .blog-image { height: 30vw; }
    .blog-title { font-size: 3.5vw; }
    .blog-description { font-size: clamp(14px, 2.5vw, 16px); }
    .blog-link { font-size: 2.5vw; }
    .all-blogs-btn { font-size: 2.5vw; padding: 1.5vw 4vw; }
    .footer-box { border-radius: 2.5vw 2.5vw 0 0; }
    .footer-container { grid-template-columns: 1fr; gap: 2vw; text-align: center; }
    .footer-logo-column { align-items: center; }
    .footer-logo { width: 16vw; }
    .footer-description { font-size: 2vw; max-width: 70vw; }
    .footer-title { font-size: 2.5vw; }
    .footer-title::after { width: 5vw; left: 50%; transform: translateX(-50%); }
    .footer-link, .footer-contact li { font-size: 2vw; justify-content: center; }
    .footer-contact i { font-size: 2.2vw; }
    .trust-badges { justify-content: center; }
    .trust-image { width: 10vw; }
    .social-links { justify-content: center; }
    .social-link { font-size: 2.8vw; }
    .footer-copyright { font-size: 1.6vw; }
}
/* --- Single Product Page Responsive Styles --- */
@media (max-width: 1024px) {
    .faq-reviews-grid-container { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .single-product .product-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .single-product .product-image-section { grid-row: 1 / 2; }
    .single-product .product-info-section { grid-row: 2 / 3; }
    .single-product .product-chart-section { grid-row: 3 / 4; margin-top: 4vw; }
   
    .single-product h1.product_title { font-size: 5vw !important; }
    .single-product .price-box .price, .single-product .main-price { font-size: 4vw; }
    .single-product .last-updated { font-size: 2vw; }
    .single-product .product-info-item { font-size: 3vw; }
    .single-product .quantity-input { width: 10vw; font-size: 2.5vw; }
    .single-product .product-chart { font-size: 3.5vw; }
    .single-product .chart-placeholder { height: 45vw; }
   
    .single-product .technical-specs,
    .single-product .product-article {
        padding: 4vw;
    }
    .single-product .technical-specs h2,
    .single-product .product-article h2 {
        font-size: 4vw;
    }
    .single-product .technical-specs .specs-list {
        grid-template-columns: 1fr 1fr;
    }
    .single-product .product-article h3 { font-size: 3vw; }
    .single-product .product-article p { font-size: 2.5vw; }
    .single-product .spec-label, .single-product .spec-value { font-size: 2.5vw; }
    .single-product .spec-image { width: 6vw; height: 6vw; }
    .single-product .single_add_to_cart_button { font-size: 3.5vw !important; padding: 2.5vw; width: 100%; }
    /* FAQ & Reviews Responsive */
    .faq-reviews-grid-container {
        grid-template-columns: 1fr; /* Stack columns */
    }
    .faq-section { padding: 4vw; }
    .faq-section h2, .product-reviews-section #reply-title { font-size: 4.5vw; }
    .faq-question { font-size: 3.2vw; }
    .faq-answer { font-size: 3vw; }
    .product-reviews-section #review_form_wrapper { padding: 4vw; }
    .product-reviews-section .comment-form label { font-size: 3vw; }
    .product-reviews-section .comment-form input[type="text"],
    .product-reviews-section .comment-form input[type="email"],
    .product-reviews-section .comment-form textarea {
        font-size: 3.2vw;
        padding: 2vw 2.5vw;
        border-radius: 2vw;
    }
    .product-reviews-section .form-submit input#submit {
        font-size: 3.8vw;
        padding: 3vw;
        border-radius: 2vw;
    }
    .product-reviews-section .commentlist li.comment { padding: 4vw; }
    .product-reviews-section .commentlist img.avatar { width: 12vw; height: 12vw; }
    .product-reviews-section .woocommerce-review__author { font-size: 3.5vw; }
    .product-reviews-section .woocommerce-review__published-date { font-size: 2.8vw; }
    .product-reviews-section .description p { font-size: 3.2vw; }
}
@media (max-width: 480px) {
    .single-product .product-container { padding: 4vw 2vw; }
    .single-product .product-header { gap: 2vw; }
    .single-product .price-box { width: 100%; }
    .single-product h1.product_title { font-size: 6vw !important; }
    .single-product .main-price, .single-product .price-box .price { font-size: 5vw; }
    .single-product .technical-specs .specs-list { grid-template-columns: 1fr; }
}
/* Breadcrumb & TOC – mobile */
@media (max-width: 768px) {
  .product-breadcrumb {
    width: min(94vw, 620px);
    margin: 3.2rem auto 1rem;
    padding: .7rem .85rem;
  }
  .product-breadcrumb .bc-item {
    padding: .22rem .5rem;
  }
  .toc { padding: .9rem 1rem; }
  .toc .toc-title { font-size: 1rem; }
  .toc .toc-item { padding-right: 1.6rem; }
  .toc .toc-item::before {
    right: .25rem;
    top: .1rem;
    min-width: 1.15rem; height: 1.15rem; line-height: 1.15rem; font-size: .72rem;
  }
}
/**
 * =========================================================================
 * Single Post Responsive Fixes (Viewport Overflow)
 * @since 3.2.1
 * =========================================================================
 */
@media (max-width: 768px) {
    /**
     * Fix 1: Post Header Layout
     * Stacks the header content and featured image vertically on mobile
     * to prevent horizontal overflow, with title (h1) displayed first.
     */
    .article-header-new {
        grid-template-columns: 1fr; /* Force single column layout */
        grid-template-rows: auto auto; /* Define two rows for content and image */
        padding: 1.5rem; /* Adjust padding for smaller screens */
        gap: 1.5rem; /* Reduce the gap between stacked elements */
    }
    .header-content-area {
        grid-row: 1 / 2; /* Place content (h1, meta, breadcrumb) first */
        grid-column: 1 / -1;
    }
    .header-image-area {
        grid-row: 2 / 3; /* Place image second */
        grid-column: 1 / -1;
    }
    .article-title-main {
        font-size: 1.6rem; /* Adjusted title size for mobile */
        margin-bottom: 1rem;
    }
    .breadcrumb {
        font-size: 0.8rem; /* Smaller breadcrumb font for mobile */
    }
    .article-meta-info {
        font-size: 0.85rem; /* Smaller meta info font for mobile */
    }
    .header-image-area img {
        width: 100%;
        height: auto;
        max-height: 300px; /* Limit image height to prevent overflow */
        object-fit: cover; /* Ensure image scales properly */
    }
    /**
     * Fix 2: Related Products Widget Layout
     * Stacks the related product cards vertically on mobile.
     */
    .products-grid-revised {
        grid-template-columns: 1fr; /* Force single column layout */
        padding: 0; /* Remove horizontal padding inside the widget */
    }
    .related-products-section .section-title {
        font-size: 1.5rem; /* Adjusted title size */
    }
}