/* =======================================================================
   product_content.css — สไตล์เนื้อหา "รายละเอียดสินค้า" (product_detail)
   ใช้ร่วมกันทุกหน้าที่แสดงเนื้อหาเดียวกัน เพื่อให้แสดงผลเหมือนกัน:
     - shop:   .pd-desc / .qv-desc   (ครอบด้วย .product-content)
     - member: .prd-html-content     (ครอบด้วย .product-content)
   * ใช้สีตรง (ไม่พึ่ง CSS variable ของธีมใดธีมหนึ่ง) → พกพาข้ามธีมได้
   * โหลดไฟล์นี้ "ทีหลัง" CSS ของแต่ละธีม เพื่อให้ override ได้
   ======================================================================= */

.product-content {
  font-size: 15px;
  line-height: 1.85;
  color: #4A3F42;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---- media ไม่ล้นกรอบ ---- */
.product-content img,
.product-content video,
.product-content table,
.product-content embed,
.product-content object { max-width: 100% !important; height: auto; }
.product-content img { border-radius: 8px; }
.product-content table { display: block; overflow-x: auto; }

/* ---- iframe / วิดีโอ responsive 16:9 ---- */
.product-content iframe { max-width: 100% !important; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.product-content .video-container { display: block; width: 100%; max-width: 860px; margin: 0 auto 18px; }
/* member: วิดีโอในโมดอลรายละเอียดสินค้า → เต็มความกว้าง modal (ไม่จำกัด 860px) */
.prd-html-content .video-container { max-width: none; }
.prd-html-content .video-container iframe { width: 100% !important; }

/* ---- หัวข้อ / ย่อหน้า / รายการ ---- */
.product-content h1,
.product-content h2,
.product-content h3 { font-family: 'Playfair Display', serif; color: #1A1416; margin: 18px 0 10px; line-height: 1.3; }
.product-content p { margin-bottom: 12px; }
.product-content ul,
.product-content ol { padding-left: 22px; margin-bottom: 12px; }

/* =================== บล็อกเทมเพลตเนื้อหาสินค้า (เข้าธีม) =================== */
/* ย่อหน้าเด่น */
.product-content .pd-lead { font-size: 17px; line-height: 1.7; color: #1A1416; font-weight: 500; border-left: 3px solid #D4AF37; padding: 4px 0 4px 18px; margin: 0 0 20px; }

/* ตารางสเปก */
.product-content table.pd-spec { display: table; width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 14.5px; overflow: visible; }
.product-content table.pd-spec th { width: 34%; text-align: left; background: #F2EEEA; color: #7A1723; font-weight: 600; padding: 11px 14px; border: 1px solid #E8E2DC; vertical-align: top; }
.product-content table.pd-spec td { padding: 11px 14px; border: 1px solid #E8E2DC; color: #4A3F42; vertical-align: top; }

/* กล่องหมายเหตุ / ไฮไลต์ */
.product-content .pd-note { background: #FAF8F6; border: 1px solid #E8E2DC; border-left: 4px solid #D4AF37; border-radius: 10px; padding: 14px 18px; margin: 0 0 22px; font-size: 14.5px; color: #4A3F42; line-height: 1.7; }
.product-content .pd-note strong { color: #7A1723; }

/* กริดจุดเด่น 2 คอลัมน์ + ไอคอน */
.product-content .pd-features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 0 0 24px; }
.product-content .pd-feature { display: flex; gap: 12px; align-items: flex-start; }
.product-content .pd-feature i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #F2EEEA; color: #B8932A; font-size: 13px; margin-top: 2px; }
.product-content .pd-feature strong { display: block; color: #1A1416; font-size: 14.5px; }
.product-content .pd-feature span { display: block; color: #8A7E82; font-size: 13px; line-height: 1.55; }

@media (max-width: 560px) {
  .product-content .pd-features { grid-template-columns: 1fr; }
  .product-content table.pd-spec th { width: 40%; }
}