/* =========================================================
   FIX PRODUCT MOBILE: ปุ่มรูป/ตัวเลือกสินค้า active แล้วขอบใหญ่
   วางล่างสุดของ assets/css/product_mobile_edge_to_edge_override.css
========================================================= */

@media (max-width: 575.98px) {
  /* กันหน้า product ล้นขวา */
  .product-detail-wrap,
  .product-detail-wrap * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ตัวครอบ thumbnail / ตัวเลือกสินค้า ต้องเลื่อนในกรอบ ไม่ดันจอ */
  .product-thumb-scroll,
  .product-thumbs,
  .product-thumbnail-wrap,
  .variant-options-wrap,
  .variant-options-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-left: .55rem !important;
    padding-right: .55rem !important;
  }

  /* ปุ่ม thumbnail ใต้รูปสินค้า */
  .product-thumb-btn,
  .product-thumbnail-btn,
  .thumb-btn,
  .product-thumb,
  .product-image-thumb {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    padding: 2px !important;
    margin: 0 .18rem !important;
    border-radius: .35rem !important;
    border: 1px solid #dbeafe !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: hidden !important;
    flex: 0 0 54px !important;
  }

  .product-thumb-btn.active,
  .product-thumb-btn:focus,
  .product-thumb-btn:active,
  .product-thumbnail-btn.active,
  .product-thumbnail-btn:focus,
  .product-thumbnail-btn:active,
  .thumb-btn.active,
  .thumb-btn:focus,
  .thumb-btn:active,
  .product-thumb.active,
  .product-thumb:focus,
  .product-thumb:active,
  .product-image-thumb.active,
  .product-image-thumb:focus,
  .product-image-thumb:active {
    border: 1px solid #0d6efd !important;
    box-shadow: none !important;
    outline: 0 !important;
    transform: none !important;
  }

  .product-thumb-btn img,
  .product-thumbnail-btn img,
  .thumb-btn img,
  .product-thumb img,
  .product-image-thumb img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    border-radius: .25rem !important;
    display: block !important;
  }

  /* ปุ่มลูกศร carousel ไม่ให้มีขอบใหญ่ */
  .carousel-control-prev,
  .carousel-control-next,
  .product-gallery-card .carousel-control-prev,
  .product-gallery-card .carousel-control-next {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-radius: .35rem !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  .carousel-control-prev:focus,
  .carousel-control-next:focus,
  .carousel-control-prev:active,
  .carousel-control-next:active {
    box-shadow: none !important;
    outline: 0 !important;
  }

  /* ปุ่มตัวเลือกสินค้า */
  .variant-outline-btn,
  .variant-btn,
  .product-variant-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: .45rem .4rem !important;
    border-radius: .35rem !important;
    border-width: 1px !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .variant-outline-btn.active,
  .variant-outline-btn:focus,
  .variant-outline-btn:active,
  .variant-btn.active,
  .variant-btn:focus,
  .variant-btn:active,
  .product-variant-btn.active,
  .product-variant-btn:focus,
  .product-variant-btn:active {
    border-width: 1px !important;
    box-shadow: none !important;
    outline: 0 !important;
    transform: none !important;
  }

  /* ตัด focus ring ของ Bootstrap ที่ชอบทำให้ดูเหมือนขอบใหญ่ */
  .btn:focus,
  .btn:active,
  button:focus,
  button:active,
  [role="button"]:focus,
  [role="button"]:active {
    box-shadow: none !important;
    outline: 0 !important;
  }

  /* กัน element ที่ใช้ width:100vw ดันออกขวา */
  .product-detail-wrap [style*="100vw"],
  .product-detail-wrap .w-100vw {
    width: 100% !important;
    max-width: 100% !important;
  }
}