/* ==================================================
   shop-series.css
   適用頁面：shop-aac.html / shop-material.html /
             shop-voicesymbol.html / shop-native.html /
             shop-hearing.html
   說明：這支 CSS 只在上述 5 個「系列頁」被 <link> 載入，
         不影響 shop-pen.html、shop-board.html、
         shop-switch.html、shop-book.html、
         shop-penpadkaka.html 及其他既有頁面。
   ================================================== */

/* #side-content *{font-family: "Open Sans", Arial !important;} */

 /* 平台版本標籤（例如 iPad版 / Web AI版 / PC版） */
.shop-item .platform-tag {
  color: brown;  
  /*display: inline-block;
  background: #1964c7;
  font-size: 12px;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 10px;
  margin-bottom: 8px;*/
}
.shop-item .remark{font-size: 12px; color: #797979; text-decoration:none;}

/* .shop-title-button {line-height: 25px;} */
.shop-title-button small{color: #fff67d; font-size: 75%;}

/* ---- 商品卡片排版：CSS Grid ----
   取代原本 Skeleton 的 float + .one_third + .column-last 寫法，
   不需要再手動計算每排最後一個要不要扣邊距，
   同排卡片高度也會自動拉齊，避免標題長短不一造成擠壓錯位。 */
#side-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 4%;
  align-self: flex-start; /* 避免被外層 section.container 的 flex stretch 拉伸到跟 #side-nav 一樣高（商品少的頁面會被硬拉開） */
  margin-bottom: 70px;
}

#side-content .shop-item {
  width: auto;
  float: none;
  margin-right: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

#side-content .shop-item > a {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* #side-content .shop-item figcaption {
  margin-top: auto;
} */

/* 分類標題（例如 <center><button class="shop-title-button">...</button></center>）
   在 Grid 版面下需強制跨滿整排，否則會被當成一般 grid item 只占第1欄 */
#side-content center {
  grid-column: 1 / -1;
  margin-bottom: -40px;
}

/* ---- 手機版 (< 768px)：改回單欄 ---- */
@media (max-width: 768px) {
  #side-content {
    grid-template-columns: 1fr;
    gap: 24px 0;
  }
  #side-content center {
    margin-bottom:unset;
  }
}

/* ---- 平板 (768px ~ 1024px)：改成 2 欄，避免卡片過窄 ---- */
@media (min-width: 769px) and (max-width: 1024px) {
  #side-content {
    grid-template-columns: repeat(3, 1fr);
  }
}