/* ============================================================
   Virtual Mart Mobile Product Detail Final
   Fixes product image appearing below price/info on mobile
   ============================================================ */

@media (max-width: 767px) {

    body.catalog-product-view .column.main {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Product image/gallery should come first */
    body.catalog-product-view .product.media,
    body.catalog-product-view .gallery-placeholder,
    body.catalog-product-view .fotorama,
    body.catalog-product-view .product-image-main {
        order: 1 !important;
    }

    /* Product info should come after image */
    body.catalog-product-view .product-info-main {
        order: 2 !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin: 0 0 12px 0 !important;
        padding: 12px 12px 14px 12px !important;
        background: #ffffff !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    body.catalog-product-view .product.media {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin: 0 0 12px 0 !important;
        padding: 12px !important;
        background: #ffffff !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    /* Main product title area */
    body.catalog-product-view .page-title-wrapper,
    body.catalog-product-view .product-info-main .page-title-wrapper {
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
    }

    body.catalog-product-view .page-title,
    body.catalog-product-view .product-info-main .page-title {
        font-size: 18px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        color: #111827 !important;
        margin: 8px 0 8px 0 !important;
    }

    /* Product image sizing */
    body.catalog-product-view .product.media img,
    body.catalog-product-view .fotorama__img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    body.catalog-product-view .fotorama__stage {
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* Details tabs after image/info */
    body.catalog-product-view .product.info.detailed {
        order: 3 !important;
        width: 100% !important;
        margin-top: 10px !important;
    }

    /* Related/cross-sell sections after details */
    body.catalog-product-view .block.related,
    body.catalog-product-view .block.upsell,
    body.catalog-product-view .block.crosssell,
    body.catalog-product-view .block.widget {
        order: 4 !important;
        width: 100% !important;
    }

    /* Make price/add-to-cart area cleaner */
    body.catalog-product-view .product-info-price {
        margin: 8px 0 10px 0 !important;
        padding: 0 !important;
    }

    body.catalog-product-view .box-tocart,
    body.catalog-product-view .product-add-form {
        margin-top: 10px !important;
    }

    body.catalog-product-view .actions button.action.tocart,
    body.catalog-product-view .box-tocart .action.tocart {
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        border-radius: 6px !important;
        background: #ed1c24 !important;
        border-color: #ed1c24 !important;
        color: #ffffff !important;
        font-weight: 900 !important;
    }
}

/* ============================================================
   End Virtual Mart Mobile Product Detail Final
   ============================================================ */


/* ============================================================
   Virtual Mart Mobile Product Detail Order Fix v2
   Keeps related/frequently-bought blocks below main product
   ============================================================ */

@media (max-width: 767px) {

    /*
      Important:
      Once .column.main is flex, any direct child without an order
      can jump above the product. So default all children lower.
    */
    body.catalog-product-view .column.main > * {
        order: 20 !important;
    }

    /* Product gallery/image first */
    body.catalog-product-view .column.main > .product.media,
    body.catalog-product-view .product.media {
        order: 1 !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin: 0 0 12px 0 !important;
        padding: 12px !important;
        background: #ffffff !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    /* Product information second */
    body.catalog-product-view .column.main > .product-info-main,
    body.catalog-product-view .product-info-main {
        order: 2 !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin: 0 0 12px 0 !important;
        padding: 12px 12px 14px 12px !important;
        background: #ffffff !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    /* Details tabs third */
    body.catalog-product-view .column.main > .product.info.detailed,
    body.catalog-product-view .product.info.detailed {
        order: 3 !important;
        width: 100% !important;
        margin-top: 10px !important;
    }

    /* Frequently bought / related / upsell / widgets must stay below product details */
    body.catalog-product-view .column.main > .block.related,
    body.catalog-product-view .column.main > .block.upsell,
    body.catalog-product-view .column.main > .block.crosssell,
    body.catalog-product-view .column.main > .block.widget,
    body.catalog-product-view .block.related,
    body.catalog-product-view .block.upsell,
    body.catalog-product-view .block.crosssell,
    body.catalog-product-view .block.widget,
    body.catalog-product-view [class*="related"],
    body.catalog-product-view [class*="upsell"],
    body.catalog-product-view [class*="crosssell"] {
        order: 10 !important;
        width: 100% !important;
        clear: both !important;
        margin-top: 14px !important;
    }

    /* Keep product image/gallery clean */
    body.catalog-product-view .product.media img,
    body.catalog-product-view .fotorama__img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    body.catalog-product-view .fotorama__stage,
    body.catalog-product-view .fotorama__wrap,
    body.catalog-product-view .gallery-placeholder {
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /*
      Related/frequently-bought slider card cleanup.
      Prevent cards from becoming too narrow or clipped.
    */
    body.catalog-product-view .block.related .products-grid,
    body.catalog-product-view .block.upsell .products-grid,
    body.catalog-product-view .block.crosssell .products-grid,
    body.catalog-product-view .block.widget .products-grid {
        width: 100% !important;
        overflow: hidden !important;
    }

    body.catalog-product-view .block.related .product-item,
    body.catalog-product-view .block.upsell .product-item,
    body.catalog-product-view .block.crosssell .product-item,
    body.catalog-product-view .block.widget .product-item {
        box-sizing: border-box !important;
        padding: 6px !important;
    }

    body.catalog-product-view .block.related .product-item-info,
    body.catalog-product-view .block.upsell .product-item-info,
    body.catalog-product-view .block.crosssell .product-item-info,
    body.catalog-product-view .block.widget .product-item-info {
        width: 100% !important;
        max-width: 180px !important;
        margin: 0 auto !important;
        padding: 10px !important;
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.catalog-product-view .block.related .product-item-photo,
    body.catalog-product-view .block.upsell .product-item-photo,
    body.catalog-product-view .block.crosssell .product-item-photo,
    body.catalog-product-view .block.widget .product-item-photo {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 8px !important;
    }

    body.catalog-product-view .block.related .product-image-photo,
    body.catalog-product-view .block.upsell .product-image-photo,
    body.catalog-product-view .block.crosssell .product-image-photo,
    body.catalog-product-view .block.widget .product-image-photo {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    body.catalog-product-view .block.related .product-item-name,
    body.catalog-product-view .block.upsell .product-item-name,
    body.catalog-product-view .block.crosssell .product-item-name,
    body.catalog-product-view .block.widget .product-item-name {
        font-size: 11px !important;
        line-height: 1.25 !important;
        min-height: 34px !important;
        max-height: 38px !important;
        overflow: hidden !important;
    }

    body.catalog-product-view .block.related .price,
    body.catalog-product-view .block.upsell .price,
    body.catalog-product-view .block.crosssell .price,
    body.catalog-product-view .block.widget .price {
        font-size: 11px !important;
        font-weight: 800 !important;
    }

    body.catalog-product-view .block.related .actions-primary .action.tocart,
    body.catalog-product-view .block.upsell .actions-primary .action.tocart,
    body.catalog-product-view .block.crosssell .actions-primary .action.tocart,
    body.catalog-product-view .block.widget .actions-primary .action.tocart {
        width: 100% !important;
        height: 32px !important;
        min-height: 32px !important;
        font-size: 11px !important;
        border-radius: 5px !important;
    }
}

/* ============================================================
   End Virtual Mart Mobile Product Detail Order Fix v2
   ============================================================ */


/* ============================================================
   Virtual Mart Mobile Product Detail Slider Card Fix v3
   Fixes clipped badges/cards in related and frequently-bought sliders
   ============================================================ */

@media (max-width: 767px) {

    /*
      Product-page sliders only.
      Do not affect category/search product cards.
    */
    body.catalog-product-view .block.related,
    body.catalog-product-view .block.upsell,
    body.catalog-product-view .block.crosssell,
    body.catalog-product-view .block.widget {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.catalog-product-view .block.related .products,
    body.catalog-product-view .block.upsell .products,
    body.catalog-product-view .block.crosssell .products,
    body.catalog-product-view .block.widget .products,
    body.catalog-product-view .block.related .products-grid,
    body.catalog-product-view .block.upsell .products-grid,
    body.catalog-product-view .block.crosssell .products-grid,
    body.catalog-product-view .block.widget .products-grid {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.catalog-product-view .block.related .product-item,
    body.catalog-product-view .block.upsell .product-item,
    body.catalog-product-view .block.crosssell .product-item,
    body.catalog-product-view .block.widget .product-item {
        width: 100% !important;
        max-width: 100% !important;
        padding: 6px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    body.catalog-product-view .block.related .product-item-info,
    body.catalog-product-view .block.upsell .product-item-info,
    body.catalog-product-view .block.crosssell .product-item-info,
    body.catalog-product-view .block.widget .product-item-info {
        width: 100% !important;
        max-width: 210px !important;
        min-height: 360px !important;
        height: auto !important;

        margin: 0 auto !important;
        padding: 10px 8px 12px 8px !important;

        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Product image area */
    body.catalog-product-view .block.related .product-item-photo,
    body.catalog-product-view .block.upsell .product-item-photo,
    body.catalog-product-view .block.crosssell .product-item-photo,
    body.catalog-product-view .block.widget .product-item-photo {
        display: block !important;
        width: 100% !important;
        min-height: 120px !important;
        height: 120px !important;
        text-align: center !important;
        margin: 0 0 8px 0 !important;
        overflow: hidden !important;
    }

    body.catalog-product-view .block.related .product-image-container,
    body.catalog-product-view .block.upsell .product-image-container,
    body.catalog-product-view .block.crosssell .product-image-container,
    body.catalog-product-view .block.widget .product-image-container,
    body.catalog-product-view .block.related .product-image-wrapper,
    body.catalog-product-view .block.upsell .product-image-wrapper,
    body.catalog-product-view .block.crosssell .product-image-wrapper,
    body.catalog-product-view .block.widget .product-image-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        height: 120px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.catalog-product-view .block.related .product-image-photo,
    body.catalog-product-view .block.upsell .product-image-photo,
    body.catalog-product-view .block.crosssell .product-image-photo,
    body.catalog-product-view .block.widget .product-image-photo {
        max-width: 100% !important;
        max-height: 115px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        position: static !important;
    }

    /*
      Fix badge clipping inside small slider cards.
      Make badge compact enough for two-column/mobile slider cards.
    */
    body.catalog-product-view .block.related .vm-delivery-badge,
    body.catalog-product-view .block.upsell .vm-delivery-badge,
    body.catalog-product-view .block.crosssell .vm-delivery-badge,
    body.catalog-product-view .block.widget .vm-delivery-badge {
        width: 100% !important;
        max-width: 100% !important;
        height: 24px !important;
        min-height: 24px !important;
        margin: 0 0 5px 0 !important;
        padding: 0 4px !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.catalog-product-view .block.related .vm-delivery-badge:before,
    body.catalog-product-view .block.upsell .vm-delivery-badge:before,
    body.catalog-product-view .block.crosssell .vm-delivery-badge:before,
    body.catalog-product-view .block.widget .vm-delivery-badge:before,
    body.catalog-product-view .block.related .vm-delivery-badge-text,
    body.catalog-product-view .block.related .vm-delivery-badge-text span,
    body.catalog-product-view .block.upsell .vm-delivery-badge-text,
    body.catalog-product-view .block.upsell .vm-delivery-badge-text span,
    body.catalog-product-view .block.crosssell .vm-delivery-badge-text,
    body.catalog-product-view .block.crosssell .vm-delivery-badge-text span,
    body.catalog-product-view .block.widget .vm-delivery-badge-text,
    body.catalog-product-view .block.widget .vm-delivery-badge-text span {
        font-size: 8.5px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
    }

    body.catalog-product-view .block.related .vm-delivery-date-line,
    body.catalog-product-view .block.upsell .vm-delivery-date-line,
    body.catalog-product-view .block.crosssell .vm-delivery-date-line,
    body.catalog-product-view .block.widget .vm-delivery-date-line {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 20px !important;
        margin: 0 0 5px 0 !important;
        padding: 2px 4px !important;
        font-size: 8.5px !important;
        line-height: 1.1 !important;
        border-radius: 5px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Product name and price visibility */
    body.catalog-product-view .block.related .product-item-name,
    body.catalog-product-view .block.upsell .product-item-name,
    body.catalog-product-view .block.crosssell .product-item-name,
    body.catalog-product-view .block.widget .product-item-name {
        display: block !important;
        min-height: 38px !important;
        max-height: 42px !important;
        margin: 6px 0 5px 0 !important;
        overflow: hidden !important;
        font-size: 10.5px !important;
        line-height: 1.25 !important;
        color: #111827 !important;
    }

    body.catalog-product-view .block.related .price-box,
    body.catalog-product-view .block.upsell .price-box,
    body.catalog-product-view .block.crosssell .price-box,
    body.catalog-product-view .block.widget .price-box {
        min-height: 34px !important;
        margin: 4px 0 !important;
        overflow: hidden !important;
    }

    body.catalog-product-view .block.related .price,
    body.catalog-product-view .block.upsell .price,
    body.catalog-product-view .block.crosssell .price,
    body.catalog-product-view .block.widget .price {
        font-size: 10.5px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
    }

    /* Quantity/add button area */
    body.catalog-product-view .block.related .product-item-actions,
    body.catalog-product-view .block.upsell .product-item-actions,
    body.catalog-product-view .block.crosssell .product-item-actions,
    body.catalog-product-view .block.widget .product-item-actions {
        margin-top: 6px !important;
        display: block !important;
        clear: both !important;
    }

    body.catalog-product-view .block.related .action.tocart,
    body.catalog-product-view .block.upsell .action.tocart,
    body.catalog-product-view .block.crosssell .action.tocart,
    body.catalog-product-view .block.widget .action.tocart {
        display: block !important;
        width: 100% !important;
        height: 32px !important;
        min-height: 32px !important;
        line-height: 32px !important;
        padding: 0 !important;
        font-size: 10.5px !important;
        font-weight: 900 !important;
        border-radius: 5px !important;
        background: #ed1c24 !important;
        border-color: #ed1c24 !important;
        color: #ffffff !important;
    }
}

/* ============================================================
   End Virtual Mart Mobile Product Detail Slider Card Fix v3
   ============================================================ */