/* 两级分类导航：单行切换 / 双行并列 */

.home-cat-nav,
.product-cat-nav {
  width: 100%;
  box-sizing: border-box;
}

.home-cat-nav {
  margin-bottom: clamp(4px, 1vw, 8px);
}

.cat-nav--single-row .hcat-sub-wrap,
.cat-nav--single-row .product-cat-sub-wrap {
  display: none !important;
}

.cat-nav--single-row .hcat-row--home {
  padding-bottom: clamp(14px, 3vw, 22px);
}

/* 双行模式（产品页等） */
.hcat-sub-wrap {
  margin: 0 0 clamp(10px, 2.5vw, 16px);
  width: 100%;
  box-sizing: border-box;
}

.hcat-sub-wrap[hidden] {
  display: none !important;
}

.hcat-row--sub {
  margin-top: clamp(6px, 1.5vw, 10px);
  padding-top: clamp(6px, 1.5vw, 10px);
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.hcat-item--sub .hcat-item__icon-wrap {
  width: clamp(40px, 10vw, 52px);
  height: clamp(40px, 10vw, 52px);
}

.hcat-item--sub .hcat-item__label {
  font-size: clamp(11px, 2.8vw, 13px);
}

/* 产品页：一级 + 二级同一容器，网格对齐 */
.product-cat-nav {
  max-width: none;
  margin-bottom: clamp(12px, 2.5vw, 18px);
  overflow: hidden;
}

.product-cat-nav .product-cat-cards,
.product-cat-nav .product-cat-sub-wrap,
.product-cat-nav .product-cat-sub-row {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.product-cat-nav .product-cat-cards {
  margin-bottom: clamp(10px, 2vw, 14px);
}

.cat-nav--single-row .product-cat-nav .product-cat-cards {
  margin-bottom: 0;
}

.product-cat-sub-wrap {
  margin: 0;
}

.product-cat-sub-wrap[hidden] {
  display: none !important;
}

/* 二级：单行横向滚动，卡片紧贴图片无留白 */
.product-cat-sub-wrap {
  overflow: hidden;
}

.product-cat-sub-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: clamp(8px, 1.8vw, 10px);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.product-cat-sub-row .product-cat-card {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
}

/* 一级分类：略大于二级，桌面保持网格 */
.product-cat-nav .product-cat-cards .product-cat-card:not(.product-cat-card--sub) {
  padding: clamp(6px, 1.2vw, 10px) clamp(4px, 0.8vw, 6px);
}

.product-cat-nav .product-cat-cards .product-cat-card:not(.product-cat-card--sub) img {
  width: clamp(64px, 14vw, 88px);
  height: clamp(64px, 14vw, 88px);
  border-radius: 12px;
  margin-bottom: clamp(6px, 1.2vw, 10px);
}

.product-cat-nav .product-cat-cards .product-cat-card:not(.product-cat-card--sub) span {
  font-size: clamp(13px, 2.8vw, 15px);
  font-weight: 700;
}

/* 窄屏：一级与二级、商品网格左对齐；一级横向排列，图标仅略大于二级 */
@media (max-width: 900px) {
  .product-cat-nav .product-cat-cards {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    grid-template-columns: unset;
    gap: clamp(8px, 1.8vw, 10px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 0;
    padding-bottom: 4px;
    margin-bottom: clamp(10px, 2vw, 14px);
  }

  .product-cat-nav .product-cat-cards .product-cat-card:not(.product-cat-card--sub) {
    --l1-cat-img: clamp(54px, 12vw, 60px);
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: var(--l1-cat-img);
    min-width: var(--l1-cat-img);
    max-width: calc(var(--l1-cat-img) + 28px);
    padding: 0;
    margin: 0;
    text-align: center;
    scroll-snap-align: start;
  }

  .product-cat-nav .product-cat-cards .product-cat-card:not(.product-cat-card--sub) img {
    width: var(--l1-cat-img);
    height: var(--l1-cat-img);
    margin: 0 0 4px;
    border-radius: 10px;
  }

  .product-cat-nav .product-cat-cards .product-cat-card:not(.product-cat-card--sub) span {
    display: block;
    width: 100%;
    padding: 2px 2px 4px;
    margin: 0;
    font-size: clamp(11px, 2.6vw, 12px);
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* 二级分类：横向排列，图片尺寸=卡片可视区（无内边距留白） */
.product-cat-sub-wrap {
  padding-top: clamp(8px, 1.6vw, 12px);
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.product-cat-sub-row .product-cat-card--sub {
  --sub-cat-img: clamp(48px, 11vw, 56px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: var(--sub-cat-img);
  min-width: var(--sub-cat-img);
  max-width: calc(var(--sub-cat-img) + 24px);
  padding: 0;
  margin: 0;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  scroll-snap-align: start;
  transform: none;
  box-shadow: none;
}

.product-cat-sub-row .product-cat-card--sub:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

.product-cat-sub-row .product-cat-card--sub img {
  display: block;
  width: var(--sub-cat-img);
  height: var(--sub-cat-img);
  margin: 0 0 4px;
  padding: 0;
  border: none;
  border-radius: 10px;
  object-fit: cover;
  background: var(--input-bg);
  transition: opacity 0.15s, transform 0.15s;
}

.product-cat-sub-row .product-cat-card--sub:hover img {
  opacity: 0.92;
}

.product-cat-sub-row .product-cat-card--sub span {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 4px 3px 5px;
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--muted);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.product-cat-card--sub.product-cat-card--active {
  border: none;
  box-shadow: none;
}

.product-cat-card--sub.product-cat-card--active img {
  box-shadow: 0 0 0 2px var(--accent2, #0ea5e9);
}

.product-cat-card--sub.product-cat-card--active span {
  color: var(--accent2, #0ea5e9);
  font-weight: 600;
}

@media (min-width: 901px) {
  .product-cat-nav .product-cat-cards {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

/* 单行模式：子级卡片与一级同尺寸 */
.cat-nav--single-row .hcat-item--sub {
  animation: catNavFadeIn 0.22s ease;
}

@keyframes catNavFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 901px) {
  .cat-nav--single-row .hcat-row--home {
    gap: 14px;
  }

  .cat-nav--single-row .hcat-item:not(.hcat-item--back) {
    width: 96px;
  }
}

/* 产品页标题 + 我的收藏 */
.page-hero--with-actions .page-hero__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 2vw, 16px);
  width: 100%;
  box-sizing: border-box;
}

.page-hero--with-actions h1 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.2;
}

.products-my-favorites {
  flex: 0 0 auto;
  align-self: center;
  margin: 0;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  text-align: center;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .page-hero--with-actions .page-hero__row {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .page-hero--with-actions h1 {
    line-height: 1.2;
    padding: 0;
  }

  .products-page-inner .products-my-favorites.btn.btn-ghost.btn-sm {
    align-self: center;
    margin: 0;
    padding: 6px 10px !important;
    min-height: 0 !important;
    height: auto !important;
    font-size: var(--site-font-small, 12px) !important;
    line-height: 1.2 !important;
  }
}

/* 无边框分类图标：仅图片 + 文案（拼多多 / 淘宝风格） */
.product-cat-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(6px, 1.2vw, 10px) clamp(4px, 0.8vw, 6px);
}

.product-cat-card:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
  text-decoration: none;
}

.product-cat-card img {
  transition: opacity 0.15s, transform 0.15s;
}

.product-cat-card:hover img {
  opacity: 0.92;
}

.product-cat-card--active {
  border: none;
  box-shadow: none;
}

.product-cat-card--active img {
  box-shadow: 0 0 0 2px var(--accent2, #0ea5e9);
}

.product-cat-card--active span {
  color: var(--accent2, #0ea5e9);
}

.hcat-item {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(6px, 1.2vw, 8px) clamp(4px, 0.8vw, 6px);
}

.hcat-item:hover {
  transform: none;
  border-color: transparent;
}

.hcat-item--active {
  background: transparent;
  border: none;
  box-shadow: none;
}

.hcat-item__icon-wrap {
  border: none;
  background: transparent;
  transition: box-shadow 0.15s, opacity 0.15s;
}

.hcat-item:hover .hcat-item__icon-wrap {
  opacity: 0.92;
}

.hcat-item--active .hcat-item__icon-wrap {
  box-shadow: 0 0 0 2px var(--accent2, #0ea5e9);
}

.hcat-item--active .hcat-item__label {
  color: var(--accent2, #0ea5e9);
}

.home-three-rows-wrap--has-bg .hcat-item {
  background: transparent;
}