/* ============================================
   TABLET RESPONSIVE STYLES (768px - 1200px)
   ============================================

   Coverage:
   - 768-1200px: Base tablet (all tablets/small desktops)
   - 834-1200px: Larger tablets (refinements)

   Note: Mobile styles end at 767px (mobile.css)
   Note: Desktop styles begin at 1201px (global.css)
   ============================================ */

/* ===========================================
   BASE TABLET QUERY (768px - 1200px)
   =========================================== */
@media (min-width: 768px) and (max-width: 1200px) {

    /* ===========================
       NAVIGATION STYLES
       =========================== */

    /* === MAIN NAVIGATION (nav-primary) === */

    /* Nav-primary responsive menu styling */
    .nav-primary {
        padding: 0 !important;
    }

    .nav-primary .wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    .nav-primary .responsive-menu-icon {
        display: block !important;
        background: #1c3a4d !important;
        color: white !important;
        padding: 14px 20px !important;
        font-size: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        text-align: left !important;
        width: 100% !important;
        cursor: pointer !important;
        position: relative !important;
        min-height: 48px !important;
        box-sizing: border-box !important;
        margin-bottom: 0 !important;
    }

    .nav-primary .responsive-menu-icon::before {
        content: "MENU" !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        font-family: inherit !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        position: absolute !important;
        left: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .nav-primary .responsive-menu-icon::after {
        content: "☰" !important;
        color: white !important;
        font-size: 15px !important;
        position: absolute !important;
        right: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        transition: transform 0.3s ease !important;
    }

    .nav-primary .responsive-menu-icon.responsive-menu-open::after {
        transform: translateY(-50%) rotate(180deg) !important;
    }

    /* Hide the primary menu list by default - Genesis JS will toggle with inline styles */
    .nav-primary .genesis-nav-menu:not([style*="display: block"]),
    .nav-primary ul.menu:not([style*="display: block"]),
    .nav-primary #menu-primary-menu:not([style*="display: block"]) {
        display: none;
    }

    
    /* === SECONDARY NAVIGATION (nav-secondary) === */

    /* Remove desktop flex display */
    .nav-secondary {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    .nav-secondary .wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Toggle button for categories */
    .mobile-category-toggle {
        display: block !important;
        width: 100%;
        padding: 14px 20px;
        background: #fff !important;
        color: #1c3a4d !important;
        border: none;
        border-radius: 0;
        font-size: 16px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        position: relative;
        margin: 0;
    }

    .mobile-category-toggle .toggle-icon {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        transition: transform 0.3s ease;
    }

    .mobile-category-toggle.active .toggle-icon {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Hide original responsive menu icon */
    .nav-secondary .responsive-menu-icon {
        display: none !important;
    }

    /* Menu container */
    ul#menu-catalog {
        display: block !important;
        width: 100% !important;
        background: #ffffff;
        border-radius: 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        max-height: 400px;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0 !important;
        margin: 0 !important;
        transition: all 0.3s ease;
        -webkit-overflow-scrolling: touch;
    }

    /* Hidden state */
    ul#menu-catalog.mobile-hidden {
        max-height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        box-shadow: none;
    }

    /* Visible state */
    ul#menu-catalog.mobile-visible {
        max-height: 400px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Menu items */
    ul#menu-catalog > li {
        display: block !important;
        width: 100%;
        border-bottom: 1px solid #e8e8e8;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: unset !important;
        white-space: normal !important;
        border-right: none !important;
    }

    ul#menu-catalog > li:last-child {
        border-bottom: none;
    }

    /* Menu links */
    ul#menu-catalog > li > a {
        display: block !important;
        padding: 14px 20px !important;
        color: #2c3e50 !important;
        font-size: 15px !important;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s ease;
        background: transparent !important;
        border: none !important;
    }

    /* Hide submenus */
    ul#menu-catalog .sub-menu {
        display: none !important;
    }

    /* Scrollbar styling for webkit browsers */
    ul#menu-catalog::-webkit-scrollbar {
        width: 6px;
    }

    ul#menu-catalog::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    ul#menu-catalog::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }

    /* ===========================
       HOMEPAGE STYLES
       =========================== */

    /* Slider adjustments for tablet - fix positioning without removing images */

    .slider-row .slider-coins {
        max-height: 235px !important;
    }

    /* Override desktop negative margin that causes overlap */
    .slider-row .slider-coins .fl-slide-photo-wrap {
        max-width: 300px !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-shrink: 0 !important;
    }

    .slider-row .slider-coins .fl-slide-photo-wrap img {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    /* Text content with proper spacing */
    .slider-row .slider-coins .fl-slide-content-wrap {
        flex: 1 !important;
        max-width: calc(100% - 320px) !important;
        padding-right: 20px !important;
    }

    .slider-row .slider-coins .fl-slide-content {
        padding: 30px 20px !important;
    }

    /* Ensure proper flex layout */
    .slider-row .fl-slide-foreground.clearfix {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 25px !important;
        gap: 20px !important;
    }

    /* Deal of the day section adjustments */
    .deal-column .deal-product {
        max-height: 360px !important;
    }

    .deal-product img {
        max-height: 180px !important;
    }

    /* Content spacing adjustments */
    .page-template-template-page-builder-php .site-inner {
        margin-top: 100px !important;
    }

    .site-inner,
    .wrap {
        padding: 0 !important;
    }

    /* Slider content text adjustments */
    .slider-row .fl-slide-text {
        padding: 20px !important;
    }

    .slider-row h2 {
        font-size: 36px !important;
    }

    .slider-row .fl-button {
        padding: 14px 28px !important;
        font-size: 15px !important;
    }

    /* ===========================
       WOOCOMMERCE ACCOUNT STYLES
       =========================== */

    body.woocommerce-account .woocommerce-MyAccount-navigation {
        width: 30%;
    }

    body.woocommerce-account .woocommerce-MyAccount-content {
        width: 68%;
    }

    body.woocommerce-account h1 {
        font-size: 36px;
    }

    /* ===========================
       WOOCOMMERCE PRODUCT ARCHIVE STYLES
       =========================== */

    /* Main container adjustments */
    .page-id-1076 .site-inner,
    body.woocommerce .site-inner {
        margin: 120px auto !important;
        padding: 30px 20px !important;
    }

    /* Content-sidebar layout for tablets */
    .woocommerce-page.sidebar-content .content {
        width: 100% !important;
        max-width: 580px !important;
    }

    .woocommerce-page.sidebar-content .sidebar {
        margin-top: 72px !important;
        max-width: 240px !important;
    }

    .woocommerce-page.sidebar-content .entry-title {
        margin-left: 0 !important;
        padding-top: 10px !important;
        font-size: 36px !important;
    }

    .woocommerce-page.sidebar-content .content-sidebar-wrap {
        gap: 15px !important;
    }

    /* Sidebar widget styling improvements */
    body.woocommerce .site-inner .sidebar .widget {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(15px) !important;
        border-radius: 10px !important;
        padding: 20px 15px !important;
        margin-bottom: 20px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    }

    body.woocommerce .site-inner .sidebar {
        padding: 0;
    }

    body.woocommerce .site-inner .entry-header .entry-title {
        margin-bottom: 0 !important;
    }

    body.woocommerce:not(.single-product) .entry-content .woocommerce {
        padding: 15px !important;
    }

    .sidebar .widget-title,
    .sidebar h4 {
        font-size: 16px !important;
        margin-bottom: 15px !important;
        padding-bottom: 12px !important;
        border-bottom: 2px solid rgba(212, 175, 55, 0.2) !important;
        color: #1c3a4d !important;
        font-weight: 600 !important;
    }

    form.woocommerce-product-search {
        flex-direction: column !important;
    }

    /* Categories list styling */
    .sidebar .widget ul {
        padding: 0 !important;
        margin: 0 !important;
    }

    .sidebar .widget li {
        padding: 8px 10px !important;
        margin: 4px 0 !important;
        border-radius: 6px !important;
        transition: all 0.3s ease !important;
        font-size: 13px !important;
    }

    .sidebar .widget li:hover {
        background: rgba(212, 175, 55, 0.08) !important;
    }

    .sidebar .widget li a {
        color: #4a5568 !important;
        text-decoration: none !important;
        font-size: 13px !important;
        font-weight: 500 !important;
    }

    .sidebar .widget li a:hover {
        color: #9b8a3a !important;
    }

    /* Category count badges */
    .sidebar .widget li .count {
        background: rgba(212, 175, 55, 0.15) !important;
        color: #9b8a3a !important;
        padding: 2px 8px !important;
        border-radius: 12px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        float: right !important;
    }

    /* Search widget styling */
    .sidebar .widget.woocommerce-widget-layered-nav input[type="search"],
    .sidebar .widget input[type="search"] {
        width: 100% !important;
        padding: 8px 10px !important;
        border: 1px solid rgba(212, 175, 55, 0.2) !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }

    .sidebar .widget button[type="submit"],
    .sidebar .widget input[type="submit"] {
        width: 100% !important;
        padding: 10px !important;
        background: linear-gradient(135deg, #9b8a3a, #b8a347) !important;
        color: white !important;
        border: none !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    .sidebar .widget button[type="submit"]:hover,
    .sidebar .widget input[type="submit"]:hover {
        background: linear-gradient(135deg, #8a7b33, #a6943f) !important;
        transform: translateY(-1px) !important;
    }

    /* Archive title for tablets */
    body.woocommerce:not(.single-product) article > h2:first-child {
        font-size: 36px !important;
        margin-bottom: 35px !important;
    }

    /* Products container padding */
    body.woocommerce:not(.single-product) .woocommerce {
        padding: 35px 25px !important;
    }

    /* Product grid - ensure 2 columns on tablet */
    body.woocommerce:not(.single-product) ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* Product cards spacing */
    body.woocommerce:not(.single-product) ul.products li.product {
        padding: 20px !important;
    }

    /* Product images for tablets - height-based to show full slab */
    body.woocommerce:not(.single-product) ul.products li.product img {
        height: 240px !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    /* Product titles */
    body.woocommerce:not(.single-product) ul.products li.product h2 {
        font-size: 15px !important;
        min-height: 42px !important;
    }

    /* Product prices */
    body.woocommerce:not(.single-product) ul.products li.product .price {
        font-size: 18px !important;
    }

    /* Result count */
    body.woocommerce:not(.single-product) .woocommerce-result-count {
        font-size: 13px !important;
    }

    /* Pagination spacing */
    body.woocommerce:not(.single-product) nav.woocommerce-pagination ul {
        margin-top: 35px !important;
        gap: 10px !important;
    }

    body.woocommerce:not(.single-product) nav.woocommerce-pagination ul li a,
    body.woocommerce:not(.single-product) nav.woocommerce-pagination ul li span {
        padding: 8px 12px !important;
    }

    /* ===========================
       WOOCOMMERCE PRODUCT SINGLE STYLES
       =========================== */

    body.single-product .site-inner {
        max-width: 100% !important;
        padding: 0 25px !important;
        margin: 120px auto !important;
    }

    body.single-product .entry-title {
        font-size: 28px !important;
        padding: 30px 0 !important;
        letter-spacing: 1.5px !important;
    }

    /* Product container optimized for tablet */
    body.single-product .woocommerce div.product {
        padding: 35px 30px !important;
        gap: 30px !important;
        border-radius: 18px !important;
    }

    /* Gallery adjustments */
    body.single-product .woocommerce-product-gallery .flex-viewport {
        max-width: 350px !important;
        padding: 15px !important;
    }

    body.single-product .woocommerce-product-gallery__image.flex-active-slide {
        min-width: 320px !important;
    }

    .woocommerce-product-gallery__wrapper img.wp-post-image {
        max-width: 320px !important;
    }

    body.single-product .site-container .woocommerce div.product .woocommerce-product-gallery {
        gap: 0 !important;
    }

    /* Thumbnail adjustments */
    body.single-product .site-container .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs {
        width: 70px !important;
        gap: 10px !important;
    }

    body.single-product .site-container .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li {
        width: 70px !important;
        height: 70px !important;
    }

    /* Summary section */
    body.single-product .site-container .summary .product_title {
        font-size: 22px !important;
        margin-bottom: 18px !important;
    }

    body.single-product .site-container  .price {
        font-size: 28px !important;
        margin-bottom: 20px !important;
    }

    body.single-product .single_add_to_cart_button {
        max-width: 260px !important;
        padding: 14px 28px !important;
        font-size: 14px !important;
    }

    /* Product meta */
    body.single-product .woocommerce-product-details__short-description p,
    body.single-product .sku_wrapper,
    body.single-product .posted_in {
        font-size: 14px !important;
        padding: 7px 10px !important;
    }

    /* Tabs section */
    body.single-product .woocommerce-tabs {
        width: 95% !important;
        padding: 0 !important;
    }

    body.single-product .woocommerce-tabs ul.tabs li a {
        padding: 14px 10px !important;
        font-size: 16px !important;
    }

    body.single-product .woocommerce-tabs .wc-tab {
        padding: 30px 25px !important;
    }

    body.single-product .woocommerce-tabs p {
        font-size: 17px !important;
        line-height: 1.7 !important;
    }

    /* Related products */
    body.single-product .related.products {
        width: 95% !important;
        padding: 30px 25px !important;
    }

    body.single-product .related.products > h2 {
        font-size: 28px !important;
        margin-bottom: 20px !important;
    }

    body.single-product .related.products ul.products {
        padding: 30px 20px !important;
        gap: 18px !important;
    }

    body.single-product .related.products li.product {
        flex: 0 0 260px !important;
        min-width: 260px !important;
        padding: 20px !important;
    }

    body.single-product .related.products img {
        max-width: 140px !important;
    }

    body.single-product .related.products .woocommerce-loop-product__title {
        font-size: 16px !important;
    }

    body.single-product .related.products .price {
        font-size: 15px !important;
    }

    body.single-product .related.products .add_to_cart_button {
        padding: 9px 18px !important;
        font-size: 12px !important;
    }
}

/* ===========================================
   LARGER TABLETS (834px - 1200px)
   Additional refinements for bigger tablets
   =========================================== */
@media (min-width: 834px) and (max-width: 1200px) {

    /* ===========================
       HOMEPAGE ENHANCEMENTS
       =========================== */

    /* Larger images for bigger tablets */
    .slider-row .slider-coins .fl-slide-photo-wrap {
        max-width: 350px !important;
    }

    .slider-row .slider-coins .fl-slide-photo-wrap img {
        margin-left: -38px !important;
        margin-right: 0 !important;
    }

    .slider-row .slider-coins .fl-slide-content-wrap {
        max-width: calc(100% - 370px) !important;
    }

    .slider-row .slider-coins .fl-slide-content {
        padding: 30px 30px !important;
    }

    .slider-row h2 {
        font-size: 38px !important;
    }

    /* ===========================
       PRODUCT ARCHIVE ENHANCEMENTS
       =========================== */

    .woocommerce-page.sidebar-content .content {
        max-width: 630px !important;
    }

    .woocommerce-page.sidebar-content .sidebar {
        max-width: 260px !important;
    }

    .woocommerce-page.sidebar-content .content-sidebar-wrap {
        gap: 18px !important;
    }

    body.woocommerce:not(.single-product) article > h2:first-child {
        font-size: 40px !important;
    }

    body.woocommerce:not(.single-product) ul.products {
        gap: 25px !important;
    }

    /* Slightly larger sidebar text for bigger tablets */
    .sidebar .widget-title,
    .sidebar h4 {
        font-size: 17px !important;
    }

    .sidebar .widget li,
    .sidebar .widget li a {
        font-size: 14px !important;
    }

    .sidebar .widget {
        padding: 22px 18px !important;
    }

    /* ===========================
       PRODUCT SINGLE ENHANCEMENTS
       =========================== */

    body.single-product .woocommerce div.product {
        padding: 40px 35px !important;
        gap: 35px !important;
    }

    body.single-product .woocommerce-product-gallery .flex-viewport {
        max-width: 380px !important;
    }

    body.single-product .woocommerce-product-gallery__image.flex-active-slide {
        min-width: 350px !important;
    }

    .woocommerce-product-gallery__wrapper img.wp-post-image {
        max-width: 350px !important;
    }

    body.single-product .summary .product_title {
        font-size: 24px !important;
    }

    body.single-product .price {
        font-size: 30px !important;
    }

    body.single-product .woocommerce-tabs ul.tabs li a {
        font-size: 17px !important;
    }

    body.single-product .woocommerce-tabs p {
        font-size: 18px !important;
    }

    body.single-product .related.products li.product {
        flex: 0 0 270px !important;
        min-width: 270px !important;
    }

    body.single-product .woocommerce div.product .summary.entry-summary {
        margin-left: 20px !important;
    }
}