/* ==========================================================================
   JALON THAILAND — Product archive (WooCommerce archive-product.php / Elementor Loop Grid)
   Page-specific only; load after jalon-shell.css.
   ========================================================================== */

/* ==========================================================================
   OUR SOLUTION — WooCommerce product archive
   Page-specific styles only; the shell (tokens, header, bands, footer)
   lives in jalon-shell.css.
   ========================================================================== */

/* Archive head */
.archive__head { display: grid; justify-items: center; gap: var(--sp-24); text-align: center; }
.archive__title { font-size: 46px; font-weight: 700; line-height: 1; }

/* Category tabs — real hrefs to /?product_cat=, so they work without JS */
/* The rule runs full-bleed; clip the axis so 100vw can't widen the page */
.archive { overflow-x: clip; }
.product-tabs { position: relative; margin-top: var(--sp-48); }
.product-tabs::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100vw; height: 1px; background: #DBDBDB;
}
.product-tabs__list { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.product-tabs__link {
  position: relative; display: block; padding: 0 var(--sp-16) var(--sp-24);
  text-align: center; color: var(--ink-soft); font-size: var(--fs-body);
  transition: color 160ms ease;
}
.product-tabs__link:hover { color: var(--gold); }
.product-tabs__link[aria-current="page"] { color: var(--gold); font-weight: 700; }
.product-tabs__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--gold); z-index: 1;
}

/* Empty state — a category with no products must not look broken */
.archive__empty {
  grid-column: 1 / -1; padding: var(--sp-64) 0; text-align: center; color: var(--body);
}

@media (max-width: 1024px) {
  .page-banner { height: 300px; margin-top: 120px; }
  .page-banner__title { font-size: 34px; }
  .archive__title { font-size: 34px; }
  .solution-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-48); }
  .solution-card__media { height: 260px; }
  .product-tabs__list { grid-auto-flow: row; grid-auto-columns: auto; }
  .product-tabs__link { padding-bottom: var(--sp-16); }
  .product-tabs__link[aria-current="page"]::after { left: 50%; right: auto; width: 120px; transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .page-banner { height: 220px; margin-top: 104px; }
  .page-banner__title { font-size: 28px; }
  .archive__title { font-size: 26px; }
  .eyebrow { padding: 12px 18px; font-size: var(--fs-small); }
  .solution-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .product-card__title { font-size: 20px; }
}