/* Responsive CSS - Extracted from style.css */

/* 1. UTILITIES */
@media (max-width: 768px) { .cols-md-1 { --cols: 1; } .cols-md-2 { --cols: 2; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .no-print { display: none !important; }
  body { background: white; color: black; }
  .site-wrapper { display: block; padding: 0; }
}

/* 1.5 HEADER MOBILE */
@media (max-width: 600px) {
    .pb-site-header {
        padding: 20px var(--s-4) !important;
    }
}

/* 2. FOOTER */
@media (max-width: 1024px) {
    .pb-footer-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-newsletter { grid-column: span 2; }
}

@media (max-width: 600px) {
    .pb-footer-grid { grid-template-columns: 1fr; }
    .footer-newsletter { grid-column: span 1; }
}

/* 3. HOME CATEGORIES */
@media (max-width: 768px) {
    .site-main {
        padding-inline: var(--s-4);
    }
    
    .pb-category-inner {
        flex-direction: column;
        min-height: auto !important;
        height: auto !important;
    }

    .pb-category-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .pb-cat-bg-video {
        position: relative;
        height: auto;
        min-height: 250px;
        order: -1; /* Move video to top */
        aspect-ratio: 16/9;
    }

    .pb-video-placeholder,
    .pb-cat-bg-video video, 
    .pb-cat-bg-video iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .pb-cat-media {
        aspect-ratio: 16/9; /* Video aspect for mobile */
        order: -1; 
    }
    .pb-cat-text {
        padding: var(--s-6) 0; /* Remove side padding as container has it, add vertical space */
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
    }
}

/* 4. RELATED PRODUCTS */
@media (max-width: 1024px) { /* Tablet */
    section.related.products ul.products li.product, 
    section.up-sells.products ul.products li.product {
        flex: 0 0 50%; /* 2 columns */
        width: 50%;
    }
}

@media (max-width: 600px) { /* Mobile */
  .woocommerce ul.products {
    gap: var(--s-5);
  }

  section.related.products ul.products li.product, 
  section.up-sells.products ul.products li.product {
      flex: 0 0 100%; /* 1 column */
      width: 100%;
  }

  .woocommerce ul.products:not(.related):not(.up-sells) {
    grid-template-columns: 1fr; /* Maintain grid for shop loop */
  }
  
  .pb-product-cta-overlay {
    bottom: 0; /* Sempre visibile su mobile */
  }
}

/* 5. SINGLE PRODUCT */
@media (max-width: 768px) {
    .pb-single-product-grid {
        flex-direction: column;
    }
    
    .pb-product-images-stack,
    .woocommerce div.product div.summary {
        width: 100% !important;
        flex: 1 1 100%;
        position: static;
        min-width: 250px;
    }
}

/* 6. CART PAGE */
@media (min-width: 768px) {
    .pb-cart-layout {
        display: grid;
        grid-template-columns: 2fr 1fr; /* 2 Columns for Cart */
        gap: var(--s-8);
        max-width: 1200px;
        margin: 80px auto 120px;
    }
}

@media (max-width: 600px) {
    /* Hide Table Headers */
    .woocommerce-cart .shop_table thead {
        display: none !important;
    }
    
    /* Grid Layout for Cart Item */
    .pb-cart-products .shop_table tr.cart_item {
        display: grid;
        grid-template-columns: 30px 90px 1fr; /* Remove | Image | Content */
        grid-template-rows: auto auto; /* Name | Quantity */
        grid-template-areas: 
            "remove image name"
            "remove image quantity";
        gap: var(--s-2) var(--s-3);
        padding: var(--s-4) 0;
        border-bottom: 1px solid #ebebeb;
        align-items: center; /* Center vertical alignment for image/remove */
        position: relative;
    }
    
    /* 1. Remove Icon (X) */
    .product-remove {
        grid-area: remove;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .product-remove a.remove {
        font-size: 18px;
        color: #000;
        font-weight: 300;
        display: block;
        line-height: 1;
        width: 24px;
        height: 24px;
        border: 1px solid transparent; /* Optional hit area */
        text-align: center;
    }

    /* 2. thumbnail */
    .product-thumbnail {
        grid-area: image;
        display: block !important;
        width: 100%;
        height: 100%;
        display: flex !important;
        align-items: center;
    }
    .product-thumbnail img {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
        object-fit: cover;
        display: block;
    }

    /* 3. Name (Title & Variation) */
    .product-name {
        grid-area: name;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-right: 70px; /* Space for price */
        align-self: start; /* Align to top of its row */
        margin-top: 4px; /* Slight offset align with image top */
    }

    .pb-cart-product-title {
        font-family: var(--font-condensed);
        font-weight: 700;
        font-size: 14px;
        text-transform: uppercase;
        color: #000;
        letter-spacing: 0.05em;
        margin-bottom: 2px;
        display: block;
        line-height: 1.2;
    }
    .attr_product {
        font-size: 12px;
        color: #666;
        font-weight: 300;
        display: block;
        line-height: 1.2;
    }

    /* 4. Price - Absolute Top Right */
    .product-price {
        position: absolute;
        top: var(--s-4); /* Match top padding */
        right: 0;
        font-family: var(--font-condensed);
        font-size: 14px;
        font-weight: 300;
        color: #000;
        text-align: right;
    }
    .product-price .amount {
        font-weight: 300;
    }

    /* Hide Subtotal */
    .product-subtotal {
        display: none !important; 
    }

    /* 5. Quantity - Bottom Row */
    .product-quantity {
        grid-area: quantity;
        padding-top: 5px;
        align-self: end; /* Align to bottom if space permits */
    }
    
    .woocommerce ul#shipping_method {
    clear: both;
    }
}

/* GLOBAL QUANTITY STYLES (Apply to Mobile & Desktop) */
.quantity {
    display: inline-flex;
    align-items: center;
    gap: 15px; /* Space between - 1 + */
    border: none;
    margin: 0;
}

.quantity-btn {
    background: transparent;
    border: none;
    font-size: 18px;
    color: #000;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-weight: 300;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quantity-btn:hover {
    opacity: 0.7;
}

.quantity input.qty {
    border: none;
    background: transparent;
    width: 30px;
    text-align: center;
    padding: 0;
    font-size: 16px;
    font-weight: 300;
    appearance: none;
    -moz-appearance: textfield;
    height: auto;
    min-height: unset;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* DESKTOP FIXES (Clean up) */
@media (min-width: 601px) {
    /* Ensure no conflict with desktop grid if any */
}

/* 7. CHECKOUT LAYOUT (Extracted) */
@media (min-width: 768px) {


   .pb-checkout-layout {
        display: grid;
        grid-template-columns: 55% 42%;
        justify-content: space-between;
        gap: 3%;
        max-width: 1200px;
        margin: 80px auto 120px;
    }

    /* Left Column: Customer Details */
    .woocommerce-checkout #customer_details {
        width: 100%;
        float: none;
    }
    .woocommerce-checkout .col-1, 
    .woocommerce-checkout .col-2 {
        float: none;
        width: 100%;
        max-width: 100%;
    }

    /* Right Column: Order Review */
    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #order_review {
        width: 100%;
        float: none;
        grid-column: 2;
    }
    
    .woocommerce-checkout #order_review_heading {
        margin-top: 0;
        font-family: var(--font-condensed);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* Sticky & Styled Order Review */
    .woocommerce-checkout #order_review {
        background: #fff;
        position: sticky;
        top: 120px; /* Space for sticky header */
    }

}

/* 8. META AGROS BLOCK (Extracted) */
@media (max-width: 768px) {
    .pb-meta-agros-grid {
        grid-template-columns: 1fr;
    }
    .pb-meta-agros-title {
        font-size: 32px;
    }
    .woocommerce table.shop_table_responsive tr td::before, .woocommerce-page table.shop_table_responsive tr td::before {
        content: none;
    }
    .woocommerce-cart-form * {
        background-color: transparent!important;
    }
    .cart_totals table.shop_table th, .cart_totals table.shop_table td {
    font-size: 16px;
}
}

/* Fluid Menu Gap (1400px - 1800px) */
@media (max-width: 1800px) {
    .pb-nav-menu {
        gap: clamp(0.8rem, 8.8vw - 6.9rem, 3rem) !important;
    }
}

/* 9. MOBILE MENU (<1400px) */
/* Default Desktop State */
#zambros-mobile-menu-trigger { display: none; }
#mobile-menu-overlay { display: none; }
@media (max-width: 1440px) {
 .header-actions {gap: 14px;}
}
@media (max-width: 1400px) {
    /* Hide Main Nav */
    nav#site-navigation { display: none !important; }

    /* LAYOUT FIX: Reorder items to put Logo Left and Hamburger Right */
    /* Unlock the site-branding container so children participate in the main grid/flex */
    .pb-header-grid .site-branding {
        display: contents;
    }

    .pb-header-grid {
        display: flex !important; /* Switch to flex for easier ordering */
        align-items: center;
        justify-content: flex-end; /* Default alignment */
    }

    /* 1. Logo (Left, pushes others to right) */
    .pb-header-grid .site-branding > a {
        order: 1;
        margin-right: auto; /* Occupy left space */
    }

    /* 2. Actions (Middle/Right) */
    .pb-header-right-side {
        order: 2;
    }

    /* 3. Hamburger Trigger (Far Right) */
    #zambros-mobile-menu-trigger { 
        display: flex !important; 
        order: 3;
        margin-right: 0 !important; /* Override inline style */
        margin-left: 20px;
        color: #000;
    }

    /* Mobile Menu Overlay Styles */
    #mobile-menu-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 10000;
        pointer-events: none; /* Pass through clicks when closed */
        transition: background-color 0.3s ease;
    }

    /* Drawer Container */
    .pb-mobile-menu-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 320px;
        max-width: 85vw;
        height: 100%;
        background-color: #000;
        color: #fff;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1); /* Slide Left Effect */
        pointer-events: auto; /* Catch clicks */
        box-shadow: 5px 0 15px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        padding-top: 0; /* Updated: Handle padding in header elements for better control */
    }

    /* Active State for Body Class */
    body.mobile-menu-open {
        overflow: hidden; /* Prevent scrolling when menu is open */
    }

    body.mobile-menu-open #mobile-menu-overlay {
        pointer-events: auto; /* Block clicks to page */
        background-color: rgba(0,0,0,0.5); /* Dim background */
    }
    
    body.mobile-menu-open .pb-mobile-menu-container {
        transform: translateX(0);
    }
    
    .pb-mobile-head {
        padding: 40px 20px 20px; /* More top padding for breathing room */
        display: flex;
        flex-direction: row; 
        justify-content: space-between;
        align-items: flex-start; /* Align top */
    }
    
    /* Logo sizing - controlled via CSS now */
    .pb-mobile-logo-img {
        max-width: 180px; /* Big enough to be legible */
        height: auto;
        display: block;
    }

    /* Menu Styling */
    .pb-mobile-body {
        padding: 0 20px;
        overflow-y: auto; /* Ensure scrolling */
        flex: 1;
    }

    .pb-mobile-nav-list {
        margin: 0;
        padding: 0;
        margin-top: 20px;
    }
    .pb-mobile-nav-list li {
        margin-bottom: 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        list-style: none;
    }
    .pb-mobile-nav-list li a {
        display: block;
        padding: 2px 0;
        color: #fff;
        font-size: 16px;
        text-transform: uppercase;
        font-family: var(--font-condensed);
        font-weight: 700;
        text-decoration: none;
        letter-spacing: 0.05em;
    }
    
    .mobile-action-link {
        font-size: 16px;
        opacity: 0.8;
        transition: opacity 0.2s;
    }
    .mobile-action-link:hover { opacity: 1; }
}

/* 10. HEADER ICONS - Responsive Hiding */
@media (max-width: 550px) {
    .header-wishlist,
    .header-account {
        display: none !important;
    }
}