/* brand-style.css */

main section { text-align: center; padding: 1rem 1rem; }
main h1 { font-size: 1.8rem; color: #E76F51; }



/* 規格區塊 */
#specs {
  padding: 2rem 1rem;
  background-color: #FFFDF9;
  text-align: center;
}

#specs h2 {
  text-align: center;
  font-size: 1.8rem;
  color: #E76F51; /* 珊瑚紅，顯眼且呼應品牌色 */
  margin-bottom: 2rem;
  font-weight: bold;
}


.spec-grid {
  display: flex;
    justify-content: center;   /* 水平置中 */
  align-items: center;       /* 垂直置中（若有高度） */
  gap: 20px;                 /* 卡片間距 */
  flex-wrap: wrap;           /* 多個卡片時自動換行 */

}

.spec-card {
  max-width: 300px;
  background-color: #FFFFFF;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

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

.spec-card p {
  font-size: 1rem;
  color: #3E3E3E;
  line-height: 1.5;
}







/* 口味網格 */
#flavors {
  padding: 2rem;
  background-color: #FFFFFF;
  text-align: center;
}

#flavors h2 {
  color: #F4A261;
  margin-bottom: 1.5rem;
}

.flavor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  justify-items: center;
  padding: 1rem 0.5rem; /* 縮小左右內距，讓圖片有更多空間變大 */
}

.flavor-card {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden; /* 確保圖片的圓角不會被切掉 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* 增加輕微陰影提升質感 */
  transition: transform 0.3s ease;
}

.flavor-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.flavor-card p {
  padding: 0.8rem 0.5rem;
  margin: 0;
  font-weight: bold;
  font-size: 1rem;
  color: #555;
  text-align: center;
}

.flavor-card:hover {
  transform: translateY(-5px); /* 鼠標移上去會微微浮起 */
}


@media (max-width: 768px) {
.flavor-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.8rem; 
  }
  
   .flavor-grid {
    /* 直接強制指定為「兩欄」，不讓 Safari 運算 minmax */
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 10px;        /* 縮小間距 */
    padding: 10px 5px; /* 縮小左右留白 */
  } 
  
.flavor-card {
    padding: 2px; /* 再次縮小卡片白邊，讓圖片視覺上更大 */
  }
  
.flavor-card p {
  font-size: 0.9rem; /* 手機版文字稍小一點 */
 }
}
/* --- 針對平板以下 (例如 iPad, 手機橫向) --- */
@media (max-width: 1024px) {
  .flavor-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

/* --- 針對手機版 (iOS Safari 強制修正區塊) --- */
@media (max-width: 480px) {
  .flavor-grid {
    /* 直接強制指定為「兩欄」，不讓 Safari 運算 minmax */
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 10px;        /* 縮小間距 */
    padding: 10px 5px; /* 縮小左右留白 */
  }

  .flavor-card {
    width: 100%;
    padding: 0;      /* 移除卡片內距，讓圖片最大化 */
  }

  .flavor-card p {
    font-size: 0.85rem; /* 手機版字體縮小點，避免擠壓空間 */
    padding: 5px 2px;
  }
}