/* ============================================================
   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
   ============================================================ */


/* ============================================================
   Virtual Mart Trive/Revo Slider Protection v5
   Prevent product-detail layout rules from breaking Trive/Revo sliders
   ============================================================ */

@media (max-width: 767px) {

    /*
      Do not let generic product-card flex rules reshape Trive/Revo slider cards.
      Trive/Revo/Slick needs its own width calculations.
    */
    body.catalog-product-view .block-product-slider.slider-list .product-item-info,
    body.catalog-product-view .block-product-slider.slider-list [class*="product-item-info"],
    body.catalog-product-view .product-slider-wrapper .product-item-info,
    body.catalog-product-view .product-slider-wrapper [class*="product-item-info"],
    body.catalog-product-view ol[class*="product-slider"] .product-item-info,
    body.catalog-product-view ol[class*="product-slider"] [class*="product-item-info"] {
        display: block !important;
        flex-direction: initial !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        width: auto !important;
        max-width: none !important;

        padding-bottom: 12px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /*
      Restore Slick slide behavior.
      Avoid forcing slider cards into narrow portrait mode.
    */
    body.catalog-product-view .block-product-slider.slider-list .slick-track,
    body.catalog-product-view .product-slider-wrapper .slick-track,
    body.catalog-product-view ol[class*="product-slider"].slick-slider .slick-track {
        display: block !important;
        align-items: initial !important;
    }

    body.catalog-product-view .block-product-slider.slider-list .slick-slide,
    body.catalog-product-view .product-slider-wrapper .slick-slide,
    body.catalog-product-view ol[class*="product-slider"].slick-slider .slick-slide {
        height: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /*
      Keep Trive/Revo block below the main product area,
      but do not target every class containing "related".
    */
    body.catalog-product-view .block-product-slider.slider-list,
    body.catalog-product-view .product-slider-wrapper {
        order: 10 !important;
        width: 100% !important;
        clear: both !important;
        margin-top: 14px !important;
        overflow: hidden !important;
    }

    /*
      Only Magento-native related blocks get ordering.
      Avoid [class*="related"] because Trive/Revo uses autorelated.
    */
    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 {
        order: 10 !important;
        width: 100% !important;
        clear: both !important;
        margin-top: 14px !important;
    }
}

/* ============================================================
   End Virtual Mart Trive/Revo Slider Protection v5
   ============================================================ */


/* ============================================================
   Virtual Mart Trive/Revo Badge Clip Fix v6
   Product detail mobile only.
   Fixes clipped delivery badge inside Products Often Bought Together.
   ============================================================ */

@media (max-width: 767px) {

    /*
      The slide itself must not clip the card contents.
      Slick-list can still control the carousel viewport.
    */
    body.catalog-product-view .block-product-slider.slider-list .slick-slide,
    body.catalog-product-view .product-slider-wrapper .slick-slide,
    body.catalog-product-view ol[class*="product-slider"].slick-slider .slick-slide {
        overflow: visible !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
    }

    /*
      Do not let the product card clip the badge.
    */
    body.catalog-product-view .block-product-slider.slider-list .product-item-info,
    body.catalog-product-view .block-product-slider.slider-list [class*="product-item-info"],
    body.catalog-product-view .product-slider-wrapper .product-item-info,
    body.catalog-product-view .product-slider-wrapper [class*="product-item-info"],
    body.catalog-product-view ol[class*="product-slider"] .product-item-info,
    body.catalog-product-view ol[class*="product-slider"] [class*="product-item-info"] {
        overflow: visible !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }

    /*
      Make the badge fit inside the Trive/Revo product card.
    */
    body.catalog-product-view .block-product-slider.slider-list .vm-delivery-badge,
    body.catalog-product-view .product-slider-wrapper .vm-delivery-badge,
    body.catalog-product-view ol[class*="product-slider"] .vm-delivery-badge {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        max-width: 230px !important;
        min-width: 0 !important;

        height: 32px !important;
        min-height: 32px !important;

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

        overflow: hidden !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }

    body.catalog-product-view .block-product-slider.slider-list .vm-delivery-badge-text,
    body.catalog-product-view .block-product-slider.slider-list .vm-delivery-badge-text span,
    body.catalog-product-view .product-slider-wrapper .vm-delivery-badge-text,
    body.catalog-product-view .product-slider-wrapper .vm-delivery-badge-text span,
    body.catalog-product-view ol[class*="product-slider"] .vm-delivery-badge-text,
    body.catalog-product-view ol[class*="product-slider"] .vm-delivery-badge-text span {
        display: block !important;
        max-width: 100% !important;

        color: inherit !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 1 !important;

        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
    }

    /*
      Hide icon only inside tiny Trive/Revo product-page slider cards
      to give the words more room.
    */
    body.catalog-product-view .block-product-slider.slider-list .vm-delivery-badge-icon,
    body.catalog-product-view .product-slider-wrapper .vm-delivery-badge-icon,
    body.catalog-product-view ol[class*="product-slider"] .vm-delivery-badge-icon {
        display: none !important;
    }

    body.catalog-product-view .block-product-slider.slider-list .vm-delivery-date-line,
    body.catalog-product-view .product-slider-wrapper .vm-delivery-date-line,
    body.catalog-product-view ol[class*="product-slider"] .vm-delivery-date-line {
        width: auto !important;
        max-width: 230px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-align: center !important;
    }
}

/* ============================================================
   End Virtual Mart Trive/Revo Badge Clip Fix v6
   ============================================================ */