/**
 * 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;
}

/* Uniform 2:3 book-cover tiles at every breakpoint.
   The wrapper is a fixed-ratio box (padding-bottom trick, ratio comes from
   view.xml via image_with_borders.phtml). The image is absolutely centred and
   contained inside it, so covers of any pixel size produce identical tiles
   instead of pushing their slide taller than its neighbours. */
.block-filterproducts .product-image-wrapper {
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    overflow: hidden !important;
}

.block-filterproducts .product-image-photo {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* The filterproducts list is an Owl carousel, not a grid.
   The mobile (<=767px) and tablet (768-991px) rules above set display:flex on
   .products.list.items.product-items.filterproducts -- which IS the carousel root.
   As a flex container it stops stretching .owl-stage-outer, so the stage-outer
   sizes to the full stage width (2200px inside a 375px viewport) and centres,
   pushing slides off-screen to the left and clipping the visible one.
   Keep the carousel root a block and let Owl own its own layout. */
.block-filterproducts .owl-carousel {
    display: block !important;
}

.block-filterproducts .owl-carousel .owl-stage-outer {
    width: 100% !important;
}

/* ============================================
   SELLER / MARKETPLACE FORM LABEL ALIGNMENT
   ============================================
   Magento's blank theme lays forms out in two columns (styles-l.css, >=768px):

     .fieldset > .field:not(.choice) > .label   { float:left; width:25.8%;
                                                  text-align:right;
                                                  padding:6px 15px 0 0; }
     .fieldset > .field:not(.choice) > .control { float:left; width:74.2%; }

   Webkul's dashboard is designed stacked (label above input), so its style.css
   un-floats the LABEL -- but never un-floats the CONTROL, and never resets the
   right-alignment or that 15px right padding. The halves disagree, three ways:

     - Add Product: the control still floats left, the un-floated label flows
       after it and lands on the RIGHT of the input.
     - Modals (Ask Question to Admin): Webkul's override does not reach inside
       the modal at all, so the label keeps a right-aligned 25.8% box.
     - Seller login: narrow form, so the 25.8% label and 74.2% control cannot
       sit side by side; the control wraps under and the label text hugs the
       right edge of its own narrow box, reading as stray padding.

   Complete the stacked layout that Webkul intended.

   Two scopes, deliberately not a global reset:

   1. body[class*="marketplace-"] - every seller page (login, dashboard, add
      product) and any modal opened from one.
   2. Modal containers - ANY popup form site-wide, including on pages with no
      marketplace body class. The storefront customer-login modal on the
      homepage has the same right-aligned label with the same 15px padding, and
      scope 1 alone does not reach it. A modal is narrow by nature and Magento's
      own modals stack, so the two-column layout is never wanted inside one.

   Storefront checkout and customer-account *pages* keep the two-column layout,
   which they use deliberately -- neither scope touches them. */

body[class*="marketplace-"] .fieldset > .field:not(.choice) > .label,
.modal-inner-wrap .fieldset > .field:not(.choice) > .label,
.modal-popup .fieldset > .field:not(.choice) > .label,
.modal-slide .fieldset > .field:not(.choice) > .label {
    float: none;
    width: 100% !important;
    text-align: left;
    padding-right: 0;
}

body[class*="marketplace-"] .fieldset > .field:not(.choice) > .control,
.modal-inner-wrap .fieldset > .field:not(.choice) > .control,
.modal-popup .fieldset > .field:not(.choice) > .control,
.modal-slide .fieldset > .field:not(.choice) > .control {
    float: none;
    width: 100%;
}