/* =========================
   1. RESET（全局設定）
========================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;
  background-color: white;
  font-family: Arial, sans-serif;
}


/* =========================
   2. LAYOUT（版面結構）
========================= */

/* 主內容 */
#main {
  transition: margin-left .5s;
  padding: 20px;
  width: 100%;
}

/* Grid（產品區） */
.product-grid {
  display: flex;
  flex-wrap: wrap;
}

.responsive {
  width: 25%;
  padding: 6px;
}

@media (max-width: 800px) {
  .responsive {
    width: 50%;
  }
}

@media (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

/* 清除 float（舊結構保留） */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}


/* =========================
   3. COMPONENT（元件）
========================= */

/* 側邊 menu */
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  background-color: #ffd5d6;
  overflow-x: hidden;
  padding-top: 30px;
  transition: 0.5s;
}

.sidenav a {
  padding: 8px;
  text-decoration: none;
  font-size: 18px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 30px;
}


/* Top Nav */
.topnav {
  background-color: #ffd5d6;
  position: sticky;
  top: 0;
  z-index: 9;
}

.topnav a {
  float: left;
  display: block;
  padding: 14px 16px;
  text-decoration: none;
  color: #f2f2f2;
  font-size: clamp(14px, 2vw, 20px);
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Gallery（產品卡） */
.gallery img {
  width: 100%;
  height: auto;
  display: block;
}

.gallery {
  padding-bottom: 10px;
}


/* Footer */
.f1, .f2, .f3, .f4, .f5 {
  float: left;
  width: 20%;
}

@media (max-width: 800px) {
  .f1, .f2, .f3, .f4, .f5 {
    width: 100%;
  }
}


/* =========================
   4. FORM（表單）
========================= */

input[type=text], select, textarea {
  width: 100%;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type=text]:focus,
textarea:focus {
  background-color: lightyellow;
}

button,
input[type=submit],
input[type=reset] {
  background-color: #ffd5d6;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover,
input[type=submit]:hover,
input[type=reset]:hover {
  background-color: #fa9195;
}


/* =========================
   5. TYPOGRAPHY（字體）
========================= */

.price {
  font-size: calc(18px + 0.3vw);
  color: #fa9195;
  font-style: italic;
  font-weight: bold;
}

.price0 {
  text-decoration: line-through;
  color: gray;
}

.remarks5 {
  font-size: calc(20px + 0.3vw);
  color: #fa9195;
  font-style: italic;
  font-weight: bold;
}

.remarks6 {
  font-size: calc(17px + 0.3vw);
  color: #fa9195;
  font-style: italic;
  font-weight: bold;
}


/* =========================
   6. EFFECT（動畫）
========================= */

.fade-image {
  transition: opacity 0.8s ease-in-out;
  opacity: 1;
}

.fade-out {
  opacity: 0;
}

a svg {
  transition: transform 0.5s ease;
}

a svg:hover {
  transform: rotate(180deg);
}


/* =========================
   7. VIDEO
========================= */

video {
  width: 100%;
  height: auto;
}