/* ==== ABOUT (OUR STORY) ==== */

/* ระยะห่างทั้งส่วน + กัน margin-collapsing */
.about-page{
  background:#fff;
  display: flow-root;
  /* ดัน OUR STORY ให้ห่างจากแบนเนอร์ด้านบน */
  padding: clamp(48px, 7vw, 88px) 0 clamp(28px, 5vw, 60px);
}

/* ถ้าบนมือถือยังรู้สึกชิดไป เพิ่ม padding-top อีกเล็กน้อย */
@media (max-width: 640px){
  .about-page{
    padding-top: clamp(64px, 12vw, 96px);
  }
  /* เติม gutter ซ้าย/ขวา */
  .about-page .container{ padding-left:16px; padding-right:16px; }
}

/* กริด 2 คอลัมน์: ข้อความซ้าย / รูปขวา */
.about-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 640px){
  .about-grid{ grid-template-columns: 1fr; gap:14px; }
}

/* กล่องข้อความซ้าย */
.eyebrow{
  color: var(--brand-blue);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 0.25rem;
}

/* หัวข้อของส่วน OUR STORY (สcope เฉพาะใน about-page) */
.about-page .about-title{
  font-weight: 400;
  font-size: 42px;
  line-height: 1.45;
  margin-bottom: 0.75rem;
  display: inline-block;
  transform-origin: left center;
}
@media (max-width: 640px){
  .about-page .about-title{
    font-size: 26px;
    line-height: 1.35;
    text-wrap: balance;
  }
}

/* ===== About typography (แยกขาดจาก .desc global) ===== */
.about-page .about-desc{
  font-size: 20px;
  line-height: 1.85;
  color: #605E5E;

  text-align: left;
  text-indent: 1.5em;
  margin-bottom: 1rem;

  white-space: normal;
}

@media (max-width: 640px){
  .about-page .about-desc{
    font-size: 16px;
    line-height: 1.75;

    text-align: justify;
    text-justify: inter-character;
    text-align-last: left;

    text-indent: 1.25em;
  }
}

/* รูปด้านขวา */
.about-img{ overflow: hidden; }
.about-img img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
  margin-top: 20px;
}
@media (max-width: 767.98px){
  .about-img{
    border-radius: 14px;
    overflow: hidden;
    max-height: 360px;
    margin-top: 6px;
  }
  .about-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
  }
}

/* (ทางเลือก) เว้นระยะใต้แบนเนอร์ให้ชัดอีกนิด */
.page-hero{ margin-bottom: clamp(12px, 3vw, 24px); }

/* ===== Highlights (คงตามของคุณ) ===== */
.highlights{
  background:#fff;
  padding: clamp(28px, 5vw, 60px) 0;
}
.highlights .section-head{ margin-bottom: clamp(16px, 4vw, 32px); }
.highlights .eyebrow{ color: var(--brand-blue); letter-spacing:.08em; text-transform:uppercase; font-size:14px; margin-bottom:6px; }
.highlights .about-title{ font-weight:400; font-size:42px; line-height:1.4; margin: .75rem 0 0; }
@media (max-width: 991.98px){ .highlights .about-title{ font-size:34px; } .highlights .tiles{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 639.98px){ .highlights{ padding:22px 0; } .highlights .eyebrow{ font-size:12px; } .highlights .about-title{ font-size:26px; line-height:1.35; text-wrap:balance; } .highlights .tiles{ grid-template-columns:1fr; } }


/* เลย์เอาต์ไทล์ */
.highlights .tiles{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.8vw, 28px);
}

/* === Fix: หัวข้อไม่ตก + ความสูงกล่องคงเดิม/ไม่น้อยลง === */

/* 1) ดันหัวข้อขึ้นโดยไม่พึ่ง margin ของ h3 */
.highlights .tile h3{
  margin: 0;          /* ตัด margin-top ที่ทำให้ตก */
  line-height: 1.25;
}

/* 2) ให้คอลัมน์ข้อความเริ่มที่ขอบบนจริง ๆ */
.highlights .tile > div:nth-child(2){
  align-self: start;
  /* ขยับเล็กน้อยแทน margin เดิม เพื่อไม่ให้กล่องเตี้ยลง */
  padding-top: 4px;   /* ปรับ 2–6px ตามชอบ */
}

/* 3) รักษาความสูงรวมของกล่อง (กันเตี้ยลง) */
.highlights .tile{
  /* เพิ่ม padding บนอีกนิดชดเชย margin h3 ที่ถูกตัด */
  padding-top: 22px;            /* เดิม 18px → 22px */
  /* และตั้ง min-height ให้ไม่ต่ำกว่าค่าฐาน */
  min-height: 168px;            /* ปรับได้ตามดีไซน์ที่เห็น */
}


.highlights .tile{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 14px;
  align-items: start;
  padding: 18px;
  border: 1px solid transparent;   /* ไม่ให้ขอบบางๆ มารบกวน */
  border-radius: 18px;
  box-shadow: 0 6px 22px rgba(16,24,40,0.06);
}

/* ===== ตั้งสีแต่ละกล่อง (พื้นหลังกรอบนอก) ===== */
.highlights .tile:nth-child(1){ background: #0970fa;color: #fff; }  
.highlights .tile:nth-child(2){ background: #fc7801;color: #fff; }  
.highlights .tile:nth-child(3){ background: #eadfd1; }  
.highlights .tile:nth-child(4){ background: #373435;color: #fff; }  
.highlights .tile:nth-child(5){ background: #ffca08; }  
.highlights .tile:nth-child(6){ background: #0959ab;color: #fff; }  


.highlights .tile .icon{
  font-size: 26px;
  line-height: 1;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: #f5f8ff;
  border-radius: 12px;
}

/* มือถือ/แท็บเล็ต: ลดฟอนต์และเรียงลง */
@media (max-width: 991.98px){
  .highlights .about-title{ font-size: 34px; }
  .highlights .tiles{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639.98px){
  .highlights{ padding: 22px 0; }
  .highlights .eyebrow{ font-size: 12px; }
  .highlights .about-title{
    font-size: 26px;
    line-height: 1.35;
    text-wrap: balance;
  }
  .highlights .tiles{ grid-template-columns: 1fr; }
}

/* มือถือ: ปรับย่อขนาดกล่องและข้อมูลในกล่อง */
@media (max-width: 639.98px){
  .highlights .tile{
    padding: 10px;         /* เดิม 18px → ลดลง */
    border-radius: 14px;   /* มุมมนเล็กลง */
    min-height: auto;
    width:90% ; 
    justify-self: center;
         
  }

  /* ไอคอนเล็กลง */
  .highlights .tile .icon{
    width: 36px;
    height: 36px;
    font-size: 20px;
    border-radius: 10px;
  }

  /* หัวข้อ */
  .highlights .tile h3{
    font-size: 16px;       /* เดิม ~18–20px → เล็กลง */
    line-height: 1.3;
  }

  /* ข้อความอธิบาย */
  .highlights .tile p{
    font-size: 13px;       /* เดิม 15–16px → เล็กลง */
    line-height: 1.6;
  }
}


/* ===== INGREDIENTS ===== */
.section.ingredients .section-next{
  margin-bottom: 16px;
}
.section.ingredients{ padding: 28px 0 10px; }
.ing-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.ing-card{
  background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  padding:12px; position:relative; display:flex; flex-direction:column; gap:8px;
}
.ing-card .thumb{ aspect-ratio: 1/1; border-radius:10px; overflow:hidden; background:#f8fafc; }
.ing-card .thumb img{ width:100%; height:100%; object-fit:contain; }

/* ใช้ชื่อ .ing-chip แยก ไม่ชน .chip ของเมนู */
.ing-chip{
  position:absolute; left:10px; top:10px;
  font-size:12px; line-height:1; padding:6px 8px; border-radius:999px; color:#fff;
  background:var(--blue);
}
.ing-chip .dot{ display:inline-block; width:6px; height:6px; border-radius:999px; background:#fff; margin-right:6px; vertical-align:middle; }

.ing-name{ margin:4px 0 0; font-weight:600; }
.ing-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.ing-tag{ font-size:12px; padding:4px 8px; border-radius:999px; background:#f6f8fb; color:#162a3e; }

/* mobile tweaks */
@media (max-width:640px){
  .section.ingredients{ padding:20px 0; }
  .ing-grid{ gap:12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .ing-card{ padding:10px; border-radius:12px; }
  .ing-card .thumb{ border-radius:8px; }
  .ing-name{ font-size:14px; margin:4px 0 6px; }
  .ing-tag{ font-size:11px; padding:2px 6px; }
  .ing-chip{ font-size:11px; padding:3px 6px; }
  .ing-chip .dot{ width:6px; height:6px; }
}











/* ====== PRODUCTS: CTA (ชั่งตัก) ====== */
.products-cta{
  background:#0970fa;
  color:#fff;
  border-radius:1rem;
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  margin-top:2rem;
  margin-bottom:2rem;
}
/* เดสก์ท็อป/แท็บเล็ตขึ้นไป */
@media (min-width: 640px){
  .products-cta{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* ค่าขนาดเดสก์ท็อปตามเดิม */
  }
}

/* มือถือเท่านั้น (ไม่ชนกับ min-width:640px) */
@media (max-width: 639.98px){
  .products-cta{
    padding: 1rem;         /* ย่อขนาดกล่อง */
    border-radius: 14px;
    gap: .75rem;
    width: 80%;
    justify-self: center;
  }
  .products-cta__title{ font-size: 16px;text-align: center; }
  .products-cta__desc{  font-size: 13px;text-align: center; }
  .products-cta__price{ font-size: 16px; }
  .products-cta__unit{  font-size: 11px; }
  .btn-orange{
    display: block;
    width: 100%;
    font-size: 13px;
    padding: .6rem 1rem;
  }
}

.products-cta__title{
  margin:0;
  font-size:20px;        /* ~ text-xl */
  font-weight:700;
}
.products-cta__desc{
  margin:.5rem 0 0;
  font-size:14px;
  color:rgba(255,255,255,.9);
}
.products-cta__action{ text-align:center; }
.products-cta__price{
  font-size:18px;        /* ~ text-lg */
  font-weight:700;
  color:#f7dd1e;
}
.products-cta__unit{
  font-size:12px;
  margin-top:.25rem;
  opacity:.95;
}

/* ====== PRODUCTS: ปุ่มท้ายส่วน ====== */
.products-footer{ text-align:center; }
.btn-lg{ font-size:16px; padding:.8rem 1.5rem; }

/* ปุ่มสีส้ม (ขนาดเล็กลง) */
.btn-orange {
  background: #fc7801;
  color: #fff;
  border: none;
  border-radius: 6px;       /* มุมมนเล็กลง */
  font-weight: 500;         /* ลดความหนาของตัวอักษร */
  font-size: 14px;          /* ย่อฟอนต์ลง */
  padding: 0.5rem 1rem;     /* ลดระยะด้านใน */
  display: inline-block;
  text-decoration: none;
  text-align: center;
  transition: background 0.25s ease;
  cursor: pointer;
}

/* Hover */
.btn-orange:hover {
  background: #e96c00;
}


/* ===== CONTACT ===== */
.contact { padding: 48px 0 80px; }
/* ให้หัวข้อและเนื้อหาอยู่ใน container เดียวกัน */
.contact .section-next{
  margin-bottom: 0;          /* ยกเลิก margin */
  padding-bottom: 28px;      /* ← ปรับ 24–36px ตามชอบ */
}

.contact-grid{
  display: grid;
  gap: 36px;
  align-items: start;
  margin-left: 0;
}

/* ยกเลิก padding-top ที่เคยใส่ไว้กับคอลัมน์ซ้าย (ถ้ามี) */
aside.contact-left{ padding-top: 0 !important; }

/* เคาะเฉพาะบล็อกแรกหลังคำบรรยาย = Phone ให้ลงจากคำบรรยาย */
.contact-left .contact-desc + .contact-block{
  margin-top: 16px;   /* ปรับ 12–24px ตามต้องการ */
}

/* ให้คำบรรยายชิดหัวข้อขึ้นนิดหน่อย (ถ้าอยาก) */
.contact-left .contact-desc{
  margin: 8px 0 12px; /* เดิม 28px */
}

/* มือถือไม่ต้องเคาะมาก */
@media (max-width: 959.98px){
  .contact-left .contact-desc + .contact-block{ margin-top: 8px; }
}

/* เดสก์ท็อป: เคาะคอลัมน์ขวาลงมาให้เสมอกับฝั่งซ้าย (หลังคำบรรยาย) */
@media (min-width: 960px){
  .contact-right{ 
    padding-top: 25px;   /* ใช้ค่าเดียวกับ .contact-left .contact-desc + .contact-block { margin-top: 16px; } */
  }
}
/* เคาะเฉพาะประโยคคำบรรยายใต้ h2 ให้ชิดขึ้น (เดสก์ท็อปเท่านั้น) */
@media (min-width: 960px){
  .contact-left .contact-desc{
    margin-top: -16px;   /* ปรับค่าได้: -16 ถึง -32 ตามที่ต้องการให้ชิด h2 */
  }
}

/* มือถือ/แท็บเล็ต ไม่ต้องชิดเป็นพิเศษ */
@media (max-width: 959.98px){
  .contact-left .contact-desc{ margin-top: 0; }
}


/* มือถือ/แท็บเล็ต: ไม่ต้องเคาะเพิ่ม */
@media (max-width: 959.98px){
  .contact-right{ padding-top: 0; }
}

/* unify heading size ทุก section ให้ 38px */
h2.about-title{
  font-weight: 400;
  font-size: 42px;
  line-height: 1.45;
}
@media (max-width: 640px){
  h2.about-title{ font-size: 26px; line-height: 1.35; }
}


/* คำบรรยายให้เด่นขึ้นและชิดเส้นหัวข้อ */
.contact-left .contact-desc{
  color: #3b3f46;
  margin: 8px 0 28px;  /* หรือ 32px ถ้าอยากให้ต่ำกว่านี้ */
}


/* กล่องย่อยซ้าย */
.contact-block{ margin-bottom: 28px; }
.pill-btn{
  display:inline-block; font-weight:700; border-radius:999px; padding:10px 18px; line-height:1;
  box-shadow: var(--shadow);
}
.pill-blue{ background: var(--brand-blue); color:#fff; }
.pill-btn.is-static{ pointer-events:none; }

.contact-lines{ margin-top:14px; display:grid; gap:8px; }
.contact-lines .line{ display:flex; gap:10px; align-items:baseline; }
.contact-lines .label{ color: var(--muted); min-width:120px; }
.contact-lines .value a,
.contact-lines .value{ color: var(--ink); text-decoration:none; font-weight:600; }

/* โซเชียล (สีแบรนด์จริง) */
.social-row{ display:flex; gap:14px; margin-top:14px; align-items:center; }

.social{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  border:1px solid var(--border);
  background:#fff;                 /* พื้นขาว */
  box-shadow: var(--shadow);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, background .15s ease;
}

/* ไอคอนใช้สีตามตัวอักษร (เข้ม) */
.social svg{
  width:22px; height:22px;
  fill: currentColor;
  color:#111;                      /* สีเข้มเหมือนเดิม */
}

/* ให้คลาสแพลตฟอร์มไม่เปลี่ยนสีอีก (ตัดสีแบรนด์ออก) */
.social--tiktok,
.social--facebook,
.social--line{
  background:#fff !important;
  border-color: var(--border) !important;
  
}

/* Instagram: ใช้เส้น (stroke) แทน fill เพื่อไม่ให้เป็นกล่องทึบ */
.social--instagram svg{ fill:none !important; stroke: currentColor; stroke-width:2; }
.social--instagram svg .ig-dot{ fill: currentColor; stroke: none; } /* จุดแฟลชให้ถมสีเล็กน้อย */

/* Hover เบา ๆ */
.social:hover, .social:focus{
  background:#f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  outline: none;
}


/* ขวา: ฟอร์ม + การ์ดเวลา */
.form-card{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding:24px;
  display:grid; grid-template-columns: 1fr 210px; column-gap:18px;
}
.form-fields{ display:grid; gap:12px; }
.form-fields input, .form-fields textarea{
  width:100%; border:1px solid var(--border); border-radius:12px; padding:12px 14px;
  font: inherit; color: var(--ink);
}
.form-fields input:focus, .form-fields textarea:focus{
  outline: none; box-shadow: var(--ring); border-color: rgba(9,112,250,.25);
}
.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }

.btn-primary{
  background: var(--brand-blue); color:#fff; border:0; padding:10px 16px; border-radius:18px; font-weight:700; cursor:pointer;
}
.btn-ghost{
  border:1px solid var(--border); padding:10px 16px; border-radius:18px; text-decoration:none; color: var(--ink);
}

.hours-card{
  background:#f7dd1e; border-radius:14px; padding:12px; text-align:center; align-self:start;
  min-width:190px; /* กันบีบ */
}
.hours-head{ font-weight:700; font-size:14px; }
.hours-sub{ font-size:12px; color: rgba(0,0,0,.7); }
.hours-head.mt{ margin-top:8px; }

/* เดสก์ท็อปและจอกว้างขึ้นไป */
@media (min-width: 960px){
  .contact-grid{
    grid-template-columns: 520px 1fr; /* ซ้าย fix 520px, ขวายืด */
  }
  .form-card{
    grid-template-columns: 1fr 210px; /* ฟอร์ม + การ์ดเวลา */
  }
}

/* มือถือ/แท็บเล็ต */
@media (max-width: 959.98px){
  .contact-grid{
    grid-template-columns: 1fr; /* เรียงลง 1 คอลัมน์ */
  }
  .form-card{
    grid-template-columns: 1fr; /* ฟอร์มบน การ์ดเวลาใต้ */
  }
  .hours-card{
    order: -1;           /* การ์ดเวลาขึ้นบนฟอร์ม */
    margin-bottom: 8px;
  }
}

/* ขยับเฉพาะคำบรรยายใต้ h2 ให้ชิดขึ้น โดยไม่ให้ Phone ขยับ */

/* เดสก์ท็อป */
@media (min-width: 960px){
  .contact .contact-left .contact-desc{
    position: relative;
    top: -16px;              /* ปรับ -10 ~ -24 ตามชอบ */
    margin-top: 0 !important; 
    margin-bottom: 0 !important;  /* กันชนกับกฎอื่น */
  }
  .contact .contact-left .contact-desc + .contact-block{
    margin-top: 24px !important;  /* ระยะจากคำบรรยาย → บล็อก Phone */
  }
}

/* มือถือ/แท็บเล็ต */
@media (max-width: 640px){
  .contact .contact-left .contact-desc{
    position: relative;
    top: -1px;               /* ปรับ -6 ~ -12 ตามชอบบนมือถือ */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .contact .contact-left .contact-desc + .contact-block{
    margin-top: 12px !important;  /* ระยะคำบรรยาย → Phone บนมือถือ */
  }
}