/* ซ่อนพื้นที่ว่างเหนือเนื้อหา (header spacer/title wrapper) */
.page .entry-header,
.page .entry-content > .wp-block-spacer:first-child {
  display: none !important;
}
.site-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Blocksy: ตัดเส้นคั่นในสรุปสินค้าหน้าเดี่ยว */
.single-product .summary .ct-divider { 
  display: none !important; 
}

/* WooCommerce: เอาเส้นคั่น/ขอบใน meta ออก */
.woocommerce div.product .product_meta {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0.5em !important; /* ปรับช่องว่างนิดหน่อย */
}

/* กันธีมใส่เส้นให้ element อื่นๆ ใน summary */
.single-product .summary > * {
  border: none !important;
}

/* บังคับรูปหน้า Product เดี่ยวให้เป็นสี่เหลี่ยมจัตุรัส */
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__wrapper { aspect-ratio: 1 / 1; }
.single-product .woocommerce-product-gallery__wrapper img {
  width: 100%; height: 100%; object-fit: cover; background:#fff;
}

/* =============== บังคับรูปเป็นสี่เหลี่ยม (1:1) =============== */

/* 1) หน้ารวมสินค้า (การ์ดสินค้า) */
.woocommerce ul.products li.product a img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;           /* ให้ browser คำนวณจาก aspect-ratio */
  object-fit: cover;      /* เติมเต็มเป็นสี่เหลี่ยม */
  background: #fff;
}

/* 2) หน้าสินค้าเดี่ยว (ภาพใหญ่ด้านซ้าย) */
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image {
  aspect-ratio: 1 / 1;
}

.single-product .woocommerce-product-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* ครอบให้เต็มสี่เหลี่ยม */
  background: #fff;
}

/* 3) Fallback สำหรับ browser เก่าที่ไม่รองรับ aspect-ratio */
@supports not (aspect-ratio: 1/1) {
  .woocommerce ul.products li.product a img {
    height: 0 !important;
    padding-bottom: 100% !important;   /* ทำสี่เหลี่ยมจัตุรัส */
    object-fit: cover;
  }
  .single-product .woocommerce-product-gallery__wrapper {
    position: relative;
  }
  .single-product .woocommerce-product-gallery__image {
    position: absolute; inset: 0;
  }
  .single-product .woocommerce-product-gallery__image img {
    width: 100%; height: 100%; object-fit: cover;
  }
}