/* Base Styles - Typography, Sections, Common Elements */
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--dark);background:#fff;overflow-x:hidden}

/* Section Commons */
section{padding:clamp(56px,7vw,96px) var(--pad)}
.sec-title{
  font-family:'Bai Jamjuree',sans-serif;
  font-weight:700;font-size:clamp(28px,3.5vw,46px);
  line-height:1.2;letter-spacing:.37px;color:var(--dark);
}
.sec-sub{
  font-size:clamp(15px,1.5vw,20px);color:var(--blue);
  letter-spacing:.26px;margin-top:12px;
}
.sec-head{text-align:center;margin-bottom:clamp(32px,5vw,56px)}

/* Breadcrumb - shared across catalog, blog, article, contact, product */
.breadcrumb{
  padding:20px var(--pad) 12px;
  display:flex;gap:8px;align-items:center;
  font-size:14px;color:var(--blue);
}
.breadcrumb a{color:var(--blue);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--dark)}
.breadcrumb svg{width:6px;height:10px;flex-shrink:0}

/* Contact Info Block - shared home + contact page */
.contact-inner{display:grid;grid-template-columns:1fr 1.7fr;gap:clamp(40px,6vw,80px)}
.contact-h{
  font-family:'Bai Jamjuree',sans-serif;
  font-weight:700;font-size:clamp(32px,4vw,48px);
  color:var(--dark);letter-spacing:-.5px;margin-bottom:36px;
  line-height:1.1;
}
.cinfo-item{display:flex;gap:16px;margin-bottom:24px;align-items:flex-start}
.cinfo-icon{
  width:48px;height:48px;min-width:48px;background:var(--wb);
  border-radius:12px;display:flex;align-items:center;justify-content:center;
}
.cinfo-icon svg{width:24px;height:24px;stroke:var(--dark);fill:none;stroke-width:2}
.cinfo-label{
  font-family:'Bai Jamjuree',sans-serif;
  font-weight:700;font-size:20px;color:var(--dark);
  margin-bottom:4px;letter-spacing:.26px;
}
.cinfo-val{font-size:15px;color:var(--blue);line-height:1.5;letter-spacing:.26px}
.cinfo-phones{display:flex;flex-direction:column;gap:6px}
.cinfo-phones a{color:var(--blue);text-decoration:none;transition:color .15s}
.cinfo-phones a:hover{color:var(--gold)}
.cinfo-val a{color:var(--blue);text-decoration:none;transition:color .15s}
.cinfo-val a:hover{color:var(--gold)}

/* Responsive shared */
@media(max-width:900px){
  .contact-inner{grid-template-columns:1fr}
}
@media(max-width:560px){
  .breadcrumb{font-size:12px;padding:12px var(--pad) 8px}
}
