/**
 * Location: /assets/css/stm-single-product-mobile-sync.css
 * Purpose:
 * - Final real-device mobile/tablet sync layer for WooCommerce single product pages.
 * - Keeps actual phone/tablet output equal to desktop responsive preview even when cache/minify/mobile-cache CSS order differs.
 * - Fixes rating text, price/stock placement, CTA grid, tabs row, and You May Also Like swipe rail.
 * - Scoped to body.single-product only; desktop layout remains untouched except desktop stock-under-price rule.
 *
 * Loader:
 * - Enqueued last by /inc/features/woocommerce/single-product.php on is_product().
 *
 * @package SuntechMallVPro
 */

/* =====================================================
   Single product breadcrumb: keep theme-owned breadcrumb visible and compact.
===================================================== */
@media (min-width:981px){
  body.single-product .stm-sp-breadcrumbs.woocommerce-breadcrumb{
    display:flex!important;
  }
}
@media (max-width:980px){
  body.single-product .stm-sp-breadcrumbs.woocommerce-breadcrumb,
  body.single-product nav.woocommerce-breadcrumb,
  body.single-product .woocommerce-breadcrumb{
    display:none!important;
  }
}

/* =====================================================
   Rating: show stars only, remove extra rating/review text
   Works with both the custom star HTML and Woo native star HTML.
===================================================== */
body.single-product .stm-sp-summary__rating{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  min-height:18px!important;
  margin:0 0 10px!important;
  overflow:visible!important;
}
body.single-product .stm-sp-summary__rating .woocommerce-product-rating{
  display:inline-flex!important;
  align-items:center!important;
  gap:0!important;
  width:auto!important;
  margin:0!important;
  overflow:visible!important;
}
body.single-product .stm-sp-summary__rating .woocommerce-review-link,
body.single-product .stm-sp-summary__rating .screen-reader-text,
body.single-product .stm-sp-summary__rating .rating-count,
body.single-product .stm-sp-summary__rating .average-rating,
body.single-product .stm-sp-summary__rating .review-count,
body.single-product .stm-sp-summary__rating .rating-text,
body.single-product .stm-sp-summary__rating [class*="review-link"],
body.single-product .stm-sp-summary__rating [class*="rating-text"]{
  display:none!important;
}
body.single-product .stm-sp-summary__rating .star-rating,
body.single-product .stm-sp-rating-stars{
  position:relative!important;
  display:inline-block!important;
  float:none!important;
  width:6.15em!important;
  min-width:6.15em!important;
  max-width:6.15em!important;
  height:1em!important;
  min-height:1em!important;
  margin:0!important;
  color:#f5a623!important;
  font-size:14px!important;
  line-height:1!important;
  letter-spacing:1px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
body.single-product .stm-sp-rating-stars__base{
  color:rgba(15,23,42,.22)!important;
}
body.single-product .stm-sp-rating-stars__fill{
  position:absolute!important;
  inset:0 auto auto 0!important;
  color:#f5a623!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}

/* =====================================================
   Price + stock: desktop stock below price, mobile/tablet stock right of price
===================================================== */
body.single-product .stm-sp-summary__price-row{
  min-width:0!important;
}
body.single-product .stm-sp-summary__price .price del,
body.single-product .stm-sp-summary .woocommerce-variation-price .price del{
  color:#dc2626!important;
  opacity:.92!important;
  font-size:calc(1em - 5px)!important;
}
body.single-product .stm-sp-summary__price .price ins,
body.single-product .stm-sp-summary .woocommerce-variation-price .price ins{
  text-decoration:none!important;
}
body.single-product .stm-sp-summary__stock .stock{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  margin:0!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  background:#ecfdf5!important;
  color:#15803d!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.05!important;
  white-space:nowrap!important;
}
body.single-product .stm-sp-summary__stock .out-of-stock,
body.single-product .stm-sp-summary__stock .stock.out-of-stock{
  background:#fef2f2!important;
  color:#dc2626!important;
}
@media (min-width:981px){
  body.single-product .stm-sp-summary__price-row{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:8px!important;
  }
  body.single-product .stm-sp-summary__price,
  body.single-product .stm-sp-summary__stock{
    flex:0 0 auto!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    text-align:left!important;
    justify-content:flex-start!important;
  }
}
@media (max-width:980px){
  body.single-product .stm-sp-summary__price-row{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    flex-wrap:nowrap!important;
    width:100%!important;
    margin:0 0 14px!important;
  }
  body.single-product .stm-sp-summary__price{
    flex:1 1 auto!important;
    min-width:0!important;
  }
  body.single-product .stm-sp-summary__price .price{
    display:block!important;
    margin:0!important;
    color:#000!important;
    font-size:clamp(26px, 7vw, 34px)!important;
    line-height:1.12!important;
    font-weight:800!important;
    white-space:normal!important;
  }
  body.single-product .stm-sp-summary__stock{
    flex:0 0 auto!important;
    max-width:48%!important;
    margin:0!important;
    text-align:right!important;
    justify-content:flex-end!important;
  }
}
@media (max-width:420px){
  body.single-product .stm-sp-summary__stock{
    max-width:45%!important;
  }
  body.single-product .stm-sp-summary__stock .stock{
    padding:6px 8px!important;
    font-size:11px!important;
  }
}

/* =====================================================
   CTA: qty full width, Add to cart left, WhatsApp right, Download full width
===================================================== */
@media (max-width:980px){
  body.single-product .stm-sp-summary__bar,
  body.single-product .stm-sp-summary__cart,
  body.single-product .stm-sp-summary__cta,
  body.single-product form.cart{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  body.single-product .stm-sp-summary__cta-row,
  body.single-product [data-stm-cta-row]{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-top:16px!important;
    flex-wrap:nowrap!important;
  }
  body.single-product .stm-sp-summary__cta-qtyrow,
  body.single-product [data-stm-cta-qtyrow],
  body.single-product .stm-sp-summary__cta-qtyrow .quantity,
  body.single-product [data-stm-cta-qtyrow] .quantity{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
  body.single-product .stm-sp-summary__cta-qtyrow input.qty,
  body.single-product [data-stm-cta-qtyrow] input.qty{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-height:52px!important;
    height:52px!important;
    margin:0!important;
    border-radius:14px!important;
    text-align:center!important;
    box-sizing:border-box!important;
  }
  body.single-product .stm-sp-summary__cta-actions,
  body.single-product [data-stm-cta-actions]{
    display:grid!important;
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    align-items:stretch!important;
  }
  body.single-product .stm-sp-summary__cta-extra,
  body.single-product [data-stm-cta-extra]{
    display:contents!important;
  }
  body.single-product .stm-sp-summary__cta-actions button.single_add_to_cart_button,
  body.single-product [data-stm-cta-actions] button.single_add_to_cart_button,
  body.single-product .stm-sp-summary__cta-actions a.stm-sp-summary__btn,
  body.single-product [data-stm-cta-actions] a.stm-sp-summary__btn{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    min-height:52px!important;
    height:52px!important;
    margin:0!important;
    padding:0 12px!important;
    border-radius:14px!important;
    font-size:13px!important;
    font-weight:800!important;
    line-height:1.1!important;
    white-space:normal!important;
    text-align:center!important;
    box-sizing:border-box!important;
  }
  body.single-product .stm-sp-summary__cta-actions a.stm-sp-summary__btn--dl,
  body.single-product [data-stm-cta-actions] a.stm-sp-summary__btn--dl{
    grid-column:1 / -1!important;
  }
}

/* =====================================================
   Tabs: keep Description / Additional Info / Reviews in one row on mobile/tablet
===================================================== */
@media (max-width:980px){
  body.single-product .woocommerce-tabs ul.tabs{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    gap:6px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0 0 12px!important;
    padding:0!important;
    overflow:visible!important;
  }
  body.single-product .woocommerce-tabs ul.tabs li{
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
  }
  body.single-product .woocommerce-tabs ul.tabs li a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    min-height:38px!important;
    padding:8px 4px!important;
    border-radius:999px!important;
    font-size:clamp(9px, 2.55vw, 12px)!important;
    line-height:1!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

/* =====================================================
   You May Also Like: real horizontal swipe rail
   Tablet = 2.5 cards visible, Mobile = 1.5 cards visible.
===================================================== */
@media (max-width:1024px){
  body.single-product.woocommerce .stm-sp__below,
  body.single-product.woocommerce .stm-sp-upsells,
  body.single-product.woocommerce .up-sells.upsells,
  body.single-product.woocommerce .related.products{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }
  body.single-product.woocommerce .stm-single-product-v1 .stm-sp-upsells ul.products,
  body.single-product.woocommerce .stm-single-product-v1 .up-sells.upsells ul.products,
  body.single-product.woocommerce .stm-single-product-v1 .related.products ul.products,
  body.single-product.woocommerce .stm-sp-upsells ul.products.products,
  body.single-product.woocommerce .up-sells.upsells ul.products.products,
  body.single-product.woocommerce .related.products ul.products.products,
  body.single-product.woocommerce .stm-sp-upsells .products,
  body.single-product.woocommerce .up-sells.upsells .products,
  body.single-product.woocommerce .related.products .products{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:14px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:4px 2px 14px!important;
    list-style:none!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity!important;
    scroll-padding-left:2px!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    touch-action:pan-x pinch-zoom!important;
    scrollbar-width:none!important;
    grid-template-columns:none!important;
  }
  body.single-product.woocommerce .stm-sp-upsells ul.products::-webkit-scrollbar,
  body.single-product.woocommerce .up-sells.upsells ul.products::-webkit-scrollbar,
  body.single-product.woocommerce .related.products ul.products::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
  }
  body.single-product.woocommerce .stm-sp-upsells ul.products > li.product,
  body.single-product.woocommerce .up-sells.upsells ul.products > li.product,
  body.single-product.woocommerce .related.products ul.products > li.product{
    float:none!important;
    clear:none!important;
    display:block!important;
    flex:0 0 calc((100% - 28px) / 2.5)!important;
    width:calc((100% - 28px) / 2.5)!important;
    min-width:calc((100% - 28px) / 2.5)!important;
    max-width:calc((100% - 28px) / 2.5)!important;
    margin:0!important;
    scroll-snap-align:start!important;
    overflow:visible!important;
  }
  body.single-product.woocommerce .stm-sp-upsells ul.products > li.product.first,
  body.single-product.woocommerce .stm-sp-upsells ul.products > li.product.last,
  body.single-product.woocommerce .up-sells.upsells ul.products > li.product.first,
  body.single-product.woocommerce .up-sells.upsells ul.products > li.product.last,
  body.single-product.woocommerce .related.products ul.products > li.product.first,
  body.single-product.woocommerce .related.products ul.products > li.product.last{
    clear:none!important;
  }
  body.single-product.woocommerce .stm-sp-upsells .stm-pl,
  body.single-product.woocommerce .up-sells.upsells .stm-pl,
  body.single-product.woocommerce .related.products .stm-pl{
    height:100%!important;
    min-width:0!important;
  }
}
@media (max-width:640px){
  body.single-product.woocommerce .stm-single-product-v1 .stm-sp-upsells ul.products,
  body.single-product.woocommerce .stm-single-product-v1 .up-sells.upsells ul.products,
  body.single-product.woocommerce .stm-single-product-v1 .related.products ul.products,
  body.single-product.woocommerce .stm-sp-upsells ul.products.products,
  body.single-product.woocommerce .up-sells.upsells ul.products.products,
  body.single-product.woocommerce .related.products ul.products.products,
  body.single-product.woocommerce .stm-sp-upsells .products,
  body.single-product.woocommerce .up-sells.upsells .products,
  body.single-product.woocommerce .related.products .products{
    gap:12px!important;
  }
  body.single-product.woocommerce .stm-sp-upsells ul.products > li.product,
  body.single-product.woocommerce .up-sells.upsells ul.products > li.product,
  body.single-product.woocommerce .related.products ul.products > li.product{
    flex-basis:calc((100% - 12px) / 1.5)!important;
    width:calc((100% - 12px) / 1.5)!important;
    min-width:calc((100% - 12px) / 1.5)!important;
    max-width:calc((100% - 12px) / 1.5)!important;
  }
}

/* =====================================================
   Real touch-device polish: keep page vertical scroll smooth.
===================================================== */
@media (hover:none) and (pointer:coarse){
  body.single-product .woocommerce-product-gallery,
  body.single-product .stm-sp__media,
  body.single-product .woocommerce-product-gallery__wrapper{
    touch-action:pan-y pinch-zoom!important;
  }
}


/* =====================================================
   2026-07-07 V1036 real mobile polish
   - Old sale price reduced and forced on nested .amount.
   - Description text uses app-readable size instead of oversized mobile text.
   - You May Also Like rail stays inside section and scrolls horizontally.
===================================================== */
body.single-product .stm-sp-summary__price .price del,
body.single-product .stm-sp-summary__price .price del .amount,
body.single-product .stm-sp-summary .woocommerce-variation-price .price del,
body.single-product .stm-sp-summary .woocommerce-variation-price .price del .amount{
  color:#dc2626!important;
  opacity:.92!important;
  font-size:clamp(21px, 5.4vw, 29px)!important;
  line-height:1.05!important;
  font-weight:800!important;
}

@media (max-width:980px){
  body.single-product{
    overflow-x:hidden!important;
  }
  body.single-product .woocommerce-tabs .panel,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel{
    padding:16px 16px 18px!important;
  }
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel--description,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel--description p,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel--description li,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel--description td,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel--description th{
    font-size:15px!important;
    line-height:1.58!important;
    letter-spacing:.005em!important;
    color:#111827!important;
  }
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel--description strong,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel--description b{
    font-weight:800!important;
  }
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel--description h1,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel--description h2,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel--description h3,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel--description h4{
    font-size:17px!important;
    line-height:1.32!important;
    margin:0 0 10px!important;
    color:#0f172a!important;
  }
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel--description ul,
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel--description ol{
    margin:10px 0 14px 18px!important;
    padding:0!important;
  }
  body.single-product .woocommerce-tabs .woocommerce-Tabs-panel--description li{
    margin:0 0 7px!important;
  }
}

@media (max-width:1024px){
  body.single-product.woocommerce .stm-single-product-v1,
  body.single-product.woocommerce .stm-sp,
  body.single-product.woocommerce .stm-sp__below,
  body.single-product.woocommerce .stm-sp-upsells,
  body.single-product.woocommerce .up-sells.upsells,
  body.single-product.woocommerce .related.products{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    contain:layout paint;
  }
  body.single-product.woocommerce .stm-sp-upsells ul.products,
  body.single-product.woocommerce .up-sells.upsells ul.products,
  body.single-product.woocommerce .related.products ul.products,
  body.single-product.woocommerce .stm-sp-upsells ul.products.products,
  body.single-product.woocommerce .up-sells.upsells ul.products.products,
  body.single-product.woocommerce .related.products ul.products.products{
    display:flex!important;
    flex-flow:row nowrap!important;
    grid-template-columns:none!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    gap:14px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:4px 0 16px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-snap-type:x proximity!important;
    overscroll-behavior-x:contain!important;
    touch-action:pan-x!important;
    scrollbar-width:none!important;
    box-sizing:border-box!important;
  }
  body.single-product.woocommerce .stm-sp-upsells ul.products::-webkit-scrollbar,
  body.single-product.woocommerce .up-sells.upsells ul.products::-webkit-scrollbar,
  body.single-product.woocommerce .related.products ul.products::-webkit-scrollbar{
    display:none!important;
  }
  body.single-product.woocommerce .stm-sp-upsells ul.products > li.product,
  body.single-product.woocommerce .up-sells.upsells ul.products > li.product,
  body.single-product.woocommerce .related.products ul.products > li.product{
    float:none!important;
    clear:none!important;
    display:block!important;
    flex:0 0 calc((100% - 28px) / 2.5)!important;
    width:calc((100% - 28px) / 2.5)!important;
    min-width:calc((100% - 28px) / 2.5)!important;
    max-width:calc((100% - 28px) / 2.5)!important;
    margin:0!important;
    scroll-snap-align:start!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  body.single-product.woocommerce .stm-sp-upsells .stm-pl,
  body.single-product.woocommerce .up-sells.upsells .stm-pl,
  body.single-product.woocommerce .related.products .stm-pl{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
}
@media (max-width:640px){
  body.single-product.woocommerce .stm-sp-upsells ul.products,
  body.single-product.woocommerce .up-sells.upsells ul.products,
  body.single-product.woocommerce .related.products ul.products,
  body.single-product.woocommerce .stm-sp-upsells ul.products.products,
  body.single-product.woocommerce .up-sells.upsells ul.products.products,
  body.single-product.woocommerce .related.products ul.products.products{
    gap:12px!important;
  }
  body.single-product.woocommerce .stm-sp-upsells ul.products > li.product,
  body.single-product.woocommerce .up-sells.upsells ul.products > li.product,
  body.single-product.woocommerce .related.products ul.products > li.product{
    flex:0 0 calc((100% - 12px) / 1.5)!important;
    width:calc((100% - 12px) / 1.5)!important;
    min-width:calc((100% - 12px) / 1.5)!important;
    max-width:calc((100% - 12px) / 1.5)!important;
  }
}

/* =====================================================
   v1048 description panel no-inner-scroll safety.
===================================================== */
body.single-product.woocommerce .woocommerce-tabs,
body.single-product.woocommerce .woocommerce-tabs .panel,
body.single-product.woocommerce .woocommerce-tabs .woocommerce-Tabs-panel,
body.single-product.woocommerce .woocommerce-tabs .woocommerce-Tabs-panel--description{
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  overflow-y:visible!important;
  content-visibility:visible!important;
  contain:none!important;
}
body.single-product.woocommerce .woocommerce-tabs .woocommerce-Tabs-panel--description table,
body.single-product.woocommerce .woocommerce-tabs table.shop_attributes{
  display:table!important;
  width:100%!important;
  max-width:100%!important;
  table-layout:fixed!important;
  overflow:visible!important;
  overflow-x:visible!important;
  overflow-y:visible!important;
}
body.single-product.woocommerce .woocommerce-tabs table th,
body.single-product.woocommerce .woocommerce-tabs table td{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
@media (max-width:640px){
  body.single-product.woocommerce .woocommerce-tabs table th,
  body.single-product.woocommerce .woocommerce-tabs table td{
    padding:8px 7px!important;
    font-size:13px!important;
    line-height:1.45!important;
  }
}

/* =====================================================
   v1055 tablet/mobile breadcrumb gap collapse + gallery tap safety.
   Purpose:
   - Breadcrumb is desktop-only; the parent top row also collapses so no empty gap remains on tablet/mobile.
   - Thumbnail controls stay tappable and visible on real phones/tablets without changing desktop styling.
===================================================== */
@media (max-width:1024px), (hover:none) and (pointer:coarse){
  body.single-product .stm-layout__top.stm-single-product-top,
  body.single-product.woocommerce .stm-layout__top.stm-single-product-top{
    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;
  }
  body.single-product .stm-layout,
  body.single-product.woocommerce .stm-layout{
    row-gap:0!important;
  }
  body.single-product .stm-layout__content,
  body.single-product.woocommerce .stm-layout__content{
    margin-top:0!important;
    padding-top:0!important;
  }
  body.single-product .stm-sp-breadcrumbs.woocommerce-breadcrumb,
  body.single-product nav.woocommerce-breadcrumb,
  body.single-product .woocommerce-breadcrumb,
  body.single-product .stm-sp-breadcrumbs,
  body.single-product .stm-single-product-breadcrumbs{
    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;
  }
  body.single-product.woocommerce .stm-sp__media .flex-control-nav,
  body.single-product.woocommerce .stm-sp__media .flex-control-thumbs{
    pointer-events:auto!important;
    touch-action:pan-x!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.single-product.woocommerce .stm-sp__media .flex-control-nav img,
  body.single-product.woocommerce .stm-sp__media .flex-control-thumbs img{
    pointer-events:auto!important;
    cursor:pointer!important;
    -webkit-tap-highlight-color:rgba(0,0,0,0)!important;
  }
}
