body{
font-family:"Microsoft JhengHei",sans-serif;
background:#f5f5f5;
margin:0;
padding:20px;
color:#222;
}

.hero{
background:white;
border-radius:18px;
padding:35px 30px;
margin:0 auto 30px auto;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
max-width:1200px;
box-sizing:border-box;
}

h1{
color:#0066cc;
font-size:48px;
margin:0 0 10px 0;
}

.subtitle{
font-size:28px;
font-weight:bold;
margin:0 0 15px 0;
}

.hero-text{
font-size:24px;
line-height:1.8;
margin:0 0 20px 0;
}

.hero-actions{
display:flex;
flex-wrap:wrap;
gap:15px;
align-items:center;
}

main{
max-width:1200px;
margin:0 auto;
}

.section-block{
background:white;
border-radius:15px;
padding:25px;
margin:0 auto 25px auto;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
box-sizing:border-box;
}

.section-block h2{
color:#0066cc;
font-size:40px;
margin:0 0 15px 0;
}

.section-note{
font-size:24px;
line-height:1.8;
margin:0 0 25px 0;
}

.card{
background:#ffffff;
border-radius:15px;
padding:25px;
margin:0 auto 25px auto;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
width:100%;
box-sizing:border-box;
border:1px solid #eeeeee;
}

.product-image{
width:100%;
height:auto;
display:block;
margin:0 auto 20px auto;
border-radius:10px;
}

.card h2{
color:#0066cc;
font-size:42px;
margin-top:15px;
}

.card p{
font-size:28px;
line-height:1.8;
}

.service-grid{
 display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.service-grid h2{
grid-column:1 / -1;
}

.service-card,
.project-card{
background:#fafafa;
border-radius:15px;
padding:25px;
margin-bottom:20px;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
border:1px solid #eeeeee;
}

.service-card h3,
.project-card h3{
color:#0066cc;
font-size:32px;
margin:0 0 15px 0;
}

.service-card p,
.project-card p,
.about-section p,
.contact-section p{
font-size:24px;
line-height:1.8;
margin:10px 0;
}

.line-btn,
.blue-btn,
.video-btn{
display:inline-block;
color:white;
text-decoration:none;
padding:15px 30px;
border-radius:10px;
font-size:24px;
margin-top:15px;
box-sizing:border-box;
}

.line-btn{
background:#06C755;
}

.blue-btn{
background:#0066cc;
}

.video-btn{
background:#ff0000;
}

.line-btn:hover,
.blue-btn:hover,
.video-btn:hover{
opacity:0.88;
}

@media (min-width: 900px){
.service-grid{
grid-template-columns:repeat(3,1fr);
}

.service-grid h2{
grid-column:1 / 4;
}
}

@media (max-width: 1024px){
h1{
font-size:38px;
}

.subtitle,
.hero-text,
.section-note{
font-size:20px;
}

.section-block h2{
font-size:34px;
}

.card h2{
font-size:34px;
}

.card p,
.service-card p,
.project-card p,
.about-section p,
.contact-section p{
font-size:22px;
}

.service-card h3,
.project-card h3{
font-size:28px;
}
}

@media (max-width: 768px){
body{
padding:10px;
}

.hero,
.section-block{
padding:18px;
}

h1{
font-size:30px;
}

.subtitle{
font-size:20px;
}

.hero-text,
.section-note{
font-size:18px;
}

.section-block h2{
font-size:30px;
}

.card{
padding:15px;
}

.card h2{
font-size:28px;
}

.card p,
.service-card p,
.project-card p,
.about-section p,
.contact-section p{
font-size:18px;
}

.service-card h3,
.project-card h3{
font-size:24px;
}

.line-btn,
.blue-btn,
.video-btn{
width:100%;
text-align:center;
font-size:18px;
padding:14px 18px;
}
}
.logo-header{
display:flex;
align-items:center;
gap:20px;
flex-wrap:wrap;
}

.site-logo{
width:120px;
height:120px;
object-fit:contain;
border-radius:18px;
background:white;
}
.logo-header{
    display:flex;
    align-items:center;
    gap:20px;
}

.site-logo{
    width:100px !important;
    height:100px !important;
    object-fit:contain;
}

.service-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.service-card {
    width: 380px;
}

/* 商品專區：類別按鈕 + 卡片式排列 */
.product-section {
  text-align: center;
}

.category-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 0 22px 0;
  margin-bottom: 25px;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}

.category-btn {
  border: 1px solid #0066cc;
  background: #ffffff;
  color: #0066cc;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

.category-btn:hover,
.category-btn.active {
  background: #0066cc;
  color: #ffffff;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: stretch;
}

.product-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
}

.product-image-wrap {
  width: 100%;
  height: 230px;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eeeeee;
}

.product-card .product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
  border-radius: 0;
}

.product-info {
  padding: 18px;
}

.product-category {
  display: inline-block;
  background: #eef6ff;
  color: #0066cc;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 16px !important;
  line-height: 1.4 !important;
  margin: 0 0 10px 0 !important;
}

.product-card h3 {
  color: #0066cc;
  font-size: 26px;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.product-price {
  font-size: 24px !important;
  font-weight: bold;
  color: #d4380d;
  margin: 8px 0 !important;
}

.product-stock,
.product-status {
  font-size: 20px !important;
  line-height: 1.6 !important;
  margin: 6px 0 !important;
}

.product-btn {
  display: inline-block;
  background: #06C755;
  color: #ffffff;
  text-decoration: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 18px;
  margin-top: 12px;
}

.product-btn:hover {
  opacity: 0.88;
}

.loading-text,
.empty-text {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 22px;
}

@media (min-width: 1000px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .category-btn {
    font-size: 16px;
    padding: 10px 14px;
  }

  .product-image-wrap {
    height: 200px;
  }

  .product-card h3 {
    font-size: 22px;
  }

  .product-price {
    font-size: 22px !important;
  }

  .product-stock,
  .product-status {
    font-size: 18px !important;
  }
}