/* ==========================================================================
   Healthy2FitNFirm — Component styles
   คลาสขึ้นต้นด้วย h2f- ทั้งหมด และใช้ค่าจาก tokens.css เท่านั้น (ห้าม hardcode สี)
   ========================================================================== */

/* ---------- Button ---------- */
.h2f-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--weight-semibold);line-height:1;border:1.5px solid transparent;border-radius:var(--radius-button);cursor:pointer;text-decoration:none;transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out);white-space:nowrap}
.h2f-btn:active{transform:scale(var(--press-scale))}
/* ปุ่มที่เป็น <a> จะโดน a:hover{border-bottom-color:currentColor} จาก base.css
   ทำให้ขอบล่างของปุ่มเปลี่ยนสี = วงขอบดูขาดตอน จึงต้องล็อกสีขอบล่างไว้ */
a.h2f-btn:hover{border-bottom-color:transparent}
a.h2f-btn--outline:hover{border-bottom-color:var(--border-primary)}
.h2f-btn--md{min-height:var(--tap-min);padding:0 var(--space-6);font-size:var(--text-body-md)}
.h2f-btn--sm{min-height:40px;padding:0 var(--space-4);font-size:var(--text-body-sm)}
.h2f-btn--lg{min-height:56px;padding:0 var(--space-8);font-size:var(--text-lead)}
.h2f-btn--block{display:flex;width:100%}
.h2f-btn--accent{background:var(--surface-accent);color:var(--text-on-accent);box-shadow:var(--shadow-cta)}
.h2f-btn--accent:hover{background:var(--surface-accent-hover);color:var(--text-on-accent);box-shadow:var(--shadow-card-hover)}
.h2f-btn--primary{background:var(--surface-primary);color:var(--text-on-primary);box-shadow:var(--shadow-sm)}
.h2f-btn--primary:hover{background:var(--surface-primary-hover);color:var(--text-on-primary)}
.h2f-btn--outline{background:transparent;color:var(--green-700);border-color:var(--border-primary)}
.h2f-btn--outline:hover{background:var(--mint-100);color:var(--green-800)}
.h2f-btn--ghost{background:transparent;color:var(--green-700)}
.h2f-btn--ghost:hover{background:var(--mint-100);color:var(--green-800)}
.h2f-btn--line{background:#06C755;color:#fff;box-shadow:var(--shadow-sm)}
.h2f-btn--line:hover{background:#05A948;color:#fff}
.h2f-btn[disabled],.h2f-btn--disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}

/* ---------- IconButton ---------- */
.h2f-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap-min);height:var(--tap-min);border-radius:var(--radius-pill);border:1.5px solid transparent;background:transparent;color:var(--green-700);cursor:pointer;transition:background var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.h2f-iconbtn:hover{background:var(--mint-100)}
.h2f-iconbtn:active{transform:scale(var(--press-scale))}
/* เหตุผลเดียวกับ .h2f-btn — กันวงกลมขอบขาดตอนตอน hover */
a.h2f-iconbtn:hover{border-bottom-color:transparent}
a.h2f-iconbtn--outline:hover{border-bottom-color:var(--border-default)}
a.h2f-iconbtn--onDark:hover{border-bottom-color:rgba(255,255,255,.45)}
.h2f-iconbtn--sm{width:40px;height:40px}
.h2f-iconbtn--solid{background:var(--surface-primary);color:var(--text-on-primary)}
.h2f-iconbtn--solid:hover{background:var(--surface-primary-hover)}
.h2f-iconbtn--accent{background:var(--surface-accent);color:var(--text-on-accent);box-shadow:var(--shadow-cta)}
.h2f-iconbtn--accent:hover{background:var(--surface-accent-hover)}
.h2f-iconbtn--outline{border-color:var(--border-default);background:var(--surface-card)}
.h2f-iconbtn--onDark{background:transparent;border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.88)}
.h2f-iconbtn--onDark:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45);color:#fff}

/* ---------- Icon ---------- */
.h2f-icon{display:inline-block;flex:none;vertical-align:middle;color:inherit;overflow:visible}

/* ---------- Badge / Tag ---------- */
.h2f-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:var(--text-caption);font-weight:var(--weight-semibold);line-height:1;padding:6px 12px;border-radius:var(--radius-pill)}
.h2f-badge--mint{background:var(--mint-300);color:var(--green-900)}
.h2f-badge--peach{background:var(--peach-100);color:var(--peach-700)}
.h2f-badge--green{background:var(--green-700);color:var(--white)}
.h2f-badge--lime{background:var(--lime-500);color:var(--text-on-lime)}
.h2f-badge--neutral{background:var(--cream-300);color:var(--ink-700)}
.h2f-badge--success{background:var(--status-success-bg);color:var(--status-success)}
.h2f-badge--warning{background:var(--status-warning-bg);color:var(--status-warning)}
.h2f-badge--error{background:var(--status-error-bg);color:var(--status-error)}
.h2f-tag{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-body-sm);color:var(--ink-700);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:8px 14px;line-height:1;transition:border-color var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out)}
.h2f-tag--selected{background:var(--mint-100);border-color:var(--green-600);color:var(--green-800);font-weight:var(--weight-medium)}
.h2f-tag--clickable{cursor:pointer}
.h2f-tag--clickable:hover{border-color:var(--green-600)}
.h2f-tag__remove{display:inline-flex;border:0;background:none;padding:0;cursor:pointer;color:inherit;opacity:.6}
.h2f-tag__remove:hover{opacity:1}

/* ---------- Card ---------- */
.h2f-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--space-6);transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.h2f-card--flat{box-shadow:none}
.h2f-card--mint{background:var(--surface-mint);border-color:var(--mint-200)}
.h2f-card--cream{background:var(--surface-raised);border-color:var(--border-subtle)}
.h2f-card--interactive{cursor:pointer}
.h2f-card--interactive:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px)}
.h2f-card--pad-sm{padding:var(--space-4)}
.h2f-card--pad-lg{padding:var(--space-8)}
.h2f-card--pad-none{padding:0;overflow:hidden}

/* ---------- SectionHeading ---------- */
.h2f-secthead{display:flex;flex-direction:column;gap:var(--space-3);max-width:var(--prose-max)}
.h2f-secthead--center{align-items:center;text-align:center;margin-inline:auto}
.h2f-secthead__eyebrow{font-family:var(--font-display);font-size:var(--text-caption);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--green-600)}
.h2f-secthead__title{font-family:var(--font-display);font-size:var(--text-h1);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--text-heading);margin:0}
.h2f-secthead__sub{font-size:var(--text-body-lg);line-height:var(--leading-loose);color:var(--ink-700);margin:0}
@media(min-width:768px){.h2f-secthead__title{font-size:var(--text-h1-desktop)}}

/* ---------- Form controls ---------- */
.h2f-field{display:flex;flex-direction:column;gap:6px}
.h2f-field__label{font-family:var(--font-display);font-size:var(--text-body-sm);font-weight:var(--weight-medium);color:var(--green-800);line-height:1.4}
.h2f-field__hint{font-size:var(--text-caption);color:var(--text-muted);line-height:1.5}
.h2f-field__error{font-size:var(--text-caption);color:var(--status-error);line-height:1.5}
.h2f-field__req{color:var(--peach-600)}
.h2f-input,.h2f-textarea,.h2f-select{width:100%;font-family:var(--font-body);font-size:var(--text-body-md);color:var(--text-body);background:var(--surface-card);border:1.5px solid var(--border-default);border-radius:var(--radius-input);padding:0 var(--space-4);min-height:var(--tap-min);transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.h2f-textarea{padding:var(--space-3) var(--space-4);min-height:120px;line-height:var(--leading-normal);resize:vertical}
.h2f-input::placeholder,.h2f-textarea::placeholder{color:var(--ink-300)}
.h2f-input:hover,.h2f-textarea:hover,.h2f-select:hover{border-color:var(--border-strong)}
.h2f-input:focus,.h2f-textarea:focus,.h2f-select:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.h2f-input--invalid,.h2f-textarea--invalid,.h2f-select--invalid{border-color:var(--status-error)}
.h2f-input:disabled,.h2f-textarea:disabled,.h2f-select:disabled{background:var(--surface-sunken);color:var(--ink-500);cursor:not-allowed}
.h2f-select{appearance:none;padding-right:var(--space-10);background-image:linear-gradient(45deg,transparent 49%,var(--green-700) 50%),linear-gradient(-45deg,transparent 49%,var(--green-700) 50%);background-size:7px 7px,7px 7px;background-position:right 22px center,right 15px center;background-repeat:no-repeat}
.h2f-check{display:flex;align-items:flex-start;gap:var(--space-3);min-height:var(--tap-min);cursor:pointer;font-size:var(--text-body-md);color:var(--text-body);line-height:1.5;padding-block:12px;position:relative}
.h2f-check__box{flex:none;width:22px;height:22px;margin-top:1px;border:1.5px solid var(--border-strong);border-radius:var(--radius-xs);background:var(--surface-card);display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.h2f-check__box--radio{border-radius:var(--radius-pill)}
.h2f-check input{position:absolute;opacity:0;width:0;height:0}
.h2f-check input:focus-visible + .h2f-check__box{box-shadow:var(--focus-ring)}
.h2f-check input:checked + .h2f-check__box{background:var(--green-700);border-color:var(--green-700)}
.h2f-check__mark{width:12px;height:12px;color:#fff;opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.h2f-check input:checked + .h2f-check__box .h2f-check__mark{opacity:1}
.h2f-check__dot{width:9px;height:9px;border-radius:var(--radius-pill);background:#fff}
.h2f-check--disabled{opacity:.5;cursor:not-allowed}

/* Switch — ยังไม่ได้ใช้ในหน้าไหน แต่เก็บไว้ให้ครบตาม design system */
.h2f-switch{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer;min-height:var(--tap-min);font-size:var(--text-body-md)}
.h2f-switch__track{position:relative;width:48px;height:28px;border-radius:var(--radius-pill);background:var(--cream-400);transition:background var(--dur-base) var(--ease-out)}
.h2f-switch__knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:var(--radius-pill);background:#fff;box-shadow:var(--shadow-xs);transition:transform var(--dur-base) var(--ease-soft-back)}
.h2f-switch--on .h2f-switch__track{background:var(--green-700)}
.h2f-switch--on .h2f-switch__knob{transform:translateX(20px)}
.h2f-switch--disabled{opacity:.5;cursor:not-allowed}

/* ---------- Tabs ---------- */
.h2f-tabs{display:flex;gap:var(--space-2);background:var(--surface-sunken);padding:5px;border-radius:var(--radius-pill);overflow-x:auto}
.h2f-tabs__tab{flex:1 0 auto;border:0;background:transparent;font-family:var(--font-display);font-size:var(--text-body-sm);font-weight:var(--weight-medium);color:var(--ink-700);min-height:42px;padding:0 var(--space-5);border-radius:var(--radius-pill);cursor:pointer;transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.h2f-tabs__tab:hover{color:var(--green-800)}
.h2f-tabs__tab--active{background:var(--surface-card);color:var(--green-800);font-weight:var(--weight-semibold);box-shadow:var(--shadow-xs)}

/* ---------- Accordion ---------- */
.h2f-acc{display:flex;flex-direction:column;gap:var(--space-3)}
.h2f-acc__item{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;transition:box-shadow var(--dur-base) var(--ease-out)}
.h2f-acc__item--open{box-shadow:var(--shadow-card)}
.h2f-acc__q{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);width:100%;border:0;background:none;text-align:left;font-family:var(--font-display);font-size:var(--text-body-lg);font-weight:var(--weight-medium);color:var(--green-800);padding:var(--space-4) var(--space-5);min-height:var(--tap-min);cursor:pointer;line-height:1.45}
.h2f-acc__q:hover{background:var(--mint-100)}
.h2f-acc__chev{flex:none;transition:transform var(--dur-base) var(--ease-out);color:var(--green-600)}
.h2f-acc__item--open .h2f-acc__chev{transform:rotate(180deg)}
.h2f-acc__a{padding:0 var(--space-5) var(--space-5);color:var(--ink-700);font-size:var(--text-body-md);line-height:var(--leading-loose)}
.h2f-acc__a p{margin:0}

/* ---------- Dialog ---------- */
.h2f-dialog__scrim{position:fixed;inset:0;height:100%;background:var(--overlay-scrim);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;padding:var(--space-4);z-index:80;animation:h2f-fade var(--dur-base) var(--ease-out)}
.h2f-dialog{display:flex;flex-direction:column;background:var(--surface-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-float);width:100%;max-width:440px;max-height:calc(100% - var(--space-4));padding:var(--space-6);animation:h2f-rise var(--dur-slow) var(--ease-out)}
.h2f-dialog--wide{max-width:560px}
.h2f-dialog__title{font-family:var(--font-display);font-size:var(--text-h3);font-weight:var(--weight-semibold);color:var(--text-heading);margin:0 0 var(--space-2)}
/* เพิ่มจากดีไซน์ — ข้อความกำกับท้ายป๊อปอัปรายละเอียดผลิตภัณฑ์ */
.h2f-dialog__note{margin:var(--space-4) 0 0;font-size:var(--text-caption);color:var(--ink-500);line-height:1.7}
.h2f-dialog__body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;color:var(--ink-700);font-size:var(--text-body-md);line-height:var(--leading-loose)}
.h2f-dialog__actions{flex:none;display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--border-subtle)}
@media(min-width:640px){.h2f-dialog__scrim{align-items:center}.h2f-dialog__actions{flex-direction:row-reverse}}
@keyframes h2f-fade{from{opacity:0}to{opacity:1}}
@keyframes h2f-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- Toast ---------- */
.h2f-toast{display:flex;align-items:flex-start;gap:var(--space-3);background:var(--surface-card);border:1px solid var(--border-subtle);border-left:4px solid var(--green-600);border-radius:var(--radius-md);box-shadow:var(--shadow-float);padding:var(--space-4);max-width:400px;animation:h2f-rise var(--dur-slow) var(--ease-out)}
.h2f-toast--success{border-left-color:var(--status-success)}
.h2f-toast--error{border-left-color:var(--status-error)}
.h2f-toast--info{border-left-color:var(--green-600)}
.h2f-toast__text{font-size:var(--text-body-sm);color:var(--text-body);line-height:1.55}
.h2f-toast__title{font-family:var(--font-display);font-weight:var(--weight-semibold);color:var(--green-800);display:block}

/* ---------- Tooltip ---------- */
/* ยังไม่ได้ใช้ในหน้าไหน แต่เก็บไว้ให้ครบตาม design system */
.h2f-tip{position:relative;display:inline-flex}
.h2f-tip__bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--surface-inverse);color:#fff;font-size:var(--text-caption);line-height:1.4;padding:8px 12px;border-radius:var(--radius-sm);white-space:nowrap;box-shadow:var(--shadow-sm);opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-out)}
.h2f-tip__bubble--show{opacity:1}

/* ---------- ProgramCard ---------- */
.h2f-program{display:flex;flex-direction:column;gap:var(--space-4);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--space-6);transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.h2f-program:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px)}
.h2f-program__icon{width:52px;height:52px;border-radius:var(--radius-md);background:var(--mint-100);color:var(--green-700);display:flex;align-items:center;justify-content:center}
.h2f-program--featured{border-color:var(--green-600);border-width:2px}
.h2f-program__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.h2f-program__title{font-family:var(--font-display);font-size:var(--text-h3);font-weight:var(--weight-semibold);color:var(--text-heading);margin:0}
.h2f-program__desc{margin:0;color:var(--ink-700);font-size:var(--text-body-md);line-height:var(--leading-loose)}
.h2f-program__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.h2f-program__list li{display:flex;gap:var(--space-2);align-items:flex-start;font-size:var(--text-body-sm);color:var(--ink-700);line-height:1.6}
.h2f-program__tick{color:var(--green-600);margin-top:4px}

/* ---------- Testimonial ---------- */
.h2f-testi{display:flex;flex-direction:column;gap:var(--space-4);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--space-6);margin:0}
.h2f-testi__quote{margin:0;font-size:var(--text-body-md);line-height:var(--leading-loose);color:var(--text-body)}
.h2f-testi__who{display:flex;align-items:center;gap:var(--space-3)}
.h2f-testi__avatar{width:44px;height:44px;border-radius:var(--radius-pill);object-fit:cover;background:var(--mint-200);flex:none}
.h2f-testi__name{font-family:var(--font-display);font-weight:var(--weight-semibold);color:var(--green-800);font-size:var(--text-body-sm);line-height:1.3}
.h2f-testi__meta{display:block;font-size:var(--text-caption);color:var(--text-muted);line-height:1.4}
.h2f-testi__stars{display:flex;gap:3px;color:var(--lemon-500)}

/* ---------- BeforeAfter / CaseStory ---------- */
.h2f-ba{display:flex;flex-direction:column;gap:var(--space-4);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--space-4);overflow:hidden}
.h2f-ba__pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.h2f-ba__single{position:relative;aspect-ratio:1/1;border-radius:var(--radius-md);overflow:hidden;background:var(--surface-sunken);display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--text-micro);color:var(--ink-500);padding:12px;line-height:1.5}
.h2f-ba__single img{width:100%;height:100%;object-fit:cover;display:block}
/* display:block เพิ่มจากดีไซน์ เพราะการ์ดของเราอยู่ใน <button> จึงใช้ span แทน div ได้อย่างเดียว
   span เป็น inline โดยปริยาย ทำให้ aspect-ratio ไม่ทำงาน */
.h2f-ba__shot{display:block;position:relative;aspect-ratio:3/4;border-radius:var(--radius-md);overflow:hidden;background:var(--surface-sunken)}
.h2f-ba__shot img{width:100%;height:100%;object-fit:cover;display:block}
.h2f-ba__label{position:absolute;left:8px;top:8px;font-family:var(--font-display);font-size:var(--text-micro);font-weight:var(--weight-semibold);padding:4px 10px;border-radius:var(--radius-pill);background:rgba(255,255,255,.92);color:var(--ink-700)}
.h2f-ba__label--after{background:var(--green-700);color:#fff}
/* แบบภาพหลังเต็มกรอบ 1:1 แล้วซ้อนภาพก่อนไว้มุมล่างซ้าย
   เห็นผลลัพธ์เด่นชัดก่อน แต่ยังมีหลักฐานเปรียบเทียบอยู่ในภาพเดียวกัน */
.h2f-ba__single--photo{padding:0}
.h2f-ba__single--photo>img,.h2f-ba__single--photo>picture>img{width:100%;height:100%;object-fit:cover;display:block}
.h2f-ba__inset{position:absolute;right:10px;bottom:10px;width:35%;aspect-ratio:3/4;
  border-radius:var(--radius-sm);overflow:hidden;border:2px solid rgba(255,255,255,.95);
  box-shadow:0 4px 14px rgba(6,57,44,.35);background:var(--surface-sunken);display:block}
/* บางภาพคนอยู่ค่อนไปทางขวา ภาพซ้อนจึงต้องย้ายไปมุมซ้ายเพื่อไม่ให้บังตัวคน */
.h2f-ba__inset--left{right:auto;left:10px}
.h2f-ba__inset img{width:100%;height:100%;object-fit:cover;display:block}
.h2f-ba__inset .h2f-ba__label{left:4px;top:4px;padding:2px 7px;font-size:10px}

.h2f-ba__result{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);align-items:baseline}
.h2f-ba__figure{font-family:var(--font-display);font-size:var(--text-h2);font-weight:var(--weight-bold);color:var(--peach-600);line-height:1}
.h2f-ba__caption{font-size:var(--text-caption);color:var(--text-muted);line-height:1.5}
.h2f-ba__disclaimer{font-size:var(--text-micro);color:var(--ink-300);line-height:1.5;margin:0}
.h2f-ba--clickable{cursor:pointer;text-align:left;border-width:1px;font:inherit;color:inherit;width:100%}
.h2f-ba--clickable:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px)}
.h2f-ba--clickable:hover .h2f-ba__more{color:var(--peach-600);gap:10px}
.h2f-ba__more{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--green-700);transition:color var(--dur-base) var(--ease-out),gap var(--dur-base) var(--ease-out)}
.h2f-story{display:flex;flex-direction:column;gap:var(--space-4)}
.h2f-story__gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-2)}
.h2f-story__gallery:has(> :only-child) .h2f-story__shot{aspect-ratio:1/1}
.h2f-story__shot{position:relative;aspect-ratio:3/4;border-radius:var(--radius-md);overflow:hidden;background:var(--surface-sunken);display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--text-micro);color:var(--ink-500);padding:8px;line-height:1.4}
.h2f-story__shot img{width:100%;height:100%;object-fit:cover;display:block}
.h2f-story__shot span{position:absolute;left:8px;top:8px;font-family:var(--font-display);font-size:var(--text-micro);font-weight:var(--weight-semibold);padding:4px 10px;border-radius:var(--radius-pill);background:rgba(255,255,255,.92);color:var(--ink-700)}
.h2f-story__shot--after span{background:var(--green-700);color:#fff}
.h2f-story__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:var(--space-2)}
.h2f-story__stat{background:var(--surface-mint);border:1px solid var(--mint-200);border-radius:var(--radius-md);padding:var(--space-3)}
.h2f-story__figure{font-family:var(--font-display);font-size:var(--text-h3);font-weight:var(--weight-bold);color:var(--green-700);line-height:1.1}
.h2f-story__label{font-size:var(--text-micro);color:var(--ink-700);line-height:1.4}
.h2f-story__quote{margin:0;font-size:var(--text-body-md);line-height:var(--leading-loose);color:var(--text-body);padding-left:var(--space-4);border-left:3px solid var(--lime-500)}

/* ---------- StepList ---------- */
.h2f-steps{display:flex;flex-direction:column;gap:var(--space-6);margin:0;padding:0;list-style:none}
.h2f-steps__item{display:flex;gap:var(--space-4);align-items:flex-start;position:relative}
.h2f-steps__num{flex:none;width:40px;height:40px;border-radius:var(--radius-pill);background:var(--green-700);color:#fff;font-family:var(--font-display);font-weight:var(--weight-semibold);display:flex;align-items:center;justify-content:center;font-size:var(--text-body-md);box-shadow:var(--shadow-sm)}
.h2f-steps__title{font-family:var(--font-display);font-size:var(--text-body-lg);font-weight:var(--weight-semibold);color:var(--text-heading);margin:0 0 4px;line-height:1.4}
.h2f-steps__desc{margin:0;font-size:var(--text-body-sm);color:var(--ink-700);line-height:var(--leading-loose)}
.h2f-steps__num--done{background:var(--mint-300);color:var(--green-900)}
.h2f-steps--horizontal{flex-direction:row;gap:var(--space-4)}
.h2f-steps--horizontal .h2f-steps__item{flex:1;flex-direction:column;text-align:left}

/* ---------- FloatingContactBar ---------- */
.h2f-floatbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:var(--space-2);padding:var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-top:1px solid var(--border-subtle);box-shadow:var(--shadow-float)}
.h2f-floatbar .h2f-btn{flex:1;min-height:var(--tap-min);padding-inline:var(--space-4);font-size:var(--text-body-sm);font-weight:var(--weight-medium);box-shadow:none}
.h2f-floatbar .h2f-btn--accent{box-shadow:0 4px 12px rgba(255,106,53,.28)}
.h2f-floatbar .h2f-btn--outline{background:var(--surface-card)}
@media(min-width:900px){.h2f-floatbar{left:auto;right:var(--space-6);bottom:var(--space-6);flex-direction:column;background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0}.h2f-floatbar .h2f-btn{flex:none}}

/* ---------- ProductCard ---------- */
.h2f-product{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.h2f-product:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px)}
.h2f-product__media{position:relative;aspect-ratio:1/1;background:var(--surface-sunken);display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--text-micro);color:var(--ink-500);padding:12px;line-height:1.5}
.h2f-product__media img{width:100%;height:100%;object-fit:cover;display:block}
.h2f-product__tag{position:absolute;left:12px;top:12px}
.h2f-product__body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5)}
.h2f-product__name{font-family:var(--font-display);font-size:var(--text-h3);font-weight:var(--weight-semibold);color:var(--text-heading);margin:0;line-height:1.35}
.h2f-product__desc{margin:0;font-size:var(--text-body-sm);color:var(--ink-700);line-height:var(--leading-loose)}
.h2f-product__meta{display:flex;flex-direction:column;gap:var(--space-2);margin:0;padding:0;list-style:none}
/* ดีไซน์เดิมกันช่องป้ายไว้ 96px เพราะป้ายยาวว่า "เหมาะกับ"
   ตอนนี้ป้ายสั้นและมีบรรทัดเดียว จึงให้ช่องป้ายกว้างเท่าตัวอักษรพอดี */
.h2f-product__meta li{display:grid;grid-template-columns:max-content 1fr;gap:var(--space-2);font-size:var(--text-caption);color:var(--ink-700);line-height:1.6}
.h2f-product__meta b{font-family:var(--font-display);font-weight:var(--weight-medium);color:var(--green-700)}
/* เพิ่มจากดีไซน์ — การ์ดมีสองปุ่ม (รายละเอียด / สั่งซื้อ) ดีไซน์เดิมมีปุ่มเดียว
   ใช้ flex เพื่อให้ปุ่มกว้างเท่ากันเสมอ ไม่ว่าจะมีปุ่มเดียวหรือสองปุ่ม */
.h2f-product__actions{display:flex;gap:var(--space-2);margin-top:auto}
.h2f-product__actions .h2f-btn{flex:1 1 0;min-width:0;padding-inline:var(--space-3)}
/* ในป๊อปอัปมีที่ว่างมากกว่าในการ์ด ป้ายหัวข้อจึงกว้างได้ */
.h2f-product__meta--dialog li{grid-template-columns:62px 1fr;font-size:var(--text-body-sm)}

/* ---------- LineQrCard ---------- */
.h2f-qr{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--space-6);text-align:center}
.h2f-qr--flat{box-shadow:none;border:0;padding:0;background:none}
.h2f-qr--dark{background:transparent;border:0;box-shadow:none;padding:0;align-items:flex-start;text-align:left;gap:var(--space-3)}
.h2f-qr--dark .h2f-qr__frame{width:132px;height:132px;background:var(--white);border-width:1px;border-color:rgba(255,255,255,.2);border-radius:var(--radius-sm)}
.h2f-qr--dark .h2f-qr__id{background:rgba(255,255,255,.12);color:#fff}
.h2f-qr--dark .h2f-qr__note{color:rgba(255,255,255,.6);max-width:20ch;font-size:var(--text-micro)}
.h2f-qr__frame{width:180px;height:180px;flex:none;border-radius:var(--radius-md);background:var(--surface-raised);border:2px dashed var(--cream-400);display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--text-micro);color:var(--ink-500);padding:12px;line-height:1.5;overflow:hidden}
.h2f-qr__frame--filled{border-style:solid;border-color:var(--border-subtle);background:var(--white);padding:8px}
.h2f-qr__frame img{width:100%;height:100%;object-fit:contain;display:block}
.h2f-qr__id{font-family:var(--font-mono);font-size:var(--text-body-md);color:var(--green-800);background:var(--surface-mint);border-radius:var(--radius-pill);padding:8px 16px;line-height:1}
.h2f-qr__note{margin:0;font-size:var(--text-caption);color:var(--text-muted);line-height:1.6;max-width:32ch}
.h2f-qr__actions{display:flex;flex-direction:column;gap:var(--space-2);width:100%;max-width:280px}