/* ================================
   Ebook Package Page
   ================================ */

/* 1. Hero card */
.productHero{}

/* 2. Product story */
.productStorySection{}

/* 3. Package comparison */
.packageSection{}

/* 4. CTA buttons */
.productCTA{}

/* 5. Mobile tuning */
@media (max-width: 768px){
  /* mobile-only tweaks */
}

/* =========================================
   shop-ebook-package.css (page override)
   Goal:
   - card border soft gold
   - image bigger (right)
   - reduce bottom padding of hero card
   ========================================= */

.productHero{
  position: relative;
  border: 1px solid rgba(255, 220, 170, 0.32);   /* soft gold (lighter than buttons) */
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  box-shadow:
    0 0 0 1px rgba(255, 220, 170, 0.10),
    0 12px 32px rgba(0,0,0,0.45);
  overflow: hidden; /* กันมุมโค้งหลุด */
}

/* glow เบามากแบบหรู */
.productHero::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  box-shadow: inset 0 0 22px rgba(255, 220, 170, 0.08);
}

/* ลด “ขอบล่าง” การ์ดหัวเว็บ */
.productHero .container{
  padding-top: 18px;   /* ลดได้ */
  padding-bottom: 14px;/* ลดขอบล่าง -1 */
}

/* ===== HERO GRID: บังคับสัดส่วนให้รูปใหญ่ขึ้นจริง ===== */
.productHero .heroGrid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr; /* ให้ขวา “กินพื้นที่มากขึ้น” */
  align-items: center;
  gap: 18px; /* ลด gap เพื่อให้ media ดูใหญ่ขึ้น */
}

/* ถ้าเดิมมีข้อจำกัดจาก css อื่น (min/max width) ให้ปลด */
.productHero .heroText,
.productHero .heroMedia{
  min-width: 0;
}

/* ===== RIGHT MEDIA: ขยายรูป ===== */
.productHero .heroMedia{
  display: flex;
  justify-content: flex-end;  /* ชิดขวาแบบสวย */
  align-items: center;
}

.productHero .hero__img{
  width: min(520px, 100%); /* “ใหญ่ขึ้นจริง” บนเดสก์ท็อป */
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
  transform: scale(1.05);     /* +1 แบบเห็นผล */
  transform-origin: right center;
}

/* ===== Responsive: tablet/phone ===== */
@media (max-width: 980px){
  .productHero .heroGrid{
    grid-template-columns: 1fr;
  }
  .productHero .heroMedia{
    justify-content: center;
  }
  .productHero .hero__img{
    width: min(560px, 100%);
    transform: scale(1.02);
    transform-origin: center;
  }
}

/* ปรับ spacing ของข้อความไม่ให้ชนกัน */
.productHero .goldline{ margin-bottom: 6px; }
.productHero h1{ margin: 6px 0 10px; line-height: 1.05; }
.productHero .lead{ margin: 0 0 10px; }

/* =========================================
   PAGE SPACING OVERRIDE (shop-ebook-package)
   Goal:
   - more breathing room everywhere
   - hero text move down (avoid touching card edge)
   - sections less dense
   ========================================= */

/* 1) เพิ่มช่องไฟรวมทั้งหน้า (ไม่แตะไฟล์หลัก) */
:root{
  --page-gap: 28px;     /* ระยะห่างระหว่าง section */
  --text-gap: 12px;     /* ระยะห่างระหว่างหัวข้อ/ย่อหน้า */
  --para-gap: 14px;     /* ระยะห่างระหว่างย่อหน้า */
}

/* 2) ทุก section ให้หายใจมากขึ้น */
.section{
  padding-top: var(--page-gap);
  padding-bottom: var(--page-gap);
}

/* ถ้า section ไหนเป็นการ์ด/panel อยู่แล้ว ให้ไม่แน่น */
.panel{
  margin-top: 22px;
  margin-bottom: 22px;
}

/* 3) จัด vertical rhythm ของหัวข้อ/ข้อความ */
.sectionTitle{
  margin-top: 0;
  margin-bottom: 14px;
  line-height: 1.15;
}

.sectionLead{
  margin: 0 0 16px;
  line-height: 1.7;
}

.section p{
  margin: 0 0 var(--para-gap);
  line-height: 1.85; /* อ่านสบายขึ้น */
}

/* 4) HERO: ขยับตัวอักษรลงมา + เพิ่มช่องไฟในกล่อง */
.productHero .container{
  padding-top: 30px !important;   /* ขยับลงมา (กันชนขอบบน) */
  padding-bottom: 20px !important;
}

/* ขยับ block ข้อความทั้งก้อนลงเล็กน้อย */
.productHero .heroText{
  padding-top: 10px;
}

/* spacing ใน hero */
.productHero .goldline{
  margin-bottom: 10px;
}

.productHero h1{
  margin: 8px 0 16px;
  line-height: 1.05;
}

.productHero .lead{
  margin: 0 0 14px;
  line-height: 1.75;
}

.productHero p{
  margin: 0 0 12px;
  line-height: 1.85;
}

/* 5) เพิ่มช่องไฟระหว่าง hero กับ section ถัดไป */
.productHero + .section{
  padding-top: 34px;
}

/* 6) การ์ดเนื้อหา (เช่น 4 ส่วน) ให้หายใจ */
.section .card,
.section .box,
.section .infoCard,
.section .contentCard{
  margin-top: 16px;
  margin-bottom: 16px;
}

/* 7) มือถือ: เพิ่มช่องไฟอีกนิด (เพราะแน่นง่าย) */
@media (max-width: 680px){
  :root{
    --page-gap: 24px;
    --para-gap: 16px;
  }
  .productHero .container{
    padding-top: 26px !important;
    padding-bottom: 18px !important;
  }
}

/* =========================================
   shop-ebook-package.css (page override)
   Goal:
   - card border soft gold
   - image bigger (right)
   - reduce bottom padding of hero card
   ========================================= */

.productHero{
  position: relative;
  border: 1px solid rgba(255, 220, 170, 0.32);   /* soft gold (lighter than buttons) */
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  box-shadow:
    0 0 0 1px rgba(255, 220, 170, 0.10),
    0 12px 32px rgba(0,0,0,0.45);
  overflow: hidden; /* กันมุมโค้งหลุด */
}

/* glow เบามากแบบหรู */
.productHero::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  box-shadow: inset 0 0 22px rgba(255, 220, 170, 0.08);
}

/* ลด “ขอบล่าง” การ์ดหัวเว็บ */
.productHero .container{
  padding-top: 18px;   /* ลดได้ */
  padding-bottom: 14px;/* ลดขอบล่าง -1 */
}

/* ===== HERO GRID: บังคับสัดส่วนให้รูปใหญ่ขึ้นจริง ===== */
.productHero .heroGrid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr; /* ให้ขวา “กินพื้นที่มากขึ้น” */
  align-items: center;
  gap: 18px; /* ลด gap เพื่อให้ media ดูใหญ่ขึ้น */
}

/* ถ้าเดิมมีข้อจำกัดจาก css อื่น (min/max width) ให้ปลด */
.productHero .heroText,
.productHero .heroMedia{
  min-width: 0;
}

/* ===== RIGHT MEDIA: ขยายรูป ===== */
.productHero .heroMedia{
  display: flex;
  justify-content: flex-end;  /* ชิดขวาแบบสวย */
  align-items: center;
}

.productHero .hero__img{
  width: min(520px, 100%); /* “ใหญ่ขึ้นจริง” บนเดสก์ท็อป */
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
  transform: scale(1.05);     /* +1 แบบเห็นผล */
  transform-origin: right center;
}

/* ===== Responsive: tablet/phone ===== */
@media (max-width: 980px){
  .productHero .heroGrid{
    grid-template-columns: 1fr;
  }
  .productHero .heroMedia{
    justify-content: center;
  }
  .productHero .hero__img{
    width: min(560px, 100%);
    transform: scale(1.02);
    transform-origin: center;
  }
}

/* ปรับ spacing ของข้อความไม่ให้ชนกัน */
.productHero .goldline{ margin-bottom: 6px; }
.productHero h1{ margin: 6px 0 10px; line-height: 1.05; }
.productHero .lead{ margin: 0 0 10px; }

/* ======================================
   PACKAGES – FORCE 2x2 + GOLD LUX
   (no body class needed)
   ====================================== */

#packages .productGrid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 26px !important;
  margin-top: 28px !important;
  align-items: stretch !important;
}

/* mobile -> 1 column */
@media (max-width: 768px){
  #packages .productGrid{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ===== Gold Lux Card ===== */
#packages .card.cardGold{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;

  padding: 26px 28px 24px !important;
  border-radius: 22px !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    rgba(14,16,18,0.68) !important;

  border: 1px solid rgba(201,168,106,0.35) !important;

  box-shadow:
    0 22px 60px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(201,168,106,0.12) !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  overflow: hidden !important;
  transform: translateZ(0); /* กัน iOS แปลกๆ */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}

#packages .card.cardGold:hover{
  transform: translateY(-2px) !important;
  border-color: rgba(201,168,106,0.55) !important;

  box-shadow:
    0 28px 72px rgba(0,0,0,0.6),
    inset 0 0 0 1px rgba(201,168,106,0.25) !important;
}

/* text */
#packages .card.cardGold h3{
  margin: 0 !important;
  line-height: 1.25 !important;
}

#packages .card.cardGold .price{
  margin: 4px 0 6px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: rgba(201,168,106,0.95) !important;
}

#packages .card.cardGold ul{
  margin: 0 !important;
  padding-left: 18px !important;
  line-height: 1.6 !important;
}

#packages .card.cardGold .small{
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  opacity: .9 !important;
}

/* button always bottom */
#packages .card.cardGold a.btn{
  margin-top: auto !important;
  align-self: flex-start !important;
}

/* recommended badge */
#packages .card.cardGold.recommended{
  border-color: rgba(201,168,106,0.65) !important;
}

#packages .card.cardGold .badge{
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;

  padding: 6px 12px !important;
  border-radius: 999px !important;

  font-size: 12px !important;
  letter-spacing: .04em !important;
  font-weight: 700 !important;

  color: #1a1a1a !important;
  background: linear-gradient(135deg, #e8d3a2, #c9a86a) !important;

  box-shadow: 0 6px 18px rgba(0,0,0,.35) !important;
  z-index: 2 !important;
}

/* =========================================================
   KRUNIKI — shop-ebook-package.css (PAGE-SCOPED ONLY)
   Page class: body.page--shop-ebook
   ========================================================= */

.page--shop-ebook main{
  padding-top: 72px; /* กัน header fixed ทับ */
}

/* ---------- Global spacing tune (ทั้งหน้า) ---------- */
.page--shop-ebook .section{
  padding: 34px 0; /* ลดความแน่นของแต่ละบล็อก */
}

.page--shop-ebook .sectionTitle{
  margin: 0 0 14px;
  line-height: 1.15;
}

.page--shop-ebook .sectionLead{
  margin: 0 0 14px;
  line-height: 1.7;
  max-width: 72ch;
}

.page--shop-ebook p{
  line-height: 1.75;
}

.page--shop-ebook .softBg{
  padding-top: 36px;
  padding-bottom: 36px;
}

/* ---------- HERO: ลดความแน่น + ไม่ชนขอบ card ---------- */
.page--shop-ebook .productHero{
  padding-top: 18px;   /* เพิ่มช่องบนให้หัวไม่ชน */
  padding-bottom: 10px; /* ลดขอบล่างการ์ด -1 */
}

.page--shop-ebook .productHero .heroGrid{
  display: grid;
  grid-template-columns: 1.15fr .85fr; /* ✅ ให้ข้อความฝั่งซ้ายใหญ่กว่าเล็กน้อย */
  gap: 26px;
  align-items: center;
}

/* มือถือ: 1 คอลัมน์ */
@media (max-width: 900px){
  .page--shop-ebook .productHero .heroGrid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ขยับตัวอักษรใน hero ลง + จัดระยะให้หายอึดอัด */
.page--shop-ebook .productHero .heroText{
  padding-top: 10px;
}

.page--shop-ebook .productHero .goldline{
  margin-bottom: 10px;
}

.page--shop-ebook .productHero h1{
  margin: 0 0 14px;
  line-height: 1.05;
}

.page--shop-ebook .productHero .lead{
  margin: 0 0 12px;
  max-width: 60ch;
}

/* ---------- HERO IMAGE: ทำให้ “ใหญ่ขึ้นจริง” ---------- */
.page--shop-ebook .productHero .heroMedia{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.page--shop-ebook .productHero .hero__img{
  width: min(520px, 100%); /* ✅ เพิ่มขนาด +1 แบบเห็นผล */
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* จอแคบ ให้ภาพเต็มและอยู่กลาง */
@media (max-width: 900px){
  .page--shop-ebook .productHero .heroMedia{
    justify-content: center;
  }
  .page--shop-ebook .productHero .hero__img{
    width: min(560px, 100%);
  }
}

/* ---------- CARD: ขอบทองอ่อน Lux ---------- */
.page--shop-ebook .cardGold{
  background: rgba(18,20,24,.55);
  border: 1px solid rgba(201,168,106,.26); /* ✅ gold soft */
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  border-radius: 22px;
}

/* ---------- GRID 2x2: “ชิดแบบหน้าอื่น” แต่ยังสวย ---------- */
/* ใช้กับ: .cardGrid.grid-2x2 และ .productGrid.grid-2x2 */
.page--shop-ebook .grid-2x2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; /* ✅ การ์ดชนกันเหมือนหน้าอื่น */
  align-items: stretch;
}

/* มือถือ: ต้องมีช่องไฟเพื่ออ่านง่าย */
@media (max-width: 820px){
  .page--shop-ebook .grid-2x2{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .page--shop-ebook .grid-2x2 > .cardGold{
    border-radius: 22px;
  }
}

/* ---------- Card typography spacing ---------- */
.page--shop-ebook .cardGold h3{
  margin: 0 0 10px;
  line-height: 1.2;
}

.page--shop-ebook .cardGold p{
  margin: 0;
  color: rgba(245,246,248,.86);
}

.page--shop-ebook .cardGold ul{
  margin: 12px 0 0;
  padding-left: 18px;
}

.page--shop-ebook .price{
  margin: 10px 0 12px;
  font-weight: 700;
}

/* ---------- Recommended badge: ไม่ล้น ไม่ชน ---------- */
.page--shop-ebook .card.recommended{
  position: relative;
  overflow: hidden;
}

.page--shop-ebook .card.recommended .badge{
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(201,168,106,.22);
  border: 1px solid rgba(201,168,106,.35);
  color: rgba(245,246,248,.92);
  font-weight: 700;
  font-size: 13px;
  backdrop-filter: blur(6px);
}

/* ---------- Button: ให้เข้ากับ Lux card ---------- */
.page--shop-ebook .cardGold .btn.primary{
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid rgba(201,168,106,.38);
  background: rgba(201,168,106,.10);
  color: rgba(245,246,248,.92);
  text-decoration: none;
}

.page--shop-ebook .cardGold .btn.primary:hover{
  background: rgba(201,168,106,.16);
  border-color: rgba(201,168,106,.55);
}

/* ---------- ลดความแน่นระหว่างหัวข้อกับกริด ---------- */
.page--shop-ebook #packages .sectionTitle{
  margin-bottom: 10px;
}

.page--shop-ebook #packages .sectionLead{
  margin-bottom: 18px;
}

✅ CSS Override เฉพาะ INSIDE THE BOOK (4 PARTS)

/* ======================================
   SHOP EBOOK PACKAGE
   INSIDE THE BOOK (4 PARTS) – SQUARE CARDS
   ====================================== */

/* scope ให้แคบมาก: เฉพาะ section นี้ */
#packages ~ .section .cardGrid.grid-2x2 .card.cardGold,
.section.softBg .cardGrid.grid-2x2 .card.cardGold{
  border-radius: 0 !important;          /* 🔴 ลบมุมโค้งทั้งหมด */
  border: 1px solid rgba(201,168,106,.28); /* ทองอ่อน Lux */
  background: rgba(18,20,24,.55);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

/* กัน pseudo-element จากไฟล์อื่น */
.section.softBg .cardGrid.grid-2x2 .card.cardGold::before,
.section.softBg .cardGrid.grid-2x2 .card.cardGold::after{
  content: none !important;
}

✅ CSS: บังคับ 2×2 + spacing ที่เหมาะสม (เฉพาะ section นี้)

/* ======================================
   INSIDE THE BOOK (4 PARTS)
   2x2 GRID + LUX SPACING
   ====================================== */

/* grid หลัก */
.section.softBg .cardGrid.grid-2x2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 28px;            /* ช่องไฟแนวตั้ง | แนวนอน */
  margin-top: 24px;
}

/* การ์ดแต่ละใบ */
.section.softBg .cardGrid.grid-2x2 .card{
  padding: 22px 24px;
  min-height: 100%;
}

/* มือถือ / แท็บเล็ตเล็ก */
@media (max-width: 768px){
  .section.softBg .cardGrid.grid-2x2{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ======================================
   DESKTOP ONLY
   INSIDE THE BOOK – 4 PARTS SPACING
   ====================================== */

@media (min-width: 1024px){

  /* เพิ่มช่องไฟระหว่างการ์ด (แนวตั้งสำคัญที่สุด) */
  .section.softBg .cardGrid.grid-2x2{
    gap: 32px 28px;          /* row | column */
    margin-top: 32px;        /* เว้นจากหัวข้อ */
  }

  /* เพิ่ม breathing space ให้การ์ดดูไม่อึดอัด */
  .section.softBg .cardGrid.grid-2x2 .card{
    padding: 26px 28px;
  }

}

/* ======================================
   BEST SELLER BADGE – LUX GOLD
   (เฉพาะ Package 4)
   ====================================== */

.bestSellerCard{
  position: relative;
}

/* ตัวป้าย */
.bestSellerCard .badge.bestSeller{
  position: absolute;
  top: 18px;
  right: 18px;

  padding: 6px 14px;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;

  color: #3b2a12;
  background: linear-gradient(
    135deg,
    #f3d9a4 0%,
    #e6be74 50%,
    #c9a86a 100%
  );

  box-shadow:
    0 6px 18px rgba(201,168,106,.35),
    inset 0 1px 0 rgba(255,255,255,.45);

  z-index: 2;
}

/* กันป้ายชนขอบการ์ดบนจอเล็ก */
@media (max-width: 420px){
  .bestSellerCard .badge.bestSeller{
    top: 14px;
    right: 14px;
    font-size: 12px;
    padding: 5px 12px;
  }
}
✅ CSS แก้เฉพาะ iPhone SE (ขยับป้ายลง)

ใส่ในไฟล์
assets/css2/fixes/98_final_polish.css (ถูกที่แล้ว 👍)

/* iPhone SE / small screen fix */
@media (max-width: 375px) {
  .bestSellerCard {
    position: relative;
  }

  .bestSellerCard .badge.bestSeller {
    top: 18px;        /* ขยับลงมาในพื้นที่ว่าง */
    right: 12px;
    padding: 6px 12px;
    font-size: 11px;
    line-height: 1.2;
  }
}

/* =========================================
   BEST SELLER BADGE — deterministic fix
   Scope: only package card #4
   ========================================= */

/* 1) Anchor card */
#packages .bestSellerCard{
  position: relative;
}

/* 2) Desktop/tablet: badge on top-right (premium look) */
#packages .bestSellerCard .badge.bestSeller{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 7px 12px;
  border-radius: 999px;

  font-size: 12px;
  line-height: 1;
  letter-spacing: .04em;
  font-weight: 700;

  background: rgba(201,168,106,.16);
  border: 1px solid rgba(201,168,106,.55);
  color: rgba(245,246,248,.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 3) กันหัวข้อโดนป้ายทับในทุกกรณี (reserve space) */
#packages .bestSellerCard h3{
  padding-top: 30px; /* กันป้ายทับหัวข้อ */
}

/* 4) Small phones (SE / 6S): move badge into normal flow */
@media (max-width: 390px){
  #packages .bestSellerCard .badge.bestSeller{
    position: static !important;  /* kill absolute */
    margin: 0 0 10px 0;
  }

  #packages .bestSellerCard h3{
    padding-top: 0; /* เพราะ badge ไม่ลอยแล้ว */
  }
}

/* 5) iPhone 6S specific safety (บางที viewport=375 แต่ scale เพี้ยน) */
@media (max-width: 375px){
  #packages .bestSellerCard .badge.bestSeller{
    margin-bottom: 12px;
  }
}

✅ FIX iPhone 6S (375×667) — ทำให้การ์ดกว้างขึ้น + ปุ่มไม่ล้น/ไม่ซ้อน

/* =========================================
   SHOP: iPhone 6S only
   - widen usable space (reduce side padding)
   - force cards to full width
   - make button wrap + never overflow
   ========================================= */

@media (width: 375px) and (height: 667px) and (orientation: portrait){

  /* 0) ลดขอบซ้ายขวาที่ "กินพื้นที่" (นี่คือสาเหตุหลักที่การ์ดแคบ) */
  .section .container{
    padding-left: 10px !important;
    padding-right: 10px !important;
    max-width: 100% !important;
  }

  /* 1) ให้กริดเป็น 1 คอลัมน์เต็มพื้นที่ */
  .productGrid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* 2) ปลดล็อคความแคบของการ์ด (ถ้ามี max-width เดิมซ่อนอยู่) */
  .productGrid .pCard{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* 3) กันข้อความ/ปุ่มดันล้น */
  .productGrid .pBody{
    min-width: 0 !important;
  }

  /* 4) ปุ่ม: ให้ "ห่อบรรทัด" ได้ + ไม่ล้นการ์ดแน่นอน */
  .productGrid .pBtn{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    white-space: normal !important;     /* ห่อบรรทัด */
    overflow-wrap: anywhere !important; /* กันคำยาว */
    word-break: break-word !important;

    text-align: center !important;
    line-height: 1.25 !important;
    padding: 12px 12px !important;
    min-height: 44px !important;        /* แตะง่าย */
    box-sizing: border-box !important;
  }
}

/* ================================
   SITE FOOTER – HARD CENTER LOCK
   ================================ */

.siteFooter{
  width: 100%;
  margin: 40px auto 0;
  padding: 24px 16px;

  display: flex;
  justify-content: center;
  align-items: center;

  text-align: center;
  box-sizing: border-box;
}

🔒 ล็อก layout HERO ซ้าย–ขวา

.productHero .heroGrid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 1024px) {
  .productHero .heroGrid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

🔒 ฝั่งซ้าย: ข้อความ + CTA

.heroText {
  max-width: 560px;
}

.heroText h1 {
  margin-bottom: 16px;
}

.heroText .lead {
  margin-bottom: 16px;
}

.heroText p {
  margin-bottom: 20px;
}

🔒 CTA ให้อยู่ใต้ข้อความ และชัด

.ctaRow--hero {
  display: flex;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.ctaRow--hero .btn {
  padding: 14px 28px;
  font-size: 15px;
  border-radius: 999px;
}

ปุ่มทอง (ถ้ายังไม่มี)

.btnGold,
.btn.primary {
  background: linear-gradient(135deg, #f3d27a, #caa24a);
  color: #111;
  border: none;
}

.btnGold:hover {
  filter: brightness(1.05);
}

🔒 ปุ่มรอง

.btnGhost {
  border: 1px solid rgba(255, 215, 140, 0.5);
  color: #f5e6c8;
  background: transparent;
}

.heroMedia {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__img {
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}

/* ================================
   HERO PRODUCT – DESKTOP FIX
   ================================ */
@media (min-width: 1100px){

  /* ขยายสัดส่วนซ้าย-ขวา */
  .heroGrid--compact{
    grid-template-columns: 1.4fr 1.2fr; /* เดิม ~1.15 / 0.85 */
    gap: 48px;
  }

  /* ฝั่งข้อความ → กินพื้นที่มากขึ้น */
  .heroText--compact{
    max-width: 760px;
  }

  .heroText--compact h1{
    font-size: clamp(40px, 3.5vw, 56px);
  }

  .heroText--compact .lead{
    font-size: 18px;
    line-height: 1.65;
    max-width: 680px;
  }

  /* ปุ่ม CTA ชิดซ้ายชัด */
  .heroText--compact .ctaRow{
    margin-top: 26px;
    justify-content: flex-start;
  }

  /* ฝั่งรูป → ขยาย “แรง” */
  .heroMedia--compact{
    max-width: 680px;   /* เดิม ~520 */
  }

  .hero__img--compact{
    width: 100%;
    transform: scale(1.18); /* ขยายสายตา ~2+ feeling */
    transform-origin: center right;
  }
}

/* =========================================================
   shop-ebook-package ONLY (safe override)
   ========================================================= */
body.page--shop-ebook {
  /* กัน layout เพี้ยนจาก flex/global */
  min-height: 100vh;
  display: block !important;
}

/* main ไม่ไปดัน footer หล่นยาวผิดปกติ */
body.page--shop-ebook main.pageMain {
  display: block;
}

/* Footer: ต้องอยู่ "ใต้ CTA" และ "ตรงกลาง" */
body.page--shop-ebook footer,
body.page--shop-ebook .siteFooter {
  width: 100%;
  max-width: 100%;
  margin: 28px auto 0 !important;
  padding: 18px 12px 28px;
  text-align: center !important;

  /* กันถูก flex ดันไปขวา/มี alignment แปลก */
  display: block !important;
  justify-content: center !important;
  align-items: center !important;
}

/* ถ้า footer อยู่ใน section เดียวกับ CTA แล้วโดน flex/align */
body.page--shop-ebook .closingCtaSection,
body.page--shop-ebook .closingCtaSection .container {
  display: block;
}

/* กันมี extra space แปลก ๆ ใต้สุด (ถ้ามี margin/padding จาก section) */
body.page--shop-ebook .closingCtaSection {
  padding-bottom: 0;
}