/* ============================================================
   Virtual Mart Independent Mobile Related Grid
   Mobile-only replacement for product-page related/cross-sell sliders
   ============================================================ */

.vm-mobile-related-grid-block {
    display: none;
}

@media (max-width: 767px) {
    body.catalog-product-view .product-slider-wrapper,
    body.catalog-product-view .block-product-slider.slider-list {
        display: none !important;
    }

    body.catalog-product-view .block.related,
    body.catalog-product-view .block.upsell,
    body.catalog-product-view .block.crosssell {
        display: none !important;
    }

    body.catalog-product-view .vm-mobile-related-grid-block {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        clear: both !important;
        margin: 18px 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    .vm-mobile-related-grid-heading {
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
    }

    .vm-mobile-related-grid-heading h2 {
        margin: 0 !important;
        color: #062b55 !important;
        font-size: 19px !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
    }

    .vm-mobile-related-grid-heading p {
        margin: 4px 0 0 0 !important;
        color: #6b7280 !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .vm-mobile-related-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .vm-mobile-related-card {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 9px !important;
        background: #ffffff !important;
        border: 1px solid #e4e9f0 !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .vm-mobile-related-image {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 120px !important;
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        background: #f8fafc !important;
        border-radius: 9px !important;
        text-decoration: none !important;
        overflow: hidden !important;
    }

    .vm-mobile-related-image img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 116px !important;
        object-fit: contain !important;
    }

    .vm-mobile-related-badge {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 26px !important;
        min-height: 26px !important;
        margin: 0 0 6px 0 !important;
        padding: 0 4px !important;
        border-radius: 7px !important;
        font-size: 9px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        text-align: center !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .vm-mobile-related-badge-available-today {
        background: #e7f8ee !important;
        color: #137a38 !important;
        border: 1px solid #a8e8bf !important;
    }

    .vm-mobile-related-badge-special-order {
        background: #fff1df !important;
        color: #b95d00 !important;
        border: 1px solid #ffd3a3 !important;
    }

    .vm-mobile-related-badge-out-of-stock {
        background: #ffe8e8 !important;
        color: #b91c1c !important;
        border: 1px solid #ffc4c4 !important;
    }

    .vm-mobile-related-date {
        width: 100% !important;
        margin: -2px 0 6px 0 !important;
        padding: 3px 4px !important;
        background: #fff7ed !important;
        color: #9a3412 !important;
        border: 1px solid #fed7aa !important;
        border-radius: 6px !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .vm-mobile-related-name {
        display: block !important;
        min-height: 42px !important;
        max-height: 42px !important;
        margin: 0 0 6px 0 !important;
        color: #111827 !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        text-decoration: none !important;
        overflow: hidden !important;
    }

    .vm-mobile-related-price {
        min-height: 28px !important;
        margin: auto 0 8px 0 !important;
        color: #062b55 !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
    }

    .vm-mobile-related-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 34px !important;
        min-height: 34px !important;
        background: #ed1c24 !important;
        border: 1px solid #ed1c24 !important;
        border-radius: 7px !important;
        color: #ffffff !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
    }
}

/* ============================================================
   End Virtual Mart Independent Mobile Related Grid
   ============================================================ */


/* ============================================================
   Virtual Mart Mobile Product Page Compact + Hide Old Sliders v2
   Keeps independent You May Also Like grid only on mobile.
   ============================================================ */

@media (max-width: 767px) {

    /*
      Hide old product-page sliders/related blocks on mobile only.
      This keeps desktop Trive/Revo sliders unchanged.
    */
    body.catalog-product-view .block.block-product-slider,
    body.catalog-product-view .block-product-slider,
    body.catalog-product-view .slider-list,
    body.catalog-product-view .block-product-slider.slider-list,
    body.catalog-product-view .product-slider-wrapper,
    body.catalog-product-view .block.autorelated,
    body.catalog-product-view .autorelated,
    body.catalog-product-view ol.products[class*="product-slider"],
    body.catalog-product-view .block.related,
    body.catalog-product-view .block.upsell,
    body.catalog-product-view .block.crosssell,
    body.catalog-product-view .related,
    body.catalog-product-view .crosssell,
    body.catalog-product-view .upsell {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        max-height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /*
      But keep our independent mobile grid visible.
    */
    body.catalog-product-view .vm-mobile-related-grid-block,
    body.catalog-product-view .vm-mobile-related-grid-block * {
        visibility: visible !important;
    }

    body.catalog-product-view .vm-mobile-related-grid-block {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        margin: 12px 0 14px 0 !important;
        padding: 0 8px !important;
    }

    /*
      Compact main product page spacing.
    */
    body.catalog-product-view .column.main {
        padding-top: 6px !important;
    }

    body.catalog-product-view .product.media {
        margin-bottom: 8px !important;
        padding: 8px !important;
        border-radius: 10px !important;
    }

    body.catalog-product-view .gallery-placeholder,
    body.catalog-product-view .fotorama__stage,
    body.catalog-product-view .fotorama__wrap {
        margin-bottom: 4px !important;
    }

    body.catalog-product-view .fotorama__stage {
        max-height: 235px !important;
    }

    body.catalog-product-view .fotorama__stage__frame,
    body.catalog-product-view .fotorama__img {
        max-height: 225px !important;
        object-fit: contain !important;
    }

    body.catalog-product-view .product-info-main {
        margin-bottom: 8px !important;
        padding: 10px !important;
        border-radius: 10px !important;
    }

    body.catalog-product-view .page-title,
    body.catalog-product-view .product-info-main .page-title {
        font-size: 17px !important;
        line-height: 1.22 !important;
        margin: 6px 0 6px 0 !important;
    }

    body.catalog-product-view .product-info-price {
        margin: 4px 0 6px 0 !important;
    }

    body.catalog-product-view .price-box,
    body.catalog-product-view .product-info-main .price-box {
        margin: 2px 0 5px 0 !important;
    }

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

    body.catalog-product-view .box-tocart .field.qty,
    body.catalog-product-view .box-tocart .actions {
        margin-bottom: 6px !important;
    }

    body.catalog-product-view .box-tocart .action.tocart,
    body.catalog-product-view .product-add-form .action.tocart {
        height: 40px !important;
        min-height: 40px !important;
        line-height: 40px !important;
        border-radius: 7px !important;
    }

    body.catalog-product-view .product.attribute.overview,
    body.catalog-product-view .product.attribute.description {
        margin: 8px 0 !important;
        padding: 10px !important;
    }

    body.catalog-product-view .product.info.detailed {
        margin-top: 8px !important;
    }

    body.catalog-product-view .product.info.detailed .data.item.title,
    body.catalog-product-view .product.info.detailed .data.item.content {
        margin-bottom: 4px !important;
    }

    body.catalog-product-view .product.info.detailed .data.item.content {
        padding: 10px !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    /*
      Compact independent grid.
    */
    body.catalog-product-view .vm-mobile-related-grid-heading {
        margin-bottom: 8px !important;
    }

    body.catalog-product-view .vm-mobile-related-grid-heading h2 {
        font-size: 17px !important;
    }

    body.catalog-product-view .vm-mobile-related-grid-heading p {
        font-size: 11px !important;
    }

    body.catalog-product-view .vm-mobile-related-grid {
        gap: 9px !important;
    }

    body.catalog-product-view .vm-mobile-related-card {
        padding: 7px !important;
        border-radius: 10px !important;
    }

    body.catalog-product-view .vm-mobile-related-image {
        height: 100px !important;
        margin-bottom: 6px !important;
    }

    body.catalog-product-view .vm-mobile-related-image img {
        max-height: 96px !important;
    }

    body.catalog-product-view .vm-mobile-related-badge {
        height: 23px !important;
        min-height: 23px !important;
        margin-bottom: 5px !important;
        font-size: 8px !important;
    }

    body.catalog-product-view .vm-mobile-related-name {
        min-height: 36px !important;
        max-height: 36px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        margin-bottom: 5px !important;
    }

    body.catalog-product-view .vm-mobile-related-price {
        min-height: 22px !important;
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }

    body.catalog-product-view .vm-mobile-related-button {
        height: 30px !important;
        min-height: 30px !important;
        font-size: 10px !important;
        border-radius: 6px !important;
    }
}

/* ============================================================
   End Virtual Mart Mobile Product Page Compact + Hide Old Sliders v2
   ============================================================ */


/* ============================================================
   Virtual Mart Exact Hide Old Product Related Sections v4
   Mobile product page only.
   Hides old Trive/Revo autorelated + native Magento related block.
   Keeps independent You May Also Like grid.
   ============================================================ */

@media only screen and (max-width: 767px) {

    /*
      Old Trive/Revo auto-related slider:
      <div class="block block-product-slider slider-list autorelated">
    */
    body.catalog-product-view .block.block-product-slider.slider-list.autorelated,
    body.catalog-product-view div.block.block-product-slider.slider-list.autorelated,
    body.catalog-product-view .block-product-slider.slider-list.autorelated,
    body.catalog-product-view .slider-list.autorelated,
    body.catalog-product-view .autorelated {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    /*
      Native Magento related block:
      <div class="block-margin block row" data-mage-init='{"relatedProducts":...}'>
    */
    body.catalog-product-view div[data-mage-init*="relatedProducts"],
    body.catalog-product-view .block-margin.block.row[data-mage-init*="relatedProducts"],
    body.catalog-product-view div.block-margin.block.row[data-mage-init*="relatedProducts"],
    body.catalog-product-view .products-related,
    body.catalog-product-view .owl-carousel-products-related {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    /*
      Keep our new independent grid visible.
    */
    body.catalog-product-view .vm-mobile-related-grid-block,
    body.catalog-product-view .vm-mobile-related-grid-block *,
    body.catalog-product-view .vm-mobile-related-grid,
    body.catalog-product-view .vm-mobile-related-card {
        display: revert-layer;
        visibility: visible !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.catalog-product-view .vm-mobile-related-grid-block {
        display: block !important;
    }

    body.catalog-product-view .vm-mobile-related-grid {
        display: grid !important;
    }

    body.catalog-product-view .vm-mobile-related-card {
        display: flex !important;
    }
}

/* ============================================================
   End Virtual Mart Exact Hide Old Product Related Sections v4
   ============================================================ */