/* =====================================================================
   YAXIN Industrial Supplies — list.css
   Styles exclusive to products.html
   (two-column shop layout: left sidebar nav + right product grid,
    sort toolbar, Mi-style cards, pagination)
   ===================================================================== */

/* ===== Two-column shop layout ===== */
.shop-layout {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px; align-items: start;
  padding-bottom: 40px;
}
.shop-main { min-width: 0; }

/* ===== Left sidebar (secondary navigation) ===== */
/* Sticks clear of the fixed masthead (header + nav), which is now permanently on
   screen. Was a hard-coded 96px that only roughly matched the old nav; deriving it
   from --header-h keeps the gap correct when the header's clamp() resolves
   differently. + 8px is breathing room above the card. */
.side-nav {
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; position: sticky;
  top: calc(var(--header-h) + 54px + 8px);
  /* Each of the five categories now expands into its own sub-list, and Home
     Fans alone is ten rows. A sticky box taller than the viewport can never be
     scrolled far enough to reveal its tail, so cap it to the space under the
     masthead and let the list scroll inside instead. */
  max-height: calc(100vh - var(--header-h) - 54px - 8px - 16px);
  overflow-y: auto;
}
.side-head {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--red); color: #fff; padding: 14px 18px;
}
.side-head h3 { font-size: 16px; font-weight: 600; letter-spacing: .2px; }
.side-close {
  display: none; background: none; border: none; color: #fff;
  cursor: pointer; padding: 2px; line-height: 0;
}

.side-list { padding: 6px 0; }
.side-item { border-bottom: 1px solid var(--line); }
.side-item:last-child { border-bottom: none; }

.side-link {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; font-size: 14px; color: #444b52;
  transition: color .15s, background .15s;
}
.side-link .side-ico {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 6px;
  background: var(--red-light); color: var(--red);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.side-link .side-ico svg { width: 15px; height: 15px; }
.side-link .side-arrow {
  margin-left: auto; color: #b6bcc2; line-height: 0;
  flex-shrink: 0; padding: 4px; margin-right: -6px;
  transition: transform .2s, color .2s;
}
.side-link:hover .side-arrow { color: var(--red); }
.side-item.open > .side-link .side-arrow { transform: rotate(180deg); }
.side-link:hover { color: var(--red); background: #fafbfc; }
.side-link:hover .side-ico,
.side-link.active .side-ico { background: var(--red); color: #fff; }
.side-link.active { color: var(--red); font-weight: 600; }

/* Sub-menu — collapsible accordion at EVERY depth: the label navigates,
   the chevron toggles. 1600px ceiling clears the deepest nested list
   (Home Fans alone is ten rows; three-level chains need more headroom). */
.side-sub {
  max-height: 0; overflow: hidden;
  transition: max-height .25s ease;
}
.side-item.open > .side-sub { max-height: 1600px; }
.side-sub li a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 18px 8px 54px; font-size: 13px;
  color: #6a737c; transition: color .15s, background .15s;
}
.side-sub li a:hover { color: var(--red); background: var(--red-light); }
/* Same chevron the header flyout and the phone tree use in front of every
   level-3 row — this sidebar lists the very same product types. */
.side-sub li a::before {
  content: ''; flex-shrink: 0; width: 5px; height: 5px;
  border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor;
  transform: rotate(45deg); opacity: .45; transition: opacity .15s;
}
.side-sub li a:hover::before { opacity: 1; }

/* Sidebar promo block */
.side-promo {
  margin: 14px; padding: 18px 16px; border-radius: 8px;
  background: linear-gradient(150deg, #fff5f5, var(--red-light));
  border: 1px solid #f8d5d3; text-align: center;
}
.side-promo-tag {
  display: inline-block; font-size: 11px; font-weight: 600;
  background: var(--red); color: #fff; padding: 2px 10px;
  border-radius: 10px; margin-bottom: 10px; letter-spacing: .3px;
}
.side-promo h4 { font-size: 16px; color: var(--red); margin-bottom: 6px; }
.side-promo p { font-size: 12.5px; color: var(--gray); line-height: 1.6; margin-bottom: 14px; }
.side-promo-btn {
  display: block; background: var(--red); color: #fff; font-size: 13px;
  font-weight: 600; padding: 9px 0; border-radius: 4px;
  transition: background .15s;
}
.side-promo-btn:hover { background: var(--red-dark); }

/* ===== Sidebar mask (the drawer trigger was removed — see .side-nav note) ===== */
.side-mask {
  /* Same reasoning as .nav-mask in base.css: inset:0 follows the ICB, which is
     wider than a narrow phone's layout viewport and would shrink the page. */
  position: fixed; left: 0; top: 0;
  width: 100vw; height: 100vh; max-width: 100%; overflow: hidden;
  z-index: 255; background: rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.side-mask.show { opacity: 1; visibility: visible; }

/* ===== Category tabs ===== */
.cat-tabs {
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 18px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.cat-tabs .label { font-size: 14px; color: var(--gray); margin-right: 8px; }
.cat-tabs a {
  font-size: 14px; color: #4a5057; padding: 6px 16px; border-radius: 6px;
  transition: color .15s, background .15s;
}
.cat-tabs a:hover { color: var(--red); }
.cat-tabs a.active { color: var(--red); background: var(--red-light); font-weight: 600; }

/* Desktop: "Filter:" takes its own line and the chips start below it, so the
   two reads as a heading + list instead of one running sentence. Phones keep
   the inline layout — a full-width label would spend a whole row of a narrow
   screen on one word. */
@media (min-width: 901px) {
  .cat-tabs .label { flex-basis: 100%; margin: 0 0 4px; }
}

/* ===== Sort toolbar ===== */
.toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin: 14px 0 18px; flex-wrap: wrap; gap: 12px;
}
.sort-list { display: flex; align-items: center; }
.sort-list a {
  font-size: 14px; color: #4a5057; padding: 6px 18px;
  border-right: 1px solid var(--line); transition: color .15s;
  display: flex; align-items: center; gap: 4px;
}
.sort-list a:last-child { border-right: none; }
.sort-list a:hover { color: var(--red); }
.sort-list a.active { color: var(--red); font-weight: 600; }
.sort-list a .arrow { font-size: 11px; }

/* The On Sale / In Stock Only switches were removed on request, so the
   .filter-switches / .switch-item / .box rules went with them — the toolbar
   now holds the sort links on their own. */

/* ===== Product grid (Mi-style cards, 4 per row) ===== */
.prod-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.prod-card {
  /* Card padding, as variables so .prod-img can break out of them and keep
     exactly a 5px gap to the card edge (sides and top) at every breakpoint. */
  --pad-x: 20px;
  --pad-t: 24px;
  background: var(--white); border-radius: 4px;
  padding: var(--pad-t) var(--pad-x) 20px; cursor: pointer;
  transition: box-shadow .2s;
  display: flex; flex-direction: column;
}
.prod-card:hover { box-shadow: 0 5px 15px rgba(0,0,0,.2); }
.prod-card:hover .prod-name { color: var(--red); }

/* Full-bleed tile: 5px to the card edge on all sides, icon filling 70% of it. */
.prod-img {
  aspect-ratio: 1 / 1; height: auto;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #f8f9fa, #eef1f3);
  width: calc(100% + (var(--pad-x) - 5px) * 2);
  margin: calc(5px - var(--pad-t)) calc(5px - var(--pad-x)) 18px;
}
.prod-img svg { width: 70%; height: 70%; }
/* Photo-vs-icon handling for .prod-img is shared with the homepage grid, so
   the img rule lives in base.css next to .sold. */

.prod-name {
  font-size: 14px; color: var(--dark); text-align: center;
  min-height: 42px; transition: color .2s; font-weight: 500;
}
/* Price row: price on the left, sold count on the right.
   Was a centred price block before the sold count was added. */
.prod-price-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 8px; margin: 10px 0 12px;
}
/* Narrow cards (roughly the 1024-1300 band) cannot hold a 22px price and the
   sold count on one line: the row wraps and the sold count drops to a second
   line, where margin-left:auto keeps it right-aligned. */
.prod-price-row .sold { margin-left: auto; }
.prod-price { text-align: left; color: var(--red); font-size: 22px; }
/* Weight (600) and the small unbold sign come from base.css. */
.prod-price s { color: #adb5bd; font-size: 13px; margin-left: 8px; }

/* The colour swatch row and the flag badges (red, then blue) were dropped
   from the product cards — no .prod-thumbs / .prod-flags / .flag rules here. */

.prod-cart {
  margin-top: 12px; align-self: center;
  background: var(--red); color: #fff; border: none;
  padding: 9px 34px; border-radius: 4px; font-size: 13px; font-weight: 600;
  cursor: pointer; opacity: 0; transform: translateY(4px);
  transition: opacity .2s, transform .2s, background .2s;
}
.prod-card:hover .prod-cart { opacity: 1; transform: translateY(0); }
.prod-cart:hover { background: var(--red-dark); }
/* Always show the button on touch devices */
@media (hover: none) {
  .prod-cart { opacity: 1; transform: none; }
}

/* ===== Result info + pagination ===== */
.result-bar { text-align: center; color: var(--gray); font-size: 13px; margin: 34px 0 16px; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 30px; }
.pagination button {
  min-width: 44px; height: 32px; border: none; background: transparent;
  color: #9aa0a6; font-size: 15px; cursor: pointer; border-radius: 3px;
  transition: all .15s; display: flex; align-items: center; justify-content: center;
}
.pagination button:hover:not(.current):not(:disabled) { color: var(--red); }
.pagination button.current { background: #757575; color: #fff; }
.pagination button:disabled { opacity: .35; cursor: default; }
.pagination button.next-page { background: var(--white); border: 1px solid var(--line); color: #4a5057; }
.pagination button.next-page:hover:not(:disabled) { border-color: var(--red); color: var(--red); background: var(--white); }

/* ===== List responsive ===== */
@media (max-width: 1200px) {
  .shop-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 1024px) {
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  /* Sidebar becomes an off-canvas drawer */
  .shop-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .side-nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 260;
    width: 280px; max-width: 82vw; border-radius: 0; border: none;
    border-right: 1px solid var(--line); overflow-y: auto;
    max-height: none;
    transform: translateX(-102%); transition: transform .28s ease;
  }
  .side-nav.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.25); }
  .side-close { display: block; }
  /* The .side-open trigger is gone (its job moved to the Category tree under
     the masthead), so the drawer cannot be opened at any width. The off-canvas
     rules above stay: they cost nothing and the drawer comes back with the
     button if it is ever wanted again. */
  .toolbar { margin-top: 0; }
}
@media (max-width: 768px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-card { --pad-x: 12px; --pad-t: 16px; padding: var(--pad-t) var(--pad-x); }
  .prod-name { font-size: 13px; }
  .cat-tabs { padding: 10px 12px; }
}
@media (max-width: 400px) {
  /* Two products per row even on the smallest phones, like every mobile
     storefront: the card is tightened rather than dropping to one column. */
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .prod-card { --pad-x: 10px; --pad-t: 12px; padding: var(--pad-t) var(--pad-x) 14px; }
  .prod-name { font-size: 12.5px; min-height: 36px; }
  .prod-price-row { margin: 8px 0 10px; gap: 2px 6px; }
  .prod-price { font-size: 17px; }
  .prod-price s { font-size: 11.5px; margin-left: 5px; }
  .prod-price-row .sold { font-size: 11px; }
  .prod-cart { width: 100%; padding: 8px 0; margin-top: 10px; }
  /* The four sort links plus their padding run ~24px past a 320px screen;
     tighten the row instead of letting it widen the page. */
  .sort-list { width: 100%; justify-content: space-between; }
  .sort-list a { font-size: 12.5px; padding: 6px 8px; }
}

/* ---------------- 分类侧边栏：任意深度嵌套（products.php） ---------------- */
.side-sub { list-style: none; margin: 2px 0 6px; padding: 0 0 0 14px; }
/* 三级及更深：逐级缩进 + 逐级变淡，层级关系一眼可辨 */
.side-sub .side-sub { padding-left: 12px; }
.side-sub .side-sub .side-link { font-size: 12.5px; }
.side-sub .side-sub .side-sub { padding-left: 12px; }
.side-sub .side-sub .side-sub .side-link { font-size: 12px; opacity: .88; }
.side-sub .side-sub .side-sub .side-sub { padding-left: 12px; }
/* 每一层 side-sub 都遵循手风琴：.side-item.open > .side-sub 才展开（见 71-77 行） */