/* ==========================================================================
   Product List page stylesheet (archive-product.php + taxonomy-product_category.php)
   Page-specific styles only. Shared styles live in assets/css/style.css
   (header/footer/product card/page-banner/page-sidebar etc).
   Visual replica of the static products-list template.
   Loaded by functions.php jc_assets() on is_post_type_archive('product') || is_tax('product_category').
   ========================================================================== */

/* ---------- Product list grid: 3-col x (PC) / 2-col (mobile) ----------
   Overrides the homepage 4-col .proList for the archive grid. */
.pl-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
}

/* ---------- Product card: keep compact like the homepage cards ----------
   Force square thumbnail regardless of the img width/height attributes. */
.pl-grid .listBox {
  display: flex;
  flex-direction: column;
}
.pl-grid .imgHoverAn img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto !important;
  object-fit: cover;
}
/* Tighter padding around the image than the homepage 2rem, to keep height low */
.pl-grid .ImghidCont {
  padding: 1.2rem 1.2rem 1rem;
}

/* ---------- Product card: title + Learn More button (no description) ----------
   Matches the WP homepage card: title then a blue .card-more button. */
.pl-grid .listBox .listTxt {
  padding: 0.4rem 1.2rem;
}
/* Pin the Learn More button to the bottom via margin-top:auto */
.pl-grid .pl-learn {
  margin-top: auto;
  padding: 0.4rem 1.2rem 1.6rem;
}

/* ---------- Product grid: 9 per page (posts_per_page=9) ----------
   PC 3×3 = 9 cards; mobile 2 columns. No 10th-card hiding needed since
   the query already returns 9 per page. */

/* ---------- Mobile category nav bar (mobile only; PC hidden) ----------
   Shows current archive name (All Categories on product root, category name
   on taxonomy pages); hamburger on the right expands the product_category list. */
.pl-mnav { display: none; }

/* ---------- Pagination (mirror .pagination > ul.pageBtnCon) ---------- */
.pl-pagination {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.pageBtnCon {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.pageBtnCon li { margin: 0; }
.pageBtnCon li a,
.pageBtnCon li .pl-pageNum,
.pageBtnCon li .pl-pagePrev,
.pageBtnCon li .pl-pageNext,
.pageBtnCon li .pl-pageDots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 4rem;
  height: 4rem;
  padding: 0 1.2rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--text-dark);
  background: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.pageBtnCon li a:hover,
.pageBtnCon li a.pl-pageNum:hover,
.pageBtnCon li a.pl-pagePrev:hover,
.pageBtnCon li a.pl-pageNext:hover {
  background: var(--themeColor1);
  border-color: var(--themeColor1);
  color: #fff;
}
/* active page is a span (from paginate_links current) */
.pageBtnCon li .pl-pageNum.active {
  background: var(--themeColor1);
  border-color: var(--themeColor1);
  color: #fff;
  cursor: default;
}
.pageBtnCon li .pl-pagePrev .arrow,
.pageBtnCon li .pl-pageNext .arrow {
  font-family: var(--font-body);
  font-size: 1.6rem;
  line-height: 1;
}
/* dots ellipsis */
.pageBtnCon li .pl-pageDots {
  border: 0;
  background: none;
  cursor: default;
  color: var(--themeColor4);
}
/* Prev on first page / Next on last page: greyed out & not clickable */
.pageBtnCon li .pl-pagePrev.pl-disabled,
.pageBtnCon li .pl-pageNext.pl-disabled {
  color: var(--themeColor4);
  border-color: var(--border);
  background: #fafafa;
  cursor: default;
  pointer-events: none;
}

/* ---------- Sidebar width override（列表页专属） ----------
   侧边栏从公共 30rem 加宽到 38rem，右侧主区域相应收窄，
   产品卡片图片不会过大（详情页 product-single.css 另行调整）。 */
.page-sidebar { flex: 0 0 38rem; }

/* ---------- Sidebar box（与原站观感一致） ----------
   列表页侧栏样式与详情页 product-single.css 保持一致（列表页只加载本文件，
   故在此复制详情页侧栏样式，避免漏样式）。 */
.side-box {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(216, 216, 216, 0.6);
  padding: 2.6rem 2.4rem 3rem;
}
.side-title {
  font-family: var(--font-head);
  font-weight: bold;
  font-size: 3rem;
  line-height: 1.7;
  color: #000;
  margin: 0 0 1.2rem;
}
.side-search {
  display: flex;
  align-items: center;
  border: 1px solid rgba(14, 78, 163, 1);
  border-radius: 25px;
  padding: 0 0.4rem 0 1.6rem;
  margin: 0 0 1.6rem;
}
.side-search input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  font-size: 1.4rem;
  color: #666;
  padding: 1rem 0.6rem;
  outline: none;
}
.side-search input::placeholder { color: #666; }
.side-search button {
  flex: 0 0 auto;
  width: 4.2rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--themeColor1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}
.side-search button:hover { background: var(--themeColor2); }
.side-search .yiyingbaoicon { font-size: 1.8rem; }

/* ---------- Sidebar category list ---------- */
.side-cats { list-style: none; }
.side-cat-link {
  display: block;
  font-weight: bold;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #000;
  padding: 1rem 1rem 1rem 1.4rem;
  margin-bottom: 0.4rem;
  border-left: 3px solid transparent;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.side-cat-link p { display: inline; }
.side-cat-link:hover,
.side-cat-link.selected {
  color: var(--themeColor1);
  border-left-color: var(--themeColor1);
  background: rgba(23, 42, 136, 0.04);
}

/* ---------- Sidebar order-now / email ---------- */
.side-sub {
  font-family: var(--font-head);
  font-weight: bold;
  font-size: 2rem;
  line-height: 1.7;
  color: var(--themeColor3);
  background: var(--themeColor1);
  padding: 0.6rem 1.4rem;
  margin: 1.8rem 0 0.8rem;
  border-radius: 3px;
}
.side-email {
  display: block;
  max-width: 41.3rem;
  background: var(--themeColor1);
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: left;
  padding: 1.1rem 1.6rem;
  border-radius: 3px;
  transition: background 0.3s;
  word-break: break-all;
}
.side-email:hover { background: var(--themeColor2); }

@media (max-width: 960px) { .side-email { max-width: 100%; } }

/* ---------- Sidebar: "Choose our four reasons" ----------
   title = reason_title (default empty → whole block hides when empty).
   items = reason_group (reason_1..3 icon/title/desc). icon = Image URL (SVG).
   Falls back to a yiyingbaoicon glyph when icon is empty. */
.side-reasons {
  margin-top: 1.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--border);
}
.side-reasons-title {
  font-family: var(--font-head);
  font-weight: bold;
  font-size: 2rem;
  line-height: 1.5;
  color: #000;
  margin-bottom: 1.2rem;
}
.reason-item {
  display: flex;
  align-items: stretch;
  gap: 1.4rem;
  padding: 1rem 0;
}
.reason-item + .reason-item { border-top: 1px solid #efefef; }
/* Icon sized to span the whole two-line text block (title + desc) and centered. */
.reason-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  line-height: 1;
}
.reason-icon-img {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}
.reason-item .yiyingbaoicon {
  font-size: 4rem;
  font-weight: 400;
}
.reason-txt { flex: 1 1 auto; min-width: 0; }
.reason-title {
  font-family: var(--font-head);
  font-weight: bold;
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--text-dark);
}
.reason-desc {
  font-family: var(--font-body);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .pl-grid { grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
}

@media (max-width: 960px) {
  .page-sidebar { flex-basis: 32rem; }

  /* ===== Override homepage mobile card styles that conflict with the
     archive grid =====
     style.css (@media max-width:960px) forces .listTxt .textLineP to
     -webkit-line-clamp:2 + overflow:hidden, and turns the last listTxt
     (Learn More) into a fixed-height white button block. The archive card
     has TWO listTxt rows (title/learn), so neutralise those so titles fully
     show and Learn More is the blue .card-more button. */
  .pl-grid .listTxt {
    text-align: center;
    padding: 0.5rem 0.8rem;
  }
  .pl-grid .listTxt .textLineP {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
  }
  /* Learn More: undo homepage fixed-height white button */
  .pl-grid .listBox .listTxt:last-child {
    flex: none;
    display: block;
    height: auto;
    margin-top: 0;
    padding: 0.4rem 0.8rem 1.2rem;
    background: none;
  }
  .pl-grid .listBox .listTxt:last-child .textLineP {
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--themeColor1);
    text-transform: uppercase;
  }
}

@media (max-width: 767px) {
  .pl-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  /* Mobile: image edge-to-edge (no left/right gap) so it scales up;
     keep top/bottom spacing so the card structure is unchanged. */
  .pl-grid .ImghidCont { padding: 1rem 0; }
  .pl-grid .listTxt { padding: 0.45rem 0.6rem; }
  .pl-grid .listTxt .textLineP {
    font-size: 1.5rem;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .pl-grid .pl-learn { padding: 0.3rem 0.6rem 1.1rem; }
  .pl-grid .card-more { padding: 0.7rem 1.6rem; font-size: 1.3rem; }

  /* ---------- Mobile category nav bar ---------- */
  .pl-mnav {
    display: block;
    margin-bottom: 2rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
  }
  .pl-mnav-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.2rem 1.4rem;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-head);
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--text-dark);
  }
  .pl-mnav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 22px;
    height: 18px;
  }
  .pl-mnav-hamburger span {
    display: block;
    height: 2px;
    background: var(--themeColor1);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
  }
  .pl-mnav.open .pl-mnav-hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .pl-mnav.open .pl-mnav-hamburger span:nth-child(2) { opacity: 0; }
  .pl-mnav.open .pl-mnav-hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .pl-mnav-list {
    list-style: none;
    border-top: 1px solid var(--border);
    padding: 0.6rem 0;
  }
  .pl-mnav-list a {
    display: block;
    padding: 0.9rem 1.4rem;
    font-size: 1.4rem;
    color: var(--text-dark);
    text-decoration: none;
  }
  .pl-mnav-list a:hover,
  .pl-mnav-list a.selected {
    color: var(--themeColor1);
    background: rgba(23, 42, 136, 0.04);
  }

  .pageBtnCon { gap: 0.4rem; }
  .pageBtnCon li a,
  .pageBtnCon li .pl-pageNum,
  .pageBtnCon li .pl-pagePrev,
  .pageBtnCon li .pl-pageNext,
  .pageBtnCon li .pl-pageDots {
    min-width: 3.4rem;
    height: 3.4rem;
    padding: 0 0.8rem;
    font-size: 1.3rem;
  }
  /* hide page dots on small screens to avoid overflow */
  .pageBtnCon li .pl-pageDots { display: none; }
}

@media (max-width: 480px) {
  .pl-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .pl-grid .ImghidCont { padding: 0.8rem 0; }
}