/* Hanwen homepage fixed layout refinement | Fashion OS 3.0 */
body[data-page-type="index"] {
  --hw-home-width: 1280px;
  --hw-home-text: #302820;
  background: #efefef;
}

/* Align native sections with the advanced gallery/recommendation modules. */
body[data-page-type="index"] .section-featured-collection .page-width,
body[data-page-type="index"] .section-blog-container .page-width {
  max-width: var(--hw-home-width);
  padding-inline: 28px;
  margin-inline: auto;
}

/* Editorial heading shared by the two native modules. */
body[data-page-type="index"] .section-featured-collection h2,
body[data-page-type="index"] .section-blog-container h2 {
  color: var(--hw-home-text);
  font-family: "Noto Serif SC", "Noto Serif TC", serif !important;
  font-weight: 500 !important;
  font-size: clamp(24px, 2.3vw, 30px);
  line-height: 1.35;
  letter-spacing: .025em;
}

/* Featured tea: centre tabs and sparse collections without altering cards. */
body[data-page-type="index"] .featured-collection__tabs-header {
  justify-content: center;
  margin-block-end: 24px;
}
body[data-page-type="index"] .featured-collection__tabs-list {
  justify-content: center;
  gap: 12px;
  max-width: 100%;
}
body[data-page-type="index"] .featured-collection__tab {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}
@media (min-width: 960px) {
  body[data-page-type="index"] .featured-collection__track:has(>li:only-child),
  body[data-page-type="index"] .featured-collection__track:has(>li:nth-child(2):last-child) {
    justify-content: center;
  }
}

/* Blog introduction and readable article grid. */
body[data-page-type="index"] .hw-blog-subtitle {
  max-width: 680px;
  margin: -8px auto 2px;
  color: #6d665f;
  font-family: "Noto Sans SC", "Noto Sans TC", sans-serif;
  font-size: 15px;
  line-height: 1.75;
  text-align: center;
}
body[data-page-type="index"] .section-blog-container .block-articles {
  column-gap: 20px;
  row-gap: 22px;
}

@media (max-width: 959px) {
  body[data-page-type="index"] .section-featured-collection .page-width,
  body[data-page-type="index"] .section-blog-container .page-width {
    padding-inline: 18px;
  }
  body[data-page-type="index"] .featured-collection__tabs-header {
    margin-block-end: 18px;
  }
  body[data-page-type="index"] .featured-collection__tabs-list {
    justify-content: flex-start !important;
    gap: 8px;
  }
  body[data-page-type="index"] .featured-collection__tab {
    padding: 9px 14px;
    font-size: 13px;
  }
  body[data-page-type="index"] .hw-blog-subtitle {
    max-width: 100%;
    margin-top: -5px;
    font-size: 14px;
    padding-inline: 6px;
  }
}