/* ============================================================
   responsive.css — Tablet / Mobile
   โหลดเป็นไฟล์สุดท้ายเสมอ เพื่อให้ override ไฟล์อื่นได้
   ============================================================ */

/* ---------------- ≤ 1200px ---------------- */
@media (max-width: 1200px) {
  .product-card { grid-template-columns: 1fr 340px; gap: 36px; padding: 44px 40px; }
  .detail { grid-template-columns: 1fr 360px; gap: 40px; }
      .product-card {
        grid-template-columns: 340px auto;
        gap: 36px;
        padding: 2rem 2rem;
    }
}

/* ---------------- ≤ 1024px : Tablet ---------------- */
@media (max-width: 1024px) {
  :root { --header-h: 110px; }

  .hero { min-height: auto; padding-bottom: 96px; }
  .hero__title { font-size: 38px; }
  .hero__tagline { font-size: 22px; }

  .features { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
  .hero__cards { margin-top: 52px; }

  .highlights__bar { grid-template-columns: repeat(2, 1fr); gap: 22px; }

  .motto__col {
    border-left: 0;
    border-top: 1px solid var(--c-line);
    padding: 26px 10px;
  }
  .motto__col:first-child { border-top: 0; }

  .product-card { grid-template-columns: 1fr 1fr; gap: 28px; }
  .product-card__media { max-width: 420px; }
  .product-card__desc { max-width: none; }

  .detail { grid-template-columns: 1fr; }
  .detail__media { max-width: 440px; }
  .info-grid { grid-template-columns: repeat(2, 1fr); }

  .site-footer__inner { grid-template-columns: 1fr; gap: 34px; }
  .footer-brand { text-align: center; }
  .footer-nav { justify-content: center; }
  .footer-company, .footer-contact { text-align: center; }
  .footer-contact li { justify-content: center; }
}

.product-card__body {
    padding: 0;
}

/* ---------------- ≤ 768px : Mobile ---------------- */

@media (max-width: 768px) {
  :root {
    --gutter: 18px;
    --header-h: 80px;      /* มือถือ: Header สูง 80px คงที่ */
    --header-h-sm: 80px;
  }

  body { font-size: 15px; }

  /* ---- Header ---- */
  .site-header { height: var(--header-h-sm); }
  .site-header.is-scrolled { height: var(--header-h-sm); }
  .brand__logo,
  .site-header.is-scrolled .brand__logo { height: 44px; }

  .nav { display: none; }
  .hamburger { display: grid; }
  .mobile-nav { display: block; }
  .mobile-nav__backdrop { display: block; }

  /* ---- Hero ---- */
  .hero {
    padding-top: calc(var(--header-h-sm) + 26px);
    padding-bottom: 74px;
  }
  .hero__title { font-size: 30px; }
  .hero__quote { font-size: 28px; }
  .hero__rule { max-width: 210px; margin-top: 12px; }
  .hero__lead { font-size: 14px; line-height: 1.95; }
  .hero__lead br { display: none; }
  .hero__tagline { font-size: 19px; line-height: 1.5; margin-top: 24px; }
  .hero__cards { margin-top: 46px; }

  /* ---- การ์ดจุดเด่น : 2 คอลัมน์ ---- */
  .features { grid-template-columns: repeat(2, 1fr); gap: 44px 12px; }
  .feature { padding: 52px 14px 26px; border-radius: var(--r-sm); }
  .feature__icon { width: 52px; height: 52px; top: -26px; }
  .feature__icon svg { width: 24px; height: 24px; }
  .feature__title { font-size: 14px; }
  .feature__line { margin: 12px auto; }
  .feature__text { font-size: 12px; line-height: 1.85; }

  /* ---- แถบ Highlight : เรียงลงมาแนวตั้ง ---- */
  .highlights { margin-top: -46px; }
  .highlights__bar {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px 18px;
    border-radius: var(--r-md);
  }
  .highlight__icon { width: 40px; height: 40px; }
  .highlight__icon svg { width: 19px; height: 19px; }
  .highlight__title { font-size: 14px; }
  .highlight__text { font-size: 12px; }

  /* ---- Motto ENZEA ---- */
  .motto-company { padding: 52px 0 60px; }
  .motto__word { letter-spacing: .04em; }
  .motto__lead { font-size: 14px; }
  .motto-company .section-footer { margin-top: 24px; }
  .motto__col { padding: 10px 10px; }
  .motto__col-letter { font-size: 28px; margin-bottom: 10px; }
  .motto__col-phrase { font-size: 14px; }
  .motto__col-phrase br { display: none; }
  .motto__col-text { font-size: 14px; }
  .motto__col-text br { display: none; }

  /* ---- ผลิตภัณฑ์ ---- */
  .products { padding: 66px 0 92px; }
  .section-head { margin-bottom: 36px; }
  .section-head__title { font-size: 22px; }
  .leaf-divider::before, .leaf-divider::after { width: 46px; }

  .products__list { gap: 24px; }
  .product-card {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px 22px 30px;
    border-radius: var(--r-md);
  }
  /* มือถือ: รูปอยู่ด้านบน ตาม design */
  .product-card__media { order: -1; max-width: none; }
  .product-card__name { font-size: 28px; }
  .product-card__sub { font-size: 15px; }
  .product-card__desc { margin-top: 16px; font-size: 13.5px; line-height: 1.9; }
  .product-card__cta { margin-top: 22px; display: flex; justify-content: flex-start; }

  /* ---- หน้ารายละเอียดสินค้า ---- */
  .page-hero { padding: calc(var(--header-h-sm) + 10px) 0 20px; }
  .detail__name { font-size: 32px; }
  .detail__sub { font-size: 16px; }
  .detail__desc { font-size: 14px; }
  .detail__media { order: -1; max-width: none; }
  .detail-sections { padding: 56px 0 90px; }
  .info-grid { grid-template-columns: 1fr; }
  .breadcrumb { margin-bottom: 16px; }

  /* ---- Footer ---- */
  .site-footer { padding-top: 48px; font-size: 12.5px; }
  .footer-brand__logo { height: 62px; }
  .footer-nav { gap: 18px; margin-bottom: 20px; }
  .footer-nav a { font-size: 13px; }
  .site-footer__bottom { margin-top: 36px; font-size: 11.5px; }
  .site-footer__deco { width: 320px; height: 320px; left: -90px; bottom: -110px; }

  /* ---- ปุ่มลอย ---- */
  .floating { right: 14px; bottom: 14px; gap: 10px; }
  .line-chat {display: inline-flex; height: 40px; font-size: 13px; padding: 0 15px 0 12px; }
  .to-top { width: 42px; height: 42px; }
}

/* ---------------- ≤ 576px ---------------- */
@media (max-width: 576px) {

   /* มือถือ: รูปอยู่ด้านบน ตาม design */
  .product-card__cta { margin-top: 22px; display: flex; justify-content: flex-start; }
  .product-card__body {padding: 0;}

  /* ---- หน้ารายละเอียดสินค้า ---- */
  .page-hero { padding: calc(var(--header-h-sm) + 10px) 0 20px; }
  .breadcrumb { margin-bottom: 8px; }

  .motto__cols { grid-template-columns: 1fr; margin-top: 0px; }

  /* ---- หน้าเกี่ยวกับเรา ---- */
    .strength {
        display: grid;
        grid-template-columns: 60px 1fr;
        align-items: center;
        gap: .8rem;
        padding: 1rem;
    }
    .strength__title {
        text-align: initial;
    }
    .strength__icon {
        margin-bottom: 0;
    }

}


/* ---------------- ≤ 420px ---------------- */
@media (max-width: 420px) {
  .hero__title { font-size: 26px; }
  .hero__tagline { font-size: 17px; }
  .product-card__name { font-size: 25px; }
  .line-chat span:nth-child(2) { display: none; }
  .line-chat { padding: 0 10px; width: 42px; height: 42px;}

}