/* ==========================================================================
   Healthy2FitNFirm — Site layout
   โครงหน้าเว็บ: header, section, hero, footer, grid utilities
   ========================================================================== */

/* เว้นที่ให้แถบ CTA ลอยล่างจอ (มือถือ) */
body{padding-bottom:96px}
@media(min-width:900px){body{padding-bottom:0}}

/* ---------- Container / Section ---------- */
.wrap{max-width:var(--content-max);margin:0 auto;padding-inline:var(--gutter-mobile)}
@media(min-width:768px){.wrap{padding-inline:var(--gutter-desktop)}}
.sect{padding-block:var(--section-y-mobile)}
@media(min-width:768px){.sect{padding-block:var(--section-y-desktop)}}
#top{padding-top:var(--space-10)}
@media(min-width:768px){#top{padding-top:var(--section-y-desktop)}}

.sect--cream{background:var(--cream-200)}
.sect--white{background:var(--white)}
.sect--mint{background:var(--surface-mint)}
.sect--lime{background:var(--lime-100)}
.sect--dark{background:var(--surface-inverse);color:rgba(255,255,255,.82)}
.sect--dark .h2f-secthead__title,.sect--dark h2,.sect--dark h3,.sect--dark h4{color:#fff}
.sect--dark .h2f-secthead__eyebrow{color:var(--mint-300)}
.sect--dark .h2f-secthead__sub,.sect--dark p{color:rgba(255,255,255,.78)}
.sect--dark .h2f-steps__num{background:var(--lime-500);color:var(--text-on-lime)}
.sect--dark .h2f-steps__title{color:#fff}
.sect--dark .h2f-steps__desc{color:rgba(255,255,255,.72)}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(251,249,244,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-subtle)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-height:64px}
.hdr__mark{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--green-700);border:0;text-decoration:none}
.hdr__mark:hover{color:var(--green-800)}
.hdr__mark span{color:var(--peach-500)}
.hdr__nav{display:none;gap:var(--space-5)}
.hdr__nav a{font-size:15px;color:var(--ink-700);border:0;white-space:nowrap}
.hdr__nav a:hover{color:var(--green-700)}
.hdr__nav a.hdr__nav--on{color:var(--green-700);font-weight:var(--weight-medium)}
/* หน้าแรกเป็นไอคอนบ้าน — ต้องจัดกึ่งกลางกับข้อความเมนูอื่นและมีพื้นที่กดพอ */
.hdr__nav-home{display:inline-flex;align-items:center;justify-content:center;padding-inline:2px}
.hdr__nav-home:hover{color:var(--green-700)}
/* 1120px คือค่าตามดีไซน์ — เมนูเต็มมี 8 รายการ ถ้าลดกว่านี้จะเบียดกับโลโก้และปุ่ม */
@media(min-width:1120px){.hdr__nav{display:flex}}
.hdr__actions{display:flex;gap:var(--space-2);align-items:center}
.hdr__cta{display:none}
.hdr__burger{display:inline-flex}
@media(min-width:600px){.hdr__cta{display:inline-flex}}
@media(min-width:1120px){.hdr__burger{display:none}}
.hdr__drawer{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3) var(--gutter-mobile) var(--space-5);background:var(--cream-100);border-top:1px solid var(--border-subtle);box-shadow:var(--shadow-card);animation:h2f-rise var(--dur-base) var(--ease-out)}
.hdr__drawer a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--tap-min);font-family:var(--font-display);font-size:17px;font-weight:500;color:var(--green-800);border:0;border-bottom:1px solid var(--border-subtle);text-decoration:none}
.hdr__drawer a:last-of-type{border-bottom:0}
.hdr__drawer a:hover{color:var(--peach-600)}
.hdr__drawer .h2f-icon{color:var(--green-600)}
.hdr__drawer .h2f-btn{margin-top:var(--space-3)}

/* ---------- Hero ---------- */
.hero{display:grid;gap:var(--space-8);align-items:center}
@media(min-width:900px){.hero{grid-template-columns:1.05fr .95fr;gap:var(--space-16)}}
.hero__h1{font-family:var(--font-display);font-size:clamp(30px,4.4vw,var(--text-hero-desktop));font-weight:600;line-height:1.2;letter-spacing:-.015em;color:var(--green-800);margin:16px 0 var(--space-4);word-break:keep-all;overflow-wrap:normal}
.hero__sub{font-size:var(--text-lead);color:var(--ink-700);line-height:var(--leading-loose);margin:0 0 var(--space-6);max-width:46ch}
.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-6)}

/* ---------- รูปจริง ----------
   ครอปไฟล์ให้ตรงอัตราส่วนไว้แล้ว object-fit:cover เป็นแค่ตัวกันพลาด
   เผื่อเปลี่ยนไฟล์ใหม่ที่สัดส่วนไม่ตรง ภาพจะถูกตัดไม่ใช่ยืด */
.img-fit{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--radius-lg)}

/* ---------- Placeholder รูปภาพ (แทนที่ด้วย <img> ภายหลัง) ---------- */
.ph{background:var(--cream-300);border:1px dashed var(--cream-400);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink-500);font-size:var(--text-caption);padding:var(--space-4);line-height:1.5}

/* ---------- Grid / stack utilities ---------- */
.grid3{display:grid;gap:var(--space-4)}
@media(min-width:768px){.grid3{grid-template-columns:repeat(3,1fr);gap:var(--space-6)}}
.grid2{display:grid;gap:var(--space-4)}
@media(min-width:900px){.grid2{grid-template-columns:1fr 1fr;gap:var(--space-8)}}
.stack{display:flex;flex-direction:column;gap:var(--space-6)}
.row{display:flex;flex-wrap:wrap;gap:var(--space-3)}
/* มือถือ: ปุ่ม CTA ใหญ่ยืดเต็มความกว้าง ข้อความในปุ่มจึงอยู่กึ่งกลางเอง
   และขอบปุ่มตรงกับขอบข้อความรอบๆ พอดี
   ถ้าใช้ justify-content:center เฉยๆ ปุ่มจะลอยอยู่กลาง ระหว่างข้อความที่ชิดซ้าย
   ทั้งด้านบนและด้านล่าง ทำให้แนวซ้ายของบล็อกขาดจังหวะ */
@media(max-width:599px){
  .hero__ctas .h2f-btn,
  .row>.h2f-btn--lg{flex:1 1 100%}
}

.usp{display:flex;flex-direction:column;gap:var(--space-4);margin:0;padding:0;list-style:none}
.usp li{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-body-md);color:var(--ink-700);line-height:var(--leading-loose)}
.usp .h2f-icon{color:var(--green-600);margin-top:5px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px}
.stats .h2f-card{display:flex;flex-direction:column;justify-content:center;gap:2px}
.stats__n{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--green-800);line-height:1.25;white-space:nowrap}
.stats__l{font-size:13px;color:var(--ink-700);line-height:1.4}

.socials{display:flex;gap:var(--space-4)}

/* QR ในส่วนติดต่อ — จำกัดความกว้างไม่ให้การ์ดยืดเต็มคอลัมน์จนดูใหญ่เกินปุ่ม CTA
   แล้วจัดกึ่งกลางคอลัมน์พร้อมไอคอนโซเชียล ให้สองอย่างนี้อยู่แกนเดียวกัน */
.contact__qr{width:100%;max-width:300px;margin-inline:auto}
/* ปุ่ม QR และไอคอน อยู่บนแกนกึ่งกลางเดียวกันทั้งก้อน
   อ่านเป็น "พื้นที่สำหรับลงมือติดต่อ" ที่แยกออกจากหัวข้อด้านบนชัดเจน */
#contact .row,
#contact .socials{justify-content:center}
@media(max-width:599px){.contact__qr{max-width:none}}

/* ---------- Page hero (สำหรับหน้ารอง) ---------- */
.pagehero{padding-block:var(--space-10) var(--space-8);background:var(--cream-200)}
@media(min-width:768px){.pagehero{padding-block:var(--space-16) var(--space-12)}}
.crumbs{font-size:var(--text-caption);color:var(--ink-500);margin:0 0 var(--space-4)}
.crumbs a{border:0;color:var(--green-700)}

/* ---------- Carousel ---------- */
.carousel{position:relative;display:flex;flex-direction:column;gap:var(--space-4)}
.carousel__arrow{position:absolute;top:calc(50% - 24px);z-index:5;background:rgba(255,255,255,.96);border-color:var(--border-default);box-shadow:var(--shadow-card);backdrop-filter:blur(6px)}
.carousel__arrow--prev{left:-8px}
.carousel__arrow--prev .h2f-icon{transform:rotate(180deg)}
.carousel__arrow--next{right:-8px}
.carousel__arrow:disabled{opacity:0;pointer-events:none}
@media(min-width:1000px){.carousel__arrow{display:none}}
.carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(268px,1fr);gap:var(--space-6);overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding:4px 2px var(--space-2);margin-inline:-2px;scrollbar-width:none}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track>*{scroll-snap-align:start}
@media(min-width:768px){.carousel__track{grid-auto-columns:minmax(300px,1fr)}}
@media(min-width:1000px){.carousel__track{grid-auto-columns:minmax(0,1fr);grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible}}

/* ---------- Filter (tabs บนจอใหญ่ / select บนมือถือ) ---------- */
.filter{max-width:520px;width:100%;margin:0 auto}
/* ใช้ในหน้าผลิตภัณฑ์ ที่มีแท็บเยอะกว่าจึงต้องกว้างเต็มแถว */
.filter--wide{max-width:none;margin:0 auto}
.filter--wide .h2f-tabs__tab{padding-inline:var(--space-4)}
.filter__tabs{display:none}
.filter__select{display:flex;flex-direction:column;gap:6px}
.filter__lbl{font-family:var(--font-display);font-size:var(--text-body-sm);font-weight:var(--weight-medium);color:var(--green-800)}
/* บนจอใหญ่ให้กล่องกว้างเท่าที่แท็บต้องการจริง จะได้ไม่มีแถบเลื่อน
   (ชื่อหมวดยาวขึ้นแล้ว ความกว้างตายตัว 520px ไม่พออีกต่อไป) */
@media(min-width:768px){
  .filter__tabs{display:block}
  .filter__select{display:none}
  .filter{width:fit-content;max-width:100%}
}

/* ---------- แถบ CTA ลอย: ย่อเป็นวงกลมบนจอใหญ่ ----------
   บนจอใหญ่ปุ่มเป็นวงกลม 1:1 มีแค่ไอคอน พอเอาเมาส์ชี้ค่อยคลี่ข้อความออกมา
   ทำเฉพาะจอ >=900px เพราะมือถือไม่มี hover และแถบล่างจอต้องอ่านออกตั้งแต่แรก
   :focus-within ทำให้คนที่กด Tab เห็นข้อความด้วย ไม่ใช่แค่คนใช้เมาส์ */
@media(min-width:900px){
  .h2f-floatbar .h2f-btn{
    min-width:56px;min-height:56px;height:56px;
    padding-inline:var(--space-4);justify-content:center;gap:0;overflow:hidden;
    transition:gap var(--dur-base) var(--ease-out),
               background var(--dur-base) var(--ease-out),
               box-shadow var(--dur-base) var(--ease-out);
  }
  /* ความกว้างปุ่มวิ่งตามข้อความ จึงขยายลื่นโดยไม่ต้องใส่ transition ที่ตัวปุ่ม */
  .h2f-floatbar .h2f-btn>span{
    max-width:0;opacity:0;white-space:nowrap;overflow:hidden;
    transition:max-width var(--dur-base) var(--ease-out),
               opacity var(--dur-fast) var(--ease-out);
  }
  .h2f-floatbar:hover .h2f-btn,
  .h2f-floatbar:focus-within .h2f-btn{gap:var(--space-2)}
  .h2f-floatbar:hover .h2f-btn>span,
  .h2f-floatbar:focus-within .h2f-btn>span{max-width:220px;opacity:1}
}

/* ---------- ช่องล่อบอท (honeypot) ----------
   ต้องซ่อนแบบที่บอทยังเห็นใน HTML แต่คนไม่เห็นบนจอ
   จึงใช้วิธีดันออกนอกจอ ไม่ใช้ display:none เพราะบอทรุ่นใหม่ข้ามช่องที่ถูกซ่อนแบบนั้น */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Toast host ---------- */
.toast-host{position:fixed;left:16px;right:16px;bottom:104px;z-index:90;display:flex;justify-content:center;pointer-events:none}
@media(min-width:900px){.toast-host{bottom:24px;left:auto;right:auto;inset-inline:0}}

/* ---------- Footer ---------- */
.footer{background:var(--surface-inverse);color:rgba(255,255,255,.72);padding-block:var(--space-16) var(--space-8)}
/* เว้นที่ให้ปุ่ม CTA ลอย "เฉพาะตอนย่อเป็นวงกลม" เท่านั้น
   ตอนกางออกยอมให้ซ้อนทับได้ เพราะเกิดขึ้นแค่ชั่วคราวตอนเอาเมาส์ชี้
   64px พอสำหรับวงกลม 56px ที่ห่างขอบจอ 24px ในช่วงจอ 900-1320px
   จอกว้างกว่า 1320px ขอบ footer อยู่ห่างจากขอบจอมากพอแล้ว ไม่ต้องเว้นเลย */
@media(min-width:900px){.footer__bar{padding-right:64px}}
@media(min-width:1320px){.footer__bar{padding-right:0}}
.footer__bar a{color:rgba(255,255,255,.86);border-bottom:0;transition:color var(--dur-fast) var(--ease-out)}
.footer__bar a:hover{color:var(--mint-300)}
.footer__grid{display:grid;gap:var(--space-10) var(--space-8);grid-template-columns:1fr}
@media(min-width:640px){.footer__grid{grid-template-columns:1fr 1fr}}
/* 3 กลุ่ม: แบรนด์+ติดต่อ / เมนู / QR ไลน์
   ใช้ auto + space-between ให้แต่ละกลุ่มกว้างเท่าเนื้อหาจริง แล้วกระจายช่องว่างเท่าๆ กัน
   ถ้าใช้ fr คอลัมน์จะกว้างเกินเนื้อหา ทำให้ช่องว่างสองข้างไม่เท่ากันและดูโหวงตรงกลาง
   เมนูแยกเป็น 2 คอลัมน์เพื่อให้กลุ่มกลางมีน้ำหนักพอ ไม่ลอยอยู่กลางที่ว่าง */
/* 3 คอลัมน์: แบรนด์ / ติดต่อโค้ช / ติดตามเรา
   คอลัมน์แรกกว้างกว่าเพราะมีสโลแกน อีกสองคอลัมน์เนื้อหาสั้น */
@media(min-width:1000px){.footer__grid{grid-template-columns:1.6fr 1fr 1fr;gap:var(--space-12)}}
.footer__col{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
/* จอเล็กกว่า 1000px footer เรียงเป็นก้อนเดียว จัดกึ่งกลางแล้วดูเป็นระเบียบกว่าชิดซ้าย
   ที่ปล่อยให้ QR ลอยอยู่ริมซ้ายโดยมีที่ว่างข้างขวา
   จอใหญ่ยังชิดซ้าย เพราะจัดเป็นสองกลุ่มซ้าย-ขวาอยู่แล้ว */
@media(max-width:999px){
  .footer__col{align-items:center;text-align:center}
  .footer__col .h2f-qr{align-items:center;text-align:center}
}
.footer__h{font-family:var(--font-body);font-size:var(--text-caption);font-weight:var(--weight-regular);letter-spacing:0;text-transform:none;color:rgba(255,255,255,.6);margin:0}
.footer__mark{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.01em;color:#fff;line-height:1}
.footer__mark span{color:var(--peach-300)}
.footer__who{font-family:var(--font-display);font-size:15px;font-weight:500;color:var(--mint-300);line-height:1.4}
/* ชื่อโค้ชกับเบอร์โทรเป็นข้อมูลชุดเดียวกัน จึงชิดกันกว่าบล็อกอื่นใน footer__col */
.footer__coach{display:flex;flex-direction:column;gap:4px}
/* padding ขยายพื้นที่กดให้ถึงเกณฑ์นิ้วโป้ง ส่วน margin ลบดึงระยะห่างกลับ
   ไม่ให้ดูห่างจากชื่อโค้ชผิดจังหวะ */
.footer__who-tel{display:inline-flex;align-items:center;gap:6px;width:fit-content;font-family:var(--font-display);font-size:17px;font-weight:600;color:#fff;letter-spacing:.01em;line-height:1.3;border-bottom:0;padding-block:12px;margin-block:-8px}
.footer__who-tel:hover{color:var(--mint-300)}
.footer__who-tel .h2f-icon{color:var(--mint-300)}
/* 44ch — ข้อความปัจจุบันพอดีบรรทัดเดียว และถ้าเปลี่ยนเป็นข้อความจริงที่ยาวกว่านี้
   ก็ยังตัดบรรทัดในช่วงที่อ่านสบาย (เดิม 30ch แคบไป ตัดเป็นสองบรรทัดสั้นๆ) */
.footer__about{font-size:15px;line-height:1.8;margin:0;max-width:44ch;color:rgba(255,255,255,.68)}
/* ลิงก์คำถามที่พบบ่อย — ย้ายลงมาจากเมนูบน เพราะเป็นจุดยึดในหน้าแรก ไม่ใช่หน้าจริง */
.footer__link{display:inline-flex;align-items:center;gap:6px;width:fit-content;font-family:var(--font-display);font-size:15px;font-weight:500;color:rgba(255,255,255,.86);border-bottom:0;padding-block:10px;margin-top:-2px}
.footer__link:hover{color:var(--mint-300)}
.footer__link .h2f-icon{color:var(--mint-300)}
/* ระบุสถานะผู้จำหน่ายอิสระ — เดิมอยู่ในแถบล่างสุด ย้ายมาไว้ใต้สโลแกนให้เห็นชัดกว่า
   ใช้ฟอนต์และขนาดเดียวกับสโลแกนด้านบน ต่างกันแค่สี จะได้อ่านเป็นบล็อกเดียวกัน */
/* อยู่ใต้ชื่อโค้ชซึ่งเป็นสีมิ้นต์ ตัวนี้จึงใช้สีจางกว่า
   ลำดับสายตาจะได้เป็น ชื่อ → บทบาท → เบอร์โทร ไม่แข่งกันเอง */
.footer__role{font-size:14px;line-height:1.6;margin:0;color:rgba(255,255,255,.6)}
.footer__bar{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-8);justify-content:space-between;align-items:baseline;margin-top:var(--space-12);padding-top:var(--space-5);border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:rgba(255,255,255,.6);line-height:1.7}
.footer__bar p{margin:0;max-width:56ch}
/* จอเล็กข้อความสองก้อนตกคนละบรรทัด จัดกึ่งกลางให้เข้ากับส่วนบนของ footer
   ต้องอยู่หลัง .footer__bar ด้านบน ไม่งั้น justify-content:space-between จะทับ */
@media(max-width:999px){.footer__bar{justify-content:center;text-align:center}}
/* จอใหญ่: ข้อความสองก้อนอยู่บรรทัดเดียวกัน space-between ดันลิขสิทธิ์ไปชิดขวา
   มือถือ: ตกบรรทัดใหม่ กลายเป็นก้อนเดียวบนบรรทัด จึงชิดซ้ายตามข้อความด้านบน */
.footer .h2f-qr{width:100%;max-width:200px}