/* ===============================
   Home blocks - base
   =============================== */

:root{
  --hb-gap: 24px;
  --hb-radius: 14px;
  --hb-border: rgba(0,0,0,.08);
  --hb-muted: rgba(0,0,0,.6);
}

/* 容器可能是 container / container-fluid max-c-f
   這裡只做通用收斂，不跟你的框架打架 */
.max-c-f{
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* 區塊標題 */
.title{
  margin-bottom: 18px;
}
.title.tCenter{
  text-align: center;
}
.title h3{
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .02em;
}
.title p{
  margin: 0;
  color: var(--hb-muted);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* editor 區塊（custom / form top/bottom 會用到） */
.blockEditorContent,
.customContent,
.page-editor-block{
  line-height: 1.8;
  font-size: 0.95rem;
}
.blockEditorContent:empty{
  display: none;
}
.customContent{
  background: rgba(255,255,255,.65);
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius);
  padding: 18px;
}

/* ===============================
   Row (product/album)
   =============================== */

.productRow,
.albumRow,
.rowList{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: var(--hb-gap);
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.productRow .item,
.albumRow .item,
.rowList .item{
  scroll-snap-align: start;
}

.productRow .item a,
.albumRow .item a,
.rowList .item a{
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.productRow .item a:hover,
.albumRow .item a:hover,
.rowList .item a:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

.productRow .IMG span,
.albumRow .IMG span,
.rowList .IMG span{
  display: block;
  position: relative;
  padding-top: 68%;  /* 影像比例 */
  background: rgba(0,0,0,.03);
}
.productRow .IMG img,
.albumRow .IMG img,
.rowList .IMG img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.productRow .TXT,
.albumRow .TXT,
.rowList .TXT{
  padding: 12px 14px 14px;
}
.productRow .TXT h4,
.albumRow .TXT h4,
.rowList .TXT h4{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}
.productRow .TXT .price,
.productRow .TXT .meta,
.albumRow .TXT .count,
.albumRow .TXT .meta,
.rowList .TXT .meta{
  margin: 0;
  font-size: 14px;
  color: var(--hb-muted);
}

/* ===============================
   Grid (product/album)
   =============================== */

.productGrid,
.albumGrid,
.gridList{
  display: grid;
  gap: var(--hb-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1200px){
  .productGrid,
  .albumGrid,
  .gridList{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px){
  .productGrid,
  .albumGrid,
  .gridList{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 420px){
  .productGrid,
  .albumGrid,
  .gridList{
    grid-template-columns: 1fr;
  }
}

.productGrid .item a,
.albumGrid .item a,
.gridList .item a{
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.productGrid .item a:hover,
.albumGrid .item a:hover,
.gridList .item a:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

.productGrid .IMG span,
.albumGrid .IMG span,
.gridList .IMG span{
  display: block;
  position: relative;
  padding-top: 70%;
  background: rgba(0,0,0,.03);
}
.productGrid .IMG img,
.albumGrid .IMG img,
.gridList .IMG img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.productGrid .TXT,
.albumGrid .TXT,
.gridList .TXT{
  padding: 12px 14px 14px;
}
.productGrid .TXT h4,
.albumGrid .TXT h4,
.gridList .TXT h4{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
}
.productGrid .TXT .price,
.albumGrid .TXT .count,
.gridList .TXT .meta{
  margin: 0;
  font-size: 14px;
  color: var(--hb-muted);
}

/* ===============================
   QA (static accordion-like)
   =============================== */

.qaList{
  display: grid;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}
.qaItem{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-radius);
  padding: 14px 16px;
}
.qaQuestion h4{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
}
.qaAnswer p{
  margin: 0;
  color: rgba(0,0,0,.72);
  line-height: 1.75;
}

/* QA accordion behavior */
.qaAccordion .qaAnswer{
  display: none;
}

.qaAccordion .qaItem.is-open .qaAnswer{
  display: block;
}

/* 讓整個題目可點（button reset） */
.qaToggle{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.qaToggle h4{
  margin: 0; /* 你原本 h4 有 margin-bottom，改成由 qaItem 控制 */
}

/* 小箭頭（純視覺） */
.qaAccordion .icon{
  width: 20px;
  height: 20px;
  position: relative;
}
.qaAccordion .icon::before{
  content: "";
  position: absolute;
  inset: 6px 4px 6px 4px;
  border-right: 2px solid rgba(0,0,0,.55);
  border-bottom: 2px solid rgba(0,0,0,.55);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .15s ease;
}
.qaAccordion .qaItem.is-open .icon::before{
  transform: rotate(-135deg);
}

/* ===============================
   Form (home)
   =============================== */

.page-form-block,
.page-editor-block--top,
.page-editor-block--bottom,
.qaList{
  max-width: none;
  margin: 0;
}
.page-editor-block--top{
  margin-bottom: 18px;
}
.page-editor-block--bottom{
  margin-top: 18px;
}
.btnBox{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.btnBox .btn{
  min-width: 110px;
}

/* 小調整：讓 section 內背景圖不爆 */
/*section[id^="i_"]{*/
section[class*="i_"]{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}