/* ==========================================================================
   Page-specific Styles (Sale Page)
   ========================================================================== */

/* Hero Section */
.p6-hero {
  position: relative;
  width: 100%;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: var(--sp-8);
  overflow: hidden;
}

.p6-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.p6-hero__scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(13, 13, 15, 0.8) 0%, rgba(13, 13, 15, 0.3) 50%, rgba(13, 13, 15, 0.1) 100%);
  z-index: 2;
}

.p6-hero__content {
  position: relative;
  z-index: 3;
  color: var(--medical-white);
}

.p6-hero__title {
  color: var(--medical-white);
  margin-bottom: var(--sp-3);
}

.p6-hero__subtitle {
  color: var(--gold-soft);
  margin-bottom: var(--sp-5);
}

/* Problem Block */
.p6-problem {
  background-color: var(--cream-white);
}
.p6-problem__list {
  list-style: none;
  padding: 0;
}
.p6-problem__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding: var(--sp-4);
  background-color: var(--medical-white);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(13, 13, 15, 0.05);
}
.p6-problem__icon {
  color: var(--err);
  flex-shrink: 0;
}

/* Mechanism / Ingredient Block */
.p6-mechanism {
  background-color: var(--medical-white);
}
.p6-ingredient-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 768px) {
  .p6-ingredient-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .p6-ingredient-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.p6-ingredient-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.p6-ingredient-card__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.p6-ingredient-card__body {
  padding: var(--sp-4);
}

/* Doctor Block */
.p6-doctor {
  background-color: var(--deep-green);
  color: var(--medical-white);
}
.p6-doctor__title, .p6-doctor__text {
  color: var(--medical-white);
}
.p6-doctor__image {
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-5);
}

/* Review Block */
.p6-review {
  background-color: var(--cream-white);
}
.p6-review__subheading {
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: var(--fs-body-lg);
}
.p6-review-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.p6-review-gallery__item {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--medical-white);
  aspect-ratio: 4 / 5;
}
.p6-review-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease;
}
.p6-review-gallery__item:hover img,
.p6-review-gallery__item:focus-visible img {
  transform: scale(1.02);
}
.p6-review-videos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
.p6-review-video {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--deep-black);
  aspect-ratio: 16 / 9;
}
.p6-review-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
@media (min-width: 768px) {
  .p6-review-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .p6-review-videos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.p6-review-card {
  background-color: var(--medical-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  box-shadow: 0 4px 16px rgba(13, 13, 15, 0.05);
}
.p6-review-card__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.p6-review-card__stars {
  color: var(--champagne-gold);
}
.p6-review-card__disclaimer {
  font-size: var(--fs-caption);
  color: var(--ink-60);
  margin-top: var(--sp-3);
  font-style: italic;
}
.p6-review__disclaimer {
  margin-top: var(--sp-5);
  color: var(--ink-60);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

/* FAQ Block */
.p6-faq {
  background-color: var(--medical-white);
}
.p6-faq__item {
  border-bottom: 1px solid var(--line);
  padding: var(--sp-4) 0;
}
.p6-faq__item summary {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-lg);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.p6-faq__item summary::-webkit-details-marker {
  display: none;
}
.p6-faq__item summary::after {
  content: '+';
  font-size: 24px;
  color: var(--champagne-gold);
}
.p6-faq__item[open] summary::after {
  content: '−';
}
.p6-faq__content {
  padding-top: var(--sp-3);
  color: var(--ink-60);
}

/* Footer */
.p6-footer {
  background-color: var(--deep-black);
  color: var(--medical-white);
  padding: var(--sp-8) 0 calc(var(--sp-8) + 88px) 0; /* extra padding for sticky CTA */
  text-align: center;
}
.p6-footer a {
  color: var(--gold-soft);
}

/* Consent manage button must be styled before consent.js interaction.
   consent.js creates this button during init, but intentionally injects the
   full banner/modal stylesheet only when that UI is needed. Keeping the
   footer-critical rules in the eagerly loaded stylesheet prevents a native
   browser-button flash for visitors with a current consent decision. */
.p6-footer .p6-consent-manage-link {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-target-min);
  margin: 0;
  padding: var(--sp-2) 0;
  border: 0;
  background-color: var(--deep-black);
  background-image: none;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}
.p6-footer .p6-consent-manage-link:hover,
.p6-footer .p6-consent-manage-link:focus-visible,
.p6-footer .p6-consent-manage-link:active {
  border: 0;
  background-color: var(--deep-black);
  background-image: none;
  box-shadow: none;
  color: var(--gold-soft);
}

/* Print Styles */
@media print {
  .p6-sticky-cta,
  .p6-hero__bg,
  .p6-hero__scrim {
    display: none !important;
  }
  .p6-hero {
    min-height: auto;
    color: #000;
  }
  .p6-hero__title,
  .p6-hero__subtitle,
  .p6-hero__content {
    color: #000;
  }
  body {
    padding-bottom: 0;
    color: #000;
    background: #fff;
  }
  .p6-card, .p6-tier-card {
    border: 1px solid #000;
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   Gate T0 remediation — 15 ส.ค. 2026
   หลักฐาน: projects/06_dro456_com_enhancement/04_qa/evidence_T0_2026-08-15/
   ========================================================================== */

/* --- T0/H6 · contrast 1.56:1 บน Mechanism block ------------------------
   ต้นเหตุ: template เรียก wp_head() จึงได้ Kadence global inline CSS ติดมาด้วย
   Kadence ตั้ง heading = Palette Color 3 (#1A202C) ทับสีที่ section ส่งต่อมา
   วิธีแก้: P6 ประกาศสีเองด้วย class selector ไม่พึ่ง inheritance และไม่พึ่ง parent */
.p6-mechanism .p6-block__heading,
.p6-mechanism .p6-mechanism__title,
.p6-mechanism .p6-mechanism__desc,
.p6-mechanism .p6-mechanism__number {
  color: var(--medical-white);
}
.p6-mechanism .p6-mechanism__number {
  color: var(--champagne-gold);
}

/* --- T0/H6 · focus ต้องมองเห็นได้บนการ์ด tier -------------------------
   native radio เป็น opacity:0 การวาด outline บนตัวมันจึงไม่ปรากฏบนจอ
   ย้าย indicator ไปไว้ที่การ์ดที่มองเห็นจริง (WCAG 2.4.7) */
.p6-tier-card:focus-within {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
@supports selector(:has(*)) {
  .p6-tier-card:focus-within { outline: none; }
  .p6-tier-card:has(.p6-tier-card__radio:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }
}

/* --- T0/H6 · tap target ของลิงก์ท้ายหน้า -------------------------------
   min-height ไม่มีผลกับ inline element จึงต้องเป็น inline-flex */
.p6-legal-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}
.p6-legal-links__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target-min);
  padding: 0 var(--sp-3);
  text-decoration: underline;
  /* ⛔ ห้ามกำหนดสีตายตัวตรงนี้ — partial นี้ถูก include 2 ที่ที่พื้นหลังต่างกัน
     (footer พื้นเข้ม กับ .p6-legal-block พื้น soft-beige)
     การ hardcode gold-soft ทำให้ฝั่งพื้นอ่อนเหลือ 1.09:1 — ให้ inherit ตามบริบทแทน */
  color: inherit;
}
.p6-footer .p6-legal-links__link { color: var(--gold-soft); }

/* --- T0/H1 · Video facade (ไม่มี third-party request ก่อนกดเล่น) ------- */
.p6-review__consent-note {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-60);
  margin: 0 0 var(--sp-4);
}
.p6-video-facade {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--deep-green) 0%, var(--deep-black) 100%);
}
.p6-video-facade iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.p6-video-facade__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  height: 100%;
  min-height: var(--tap-target-min);
  padding: var(--sp-4);
  border: 0;
  background: transparent;
  color: var(--medical-white);
  font-family: inherit;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  text-align: center;
  cursor: pointer;
}
.p6-video-facade__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--champagne-gold);
  position: relative;
  flex-shrink: 0;
}
.p6-video-facade__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--deep-black);
}
.p6-video-facade__label {
  font-weight: var(--fw-semibold);
  color: var(--medical-white);
}
.p6-video-facade__hint {
  color: var(--gold-soft);
}
.p6-video-facade__nojs {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target-min);
  padding: 0 var(--sp-3);
  color: var(--gold-soft);
}

/* ==========================================================================
   S2 — โครงสร้างการ์ด tier (18 ส.ค. 2026)
   หลักฐาน: 04_qa/evidence_S2_2026-08-18/
   --------------------------------------------------------------------------
   ก่อนหน้านี้ .p6-tier-card__content / __label / __sublabel / __price / __fda
   ไม่เคยมีกฎ layout เลย ทุก span จึงไหลเป็น inline ต่อกันเป็นย่อหน้าเดียว
   ผลคือชื่อแพ็กเกจ รายละเอียด ราคา และเลข อย. ปนกันจนอ่านไม่ออกว่าอะไรคือราคา
   (เห็นชัดใน screenshot รอบแรกของ S2) ตรงนี้จัดโครงขั้นต่ำให้ "เส้นทางซื้อ"
   ใช้งานและตรวจสอบได้จริง ส่วนงานตกแต่งเต็มรูปแบบอยู่ใน S3
   ========================================================================== */
.p6-tier-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.p6-tier-card__label {
  font-weight: var(--fw-bold);
  line-height: 1.4;
}
.p6-tier-card__sublabel {
  font-size: var(--fs-caption);
  color: var(--ink-60);
  line-height: 1.6;
}
/* ราคาเต็มกับราคาขายอยู่บรรทัดเดียวกัน จัดชิด baseline ให้ตัวเลขไม่เต้น */
.p6-tier-card__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.p6-tier-card__price {
  font-family: var(--font-eng);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  font-size: 28px;
  line-height: 1.2;
  color: var(--ink);
}
/* ราคาขีดฆ่า — เล็กกว่าและจางกว่าเสมอ เพื่อไม่ให้ถูกอ่านสลับกับราคาที่ต้องจ่าย
   ใช้ --ink-60 ที่วัด contrast ไว้แล้ว ไม่ตั้งสีใหม่เอง */
.p6-tier-card__full {
  font-family: var(--font-eng);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-caption);
  color: var(--ink-60);
  text-decoration-thickness: 1px;
}
/* เลข อย. เป็นข้อมูลกำกับตามกฎหมาย ต้องอ่านออกแต่ไม่แย่งสายตาจากราคา */
.p6-tier-card__fda {
  font-size: var(--fs-caption);
  color: var(--ink-60);
  line-height: 1.6;
}