/* =========================================================
 * 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;
}

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


/* =========================================================
 * 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;
  }
}