/**
 * Custom Mobile/Tablet Product Layout Fixes
 * Fixes left-aligned products on small screens
 */

/* Mobile and Tablet - Make products centered and full-width */
@media only screen and (max-width: 767px) {
    .block-filterproducts .products.list.items.product-items.filterproducts {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .block-filterproducts .item.product.product-item {
        width: 100% !important;
        max-width: 100%;
        margin: 0 auto 20px;
        text-align: center;
    }

    .block-filterproducts .product-item-info {
        width: 100% !important;
        margin: 0 auto;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Fix product image sizing: avoid flex shrink-to-zero on mobile */
    .block-filterproducts .image-product {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center;
        margin: 0 auto 15px;
        display: block !important;
    }

    .block-filterproducts .image-product > a.product-item-photo {
        display: block !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 300px !important;
        flex: 0 0 auto !important;
    }

    /* Override inline width styles on product image containers */
    .block-filterproducts .image-product > a.product-item-photo .product-image-container,
    .block-filterproducts .product-image-container,
    .block-filterproducts span.product-image-container,
    .block-filterproducts [class*="product-image-container-"] {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .block-filterproducts .product-image-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    .block-filterproducts .product-image-photo {
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto;
        display: block;
    }

    .block-filterproducts .product.details.product-item-details {
        width: 100%;
        text-align: center;
    }

    .block-filterproducts .product-item-details .author {
        text-align: center;
    }

    .block-filterproducts .product-item-details .product.name {
        text-align: center;
    }

    /* Fix price alignment */
    .block-filterproducts .product-item-details .price-box,
    .block-filterproducts .product-item-details .price-final_price,
    .block-filterproducts .product-item-details .price-container {
        text-align: center;
        display: block;
        width: 100%;
        margin: 0 auto;
    }

    .block-filterproducts .product-item-details .product-reviews-summary {
        text-align: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .block-filterproducts .product-item-actions {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .block-filterproducts .actions-primary {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    .block-filterproducts .actions-primary button {
        width: 100%;
        max-width: 300px;
    }

    .block-filterproducts .actions-secondary {
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        gap: 15px;
        flex-wrap: wrap;
    }

    .block-filterproducts .action.quickview-handler {
        width: 100%;
        text-align: center;
        display: block;
        margin-top: 10px;
    }
}

/* Tablet - 2 columns layout */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .block-filterproducts .products.list.items.product-items.filterproducts {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .block-filterproducts .item.product.product-item {
        width: calc(50% - 10px) !important;
        max-width: calc(50% - 10px);
        margin: 0 0 20px;
        text-align: center;
    }

    .block-filterproducts .product-item-info {
        width: 100% !important;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Fix product image sizing: avoid flex shrink-to-zero on tablet */
    .block-filterproducts .image-product {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center;
        margin: 0 auto 15px;
        display: block !important;
    }

    .block-filterproducts .image-product > a.product-item-photo {
        display: block !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 250px !important;
        flex: 0 0 auto !important;
    }

    /* Override inline width styles on product image containers */
    .block-filterproducts .image-product > a.product-item-photo .product-image-container,
    .block-filterproducts .product-image-container,
    .block-filterproducts span.product-image-container,
    .block-filterproducts [class*="product-image-container-"] {
        width: 100% !important;
        max-width: 250px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .block-filterproducts .product-image-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    .block-filterproducts .product-image-photo {
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto;
        display: block;
    }

    .block-filterproducts .product.details.product-item-details {
        width: 100%;
        text-align: center;
    }

    /* Fix price alignment on tablet */
    .block-filterproducts .product-item-details .price-box,
    .block-filterproducts .product-item-details .price-final_price,
    .block-filterproducts .product-item-details .price-container {
        text-align: center;
        display: block;
        width: 100%;
        margin: 0 auto;
    }
}

/* ============================================
   DEMO 1 (header-style-1) Megamenu Z-Index Fix
   Prevents megamenu from appearing over modals/popups
   Modal z-index is 1050, backdrop is 1040
   ============================================ */

/* Fix megamenu dropdown z-index for Demo 1 only */
.header-style-1 .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu .sm_megamenu_dropdown_1column,
.header-style-1 .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu .sm_megamenu_dropdown_2columns,
.header-style-1 .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu .sm_megamenu_dropdown_3columns,
.header-style-1 .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu .sm_megamenu_dropdown_4columns,
.header-style-1 .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu .sm_megamenu_dropdown_5columns,
.header-style-1 .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu .sm_megamenu_dropdown_6columns,
.header-style-1 .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu .sm_megamenu_dropdown_fullwidth {
    z-index: 999 !important;
}

/* Fix vertical megamenu dropdown z-index for Demo 1 */
.header-style-1 .sm_megamenu_wrapper_vertical_menu .sm_megamenu_menu .sm_megamenu_dropdown_1column,
.header-style-1 .sm_megamenu_wrapper_vertical_menu .sm_megamenu_menu .sm_megamenu_dropdown_2columns,
.header-style-1 .sm_megamenu_wrapper_vertical_menu .sm_megamenu_menu .sm_megamenu_dropdown_3columns,
.header-style-1 .sm_megamenu_wrapper_vertical_menu .sm_megamenu_menu .sm_megamenu_dropdown_4columns,
.header-style-1 .sm_megamenu_wrapper_vertical_menu .sm_megamenu_menu .sm_megamenu_dropdown_5columns,
.header-style-1 .sm_megamenu_wrapper_vertical_menu .sm_megamenu_menu .sm_megamenu_dropdown_6columns,
.header-style-1 .sm_megamenu_wrapper_vertical_menu .sm_megamenu_menu .sm_megamenu_dropdown_fullwidth {
    z-index: 999 !important;
}

/* Fix megamenu wrapper z-index for Demo 1 */
.header-style-1 .sm_megamenu_wrapper_horizontal_menu,
.header-style-1 .sm_megamenu_wrapper_vertical_menu {
    z-index: 998 !important;
}

/* Ensure the entire megamenu container doesn't exceed modal z-index */
.header-style-1 .vertical-menu-block,
.header-style-1 .desktop-menu {
    z-index: 997 !important;
}

/* Make sure header stays below modals */
.header-style-1 .header-bottom {
    z-index: 996 !important;
    position: relative;
}

/* ============================================
   CHECKOUT PAGE MOBILE RESPONSIVENESS FIX
   Ensures Order Summary, Ship To, and Shipping Method
   are visible on all screen sizes
   
   IMPORTANT: On mobile, Magento converts the sidebar
   into a modal (.modal-custom.opc-sidebar). We need
   to override both the modal and sidebar styles.
   ============================================ */

/* Mobile checkout - Show sidebar/order summary */
@media only screen and (max-width: 767px) {

    /* Main checkout layout for mobile - stack vertically */
    .checkout-index-index .checkout-container {
        display: flex !important;
        flex-direction: column !important;
    }

    /* CRITICAL: Override the modal wrapper that contains the sidebar on mobile */
    .checkout-index-index aside.modal-custom.opc-sidebar.opc-summary-wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 20px 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        z-index: 1 !important;
        overflow: visible !important;
    }

    /* Hide the modal close button on mobile */
    .checkout-index-index aside.modal-custom.opc-sidebar .action-close {
        display: none !important;
    }

    /* Override modal-inner-wrap to display inline */
    .checkout-index-index aside.modal-custom.opc-sidebar .modal-inner-wrap {
        display: block !important;
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Hide modal header */
    .checkout-index-index aside.modal-custom.opc-sidebar .modal-header {
        display: none !important;
    }

    /* Make modal content visible and inline */
    .checkout-index-index aside.modal-custom.opc-sidebar .modal-content {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    /* Ensure the opc-sidebar div inside modal is visible */
    .checkout-index-index aside.modal-custom.opc-sidebar #opc-sidebar,
    .checkout-index-index .opc-sidebar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 15px !important;
        background: #f5f5f5 !important;
        border-radius: 4px !important;
    }

    /* Order Summary Block */
    .checkout-index-index .opc-block-summary {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 15px !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        margin-bottom: 15px !important;
    }

    .checkout-index-index .opc-block-summary>.title {
        display: block !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        margin-bottom: 15px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #ddd !important;
    }

    /* Items in cart section */
    .checkout-index-index .opc-block-summary .items-in-cart {
        display: block !important;
        visibility: visible !important;
    }

    .checkout-index-index .opc-block-summary .items-in-cart>.title {
        display: block !important;
        cursor: pointer;
        padding: 10px 0;
    }

    .checkout-index-index .opc-block-summary .items-in-cart .content,
    .checkout-index-index .opc-block-summary .items-in-cart.active .content {
        display: block !important;
    }

    /* Minicart items wrapper */
    .checkout-index-index .opc-block-summary .minicart-items-wrapper {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Totals table */
    .checkout-index-index .opc-block-summary .table-totals {
        display: table !important;
        width: 100% !important;
    }

    .checkout-index-index .opc-block-summary .table-totals tr {
        display: table-row !important;
    }

    .checkout-index-index .opc-block-summary .table-totals th,
    .checkout-index-index .opc-block-summary .table-totals td {
        display: table-cell !important;
        padding: 8px 0 !important;
    }

    /* Shipping Information Block (Ship To & Shipping Method) */
    .checkout-index-index .opc-block-shipping-information {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 15px !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        margin-bottom: 15px !important;
    }

    .checkout-index-index .opc-block-shipping-information .shipping-information {
        display: block !important;
    }

    .checkout-index-index .opc-block-shipping-information .ship-to,
    .checkout-index-index .opc-block-shipping-information .ship-via {
        display: block !important;
        margin-bottom: 15px !important;
    }

    .checkout-index-index .opc-block-shipping-information .shipping-information-title {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        margin-bottom: 10px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #ddd !important;
    }

    .checkout-index-index .opc-block-shipping-information .shipping-information-content {
        display: block !important;
        visibility: visible !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    /* Edit buttons in shipping info */
    .checkout-index-index .opc-block-shipping-information .action-edit {
        display: inline-block !important;
        font-size: 12px !important;
    }

    /* Payment step layout */
    .checkout-index-index .checkout-payment-method {
        width: 100% !important;
    }

    /* Make sure opc-wrapper takes full width */
    .checkout-index-index .opc-wrapper {
        width: 100% !important;
        padding: 0 15px !important;
        float: none !important;
    }

    /* Discount code section */
    .checkout-index-index .opc-block-summary .discount {
        display: block !important;
    }

    /* Hide the estimated wrapper button that opens modal on mobile - 
       since we're showing sidebar inline, no need for this */
    .checkout-index-index .opc-estimated-wrapper {
        display: none !important;
    }

    /* Ensure content doesn't have overflow issues */
    .checkout-index-index .page-main,
    .checkout-index-index .columns,
    .checkout-index-index .column.main {
        overflow: visible !important;
    }
}

/* Tablet checkout fixes */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .checkout-index-index aside.modal-custom.opc-sidebar.opc-summary-wrapper {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        transform: none !important;
        width: 100% !important;
        margin-top: 20px !important;
    }

    .checkout-index-index aside.modal-custom.opc-sidebar .modal-inner-wrap {
        display: block !important;
        position: static !important;
        transform: none !important;
        width: 100% !important;
    }

    .checkout-index-index .opc-sidebar {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
    }

    .checkout-index-index .opc-block-summary,
    .checkout-index-index .opc-block-shipping-information {
        display: block !important;
        visibility: visible !important;
    }
}

/* Small mobile devices */
@media only screen and (max-width: 480px) {

    .checkout-index-index aside.modal-custom.opc-sidebar #opc-sidebar,
    .checkout-index-index .opc-sidebar {
        padding: 10px !important;
    }

    .checkout-index-index .opc-block-summary,
    .checkout-index-index .opc-block-shipping-information {
        padding: 10px !important;
    }

    .checkout-index-index .opc-block-summary .minicart-items .product-item-details {
        margin-left: 80px !important;
    }

    .checkout-index-index .opc-block-summary .minicart-items .product-image-container {
        width: 70px !important;
        height: auto !important;
    }
}
/* Fix for product list images collapsing in height */
.block-filterproducts .image-product,
.block-filterproducts .product-item-info,
.block-filterproducts .product-item-photo,
.block-filterproducts .product-image-container,
.block-filterproducts .product-image-wrapper {
    display: block !important;
}

.block-filterproducts .product-item-photo {
    height: auto !important;
}

.block-filterproducts .product-image-container,
.block-filterproducts .product-image-wrapper {
    position: relative !important;
}

.block-filterproducts .product-image-photo {
    position: relative !important;
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
}