/* GLOBAL: Variables & Bootstrap overrides*/
:root{

  --font-primary: "CMU","Noto Sans Thai",system-ui,sans-serif;
  --font-secondary: "CMU","Noto Sans Thai",system-ui,sans-serif;
  --font-heading: "CMU","Noto Sans Thai",system-ui,sans-serif;

  --brand-color:#ff4545;
  --text-color:#333;
  --text-secondary:#555;

  --carousel-arrow:#6c757d;

  --w-light:300;
  --w-regular:400;
  --w-bold:700;

  --btn-blue:#0d6efd;
  --btn-blue-hover:#0b5ed7;
  --btn-blue-ring:rgba(13,110,253,.25);

  --bs-font-sans-serif:"CMU","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bs-body-font-family:var(--bs-font-sans-serif);
  --bs-btn-font-family:var(--bs-body-font-family);
}


/*GLOBAL: Headings & Paragraphs*/
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:var(--w-regular);
  line-height:1.15;
  color:var(--text-color);
  margin:0 0 .5rem 0;
}
h1{ font-size:clamp(2.25rem,5vw,3.5rem); }
h2{ font-size:clamp(1.875rem,3.75vw,2.5rem); }
h3{ font-size:clamp(1.5rem,3vw,2rem); }
h4{ font-size:clamp(1.25rem,2.5vw,1.5rem); }
h5{ font-size:clamp(1.125rem,2vw,1.25rem); }
h6{ font-size:1rem; }

p{
  font-family:var(--font-primary);
  font-weight:var(--w-light);
  font-size:1.125rem;
  line-height:1.7;
  color:var(--text-secondary);
  margin:0 0 1rem;
}
@media (min-width:768px){ p{ font-size:1.1875rem; } }
@media (min-width:1200px){ p{ font-size:1.25rem; } }


/*GLOBAL: Typography utilities*/
.p-sm{font-size:.9375rem;}
.p-base{font-size:1rem;}
.p-lg{font-size:1.125rem;}
.p-xl{font-size:1.25rem;}
.lh-150{line-height:1.5;}
.lh-180{line-height:1.8;}
.text-body{color:var(--text-color)!important;}
.text-muted-2{color:var(--text-secondary)!important;}

.navbar-brand, h1.brand-en{
  font-family:var(--font-secondary);
  font-weight:var(--w-light);
  letter-spacing:.2px;
}

.fw-300{font-weight:300!important;}
.fw-400{font-weight:400!important;} 
.fw-700{font-weight:700!important;}


/*GLOBAL: Buttons*/
.btn-primary{
  background-color:transparent;
  color:var(--btn-blue);
  border:1px solid var(--btn-blue);
  padding:.5rem 1rem;
  border-radius:.5rem;
  transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;
}
.btn-primary:hover,
.btn-primary:focus{
  background-color:var(--btn-blue);
  color:#fff;
  border-color:var(--btn-blue-hover);
  box-shadow:0 0 0 .2rem var(--btn-blue-ring);
}
.btn-primary:active{
  background-color:var(--btn-blue-hover);
  border-color:var(--btn-blue-hover);
}
.btn-outline-primary{ color:var(--btn-blue); border-color:var(--btn-blue); }
.btn-outline-primary:hover{ background-color:var(--btn-blue); color:#fff; border-color:var(--btn-blue); }


/*GLOBAL: Navbar & Offcanvas*/
.navbar .navbar-nav .nav-link,
.navbar .nav-link{
  font-family:var(--font-secondary)!important;
  font-weight:var(--w-light);
  font-size:1.5rem;
}
.navbar .nav-link.active,
.navbar .show > .nav-link{
  font-family:var(--font-secondary)!important;
  font-weight:var(--w-light);
}
.navbar-brand{
  font-family:var(--font-secondary)!important;
  font-weight:var(--w-regular);
}
.offcanvas .nav-link{
  font-family:var(--font-secondary)!important;
  font-weight:var(--w-light);
  font-size:1.5rem;
  color:#6e6e73;
  transition:color .3s;
}
.offcanvas .nav-link:hover{ color:var(--brand-color); }
.offcanvas .dropdown-item{
  font-family:var(--font-secondary)!important;
  font-weight:var(--w-light);
  font-size:1.2rem;
}
.offcanvas .dropdown-item:hover{ color:var(--brand-color); }
@media (max-width:576px){
  .navbar .nav-link, .offcanvas .nav-link{ font-size:1.25rem; }
}


/*GLOBAL: Misc utilities*/
.minh-400{ min-height:400px; }            


/* COMPONENT (OLD): hero-card (reference only)*/
/*
.hero-card{ 
  --hero-h:400px; 
  min-height:var(--hero-h); 
}
*/


/* COMPONENT: Generic hero image (main hero section)*/
.hero-img{
  display:block;
  margin:0 auto;
  max-height:300px;
  width:auto;
  max-width:100%;
  object-fit:contain;
}
@media (min-width:992px){
  .hero-img{ max-height:500px; }
}


/*COMPONENT: Image wrapper for product detail*/
#image-wrap{
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 60dvh;
  overflow: hidden;
  background: var(--bs-body-tertiary);
  border-radius: var(--bs-border-radius-xl, 1rem);
}
#product-img{
  display:block;
  position:absolute; 
  inset:0;
  width:100%; 
  height:100%;
  object-fit:cover;   
  object-position:center;
}


/*COMPONENT: Option card (radio-like cards)*/
.option-card{
  --ring: rgba(13,110,253,.2);
  border:1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  transition: border-color .15s, box-shadow .15s, background .15s;
  cursor: pointer;
}
.btn-check:checked + .option-card{
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem var(--ring);
  background: var(--bs-light);
}
.option-card:hover{
  border-color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
}
.btn-check:focus + .option-card,
.btn-check:focus-visible + .option-card{
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  .option-card{ transition: none; }
}


/*  PAGE: Rubber Brake – size list in cards*/
.product-size {
  min-height: 160px;           
  display: flex;
  flex-direction: column;
  justify-content: center;     
}


/*  SECTION: Product hero cards (SMART 4.0, คู่ปั่น, กันกระแทก, ยางขัดข้าว)*/
.hero-card{
  min-height: 360px;          /* base height on desktop */
  display: flex;
  flex-direction: column;
}

/* Image area at the bottom of hero-card */
.hero-card-img{
  margin-top: auto;           /* push image block to bottom */
  height: 360px;              /* same scale for all cards */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;           /* กันรูปล้นออกนอกกล่องไปทับหัวข้อ/ลิงก์ */
}

.hero-card-img img{
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* <picture> ที่ครอบ <img> ต้องไม่สร้างกล่องของตัวเอง
   เพื่อให้ <img> ใช้ CSS เดิมต่อทุกหน้า (กันรูปขยายผิดขนาด/ล้นทับเนื้อหา) */
picture{
  display: contents;
}


/* RESPONSIVE: Tablet layout (iPad 768–991.98px)*/
@media (min-width:768px) and (max-width:991.98px){

  /* ลดความสูงของการ์ดให้สมส่วนบนจอ tablet */
  .hero-card{
    min-height: 220px;
  }

  /* กรอบรูปด้านล่างให้เตี้ยลงตามการ์ด */
  .hero-card-img{
    height: 220px;
  }

  /* ย่อหัวข้อให้เล็กลงเล็กน้อย */
  .hero-card h2.display-4{
    font-size: 2.25rem;
  }

  /* ย่อข้อความคำอธิบาย */
  .hero-card .lead{
    font-size: 1.05rem;
  }
}

/* RFB page */
.card-1{
  --bs-card-border-radius: 18px;   /* ปรับมุมการ์ด */
  border-radius: var(--bs-card-border-radius) !important;
  overflow: hidden;
}

/* TQRB page */
/* กล่องรูป: ให้ overlay อิงกับกล่องนี้ + เปิด cqw */
/* ===================== TQRB: Photo + Overlay Labels (Drop-in) ===================== */

.photo{
  position: relative;
  max-width: 960px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 18px;
  container-type: inline-size;
}

.photo__img{
  width: 100%;
  height: auto;
  display: block;
}

.photo__overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ✅ ตั้ง “ฐานฟอนต์” ที่ label แล้วลูกใช้ em */
.photo .label{
  position: absolute;
  left: var(--x);
  top:  var(--y);
  transform: translate(-50%, -50%);
  text-align: center;

  font-size: clamp(8px, 2.8cqw, 13px) !important;

  max-width: 46%;
  /* ❌ อย่าใช้ anywhere ถ้าไม่อยากให้คำไทยแตกกลางคำ */
  overflow-wrap: normal;
  word-break: normal;

  color: rgba(0,0,0,.90);
  text-shadow: 0 6px 18px rgba(0,0,0,.10);
}

.photo .label__top{
  display: block;
  font-size: 1em !important;
  line-height: 1.05 !important;
  margin: 0 !important;
}

.photo .label__big{
  display: block;
  font-size: 2.2em !important;
  font-weight: 800 !important;
  line-height: 0.95 !important;
  margin: 0 !important;
}

/* ===== จูนฝั่งขวา ===== */
/* ขวาบนยังให้แคบได้ เพราะตั้งใจหลายบรรทัด */
.photo .label-right-top{
  max-width: 34% !important;
  transform: translate(-60%, -50%) !important;
}
.photo .label-right-top .label__big{
  font-size: 1.85em !important;
}

/* ✅ ขวาล่าง: ให้ “กบแดง” เป็นคำเดียว ไม่แตกบรรทัด */
.photo .label-right-bottom{
  max-width: 40% !important;                 /* ขยายพื้นที่ให้พอ */
  transform: translate(-60%, -50%) !important;
}
.photo .label-right-bottom .label__big{
  white-space: nowrap;                       /* กันแตกบรรทัด */
}

/* ✅ มือถือเล็กมาก ลดฐานลงอีก */
@container (max-width: 420px){
  .photo .label{
    font-size: clamp(7px, 2.4cqw, 11px) !important;
  }
  .photo .label__big{
    font-size: 2.0em !important;
  }
  .photo .label-right-top .label__big{
    font-size: 1.65em !important;
  }
  .photo .label-right-bottom{
    max-width: 46% !important;               /* มือถือให้กว้างขึ้นอีกนิด */
  }
}

/* =================== END TQRB =================== */
/* ===== FIX: กันคำไทยแตกกลางคำ + จูนฟอนต์มือถือ (วางท้ายสุดของ style.css) ===== */

/* 1) บังคับไม่ให้ตัดคำมั่ว ๆ ใน label (กัน overflow-wrap:anywhere จากที่อื่น) */
.photo .label{
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* 2) ขวาล่าง: “กบแดง” ต้องเป็นคำเดียว ไม่แตกบรรทัด */
.photo .label-right-bottom .label__big{
  white-space: nowrap !important;
}

/* 3) ขวาบน: อนุญาตให้แตกบรรทัดได้ (เพราะคุณใส่ <br> เอง) */
.photo .label-right-top .label__big{
  white-space: normal !important;
}

/* 4) มือถือ: ลดฐานฟอนต์ลงอีก และลดขวาบนให้เล็กลง เพื่อไม่ทับรูป */
@container (max-width: 520px){
  .photo .label{
    font-size: clamp(6px, 2.1cqw, 10px) !important;
  }
  .photo .label__big{
    font-size: 2.0em !important;
  }
  .photo .label-right-top .label__big{
    font-size: 1.55em !important;
  }
}

/* 5) มือถือเล็กมาก: เพิ่มพื้นที่ให้ฝั่งขวา กันบีบจนต้องแตกคำ */
@container (max-width: 380px){
  .photo .label-right-top{ max-width: 42% !important; }
  .photo .label-right-bottom{ max-width: 52% !important; }
}