/* Section 02 only. Reuse HQESS tokens; the accepted opening stays frozen. */
.hqess-products {
  padding-block: clamp(4rem, 6.7vw, 6.5rem);
  background: var(--hqess-warm-white);
  color: var(--hqess-graphite);
  scroll-margin-top: 6.5rem;
}
.hqess-products__header {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  align-items: end;
  gap: 3rem;
  margin-bottom: 2.5rem;
}
.hqess-products__eyebrow { color: var(--hqess-green); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.16em; margin-bottom: 1.25rem; }
.hqess-products__title { font-size: clamp(2.25rem, 5.1vw, 4.8rem); line-height: 1.02; letter-spacing: -0.025em; margin: 0; }
.hqess-products__title > span { display: block; }
.hqess-products__intro { color: #555e59; font-size: 1.25rem; line-height: 1.5; max-width: 24rem; margin: 0 0 0.25rem; }
.hqess-products__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.hqess-product {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.5rem 1.5rem 1rem;
  border: 1px solid #ccd8cf;
  border-radius: 8px;
  background: linear-gradient(180deg, #eef4ee 0%, #fdfdfb 48%, #fdfdfb 100%);
  transition: border-color 220ms ease;
}
.hqess-product__media { position: relative; height: 18rem; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1.5rem; margin-bottom: 1.75rem; }
.hqess-product__media picture { display: block; position: relative; width: 100%; }
.hqess-product__media img { width: 100%; height: auto; object-fit: contain; transform-origin: center 85%; transition: transform 320ms ease; }
.hqess-product--cabinet .hqess-product__media picture { width: 14rem; margin-bottom: -2.9rem; }
.hqess-product--mobile .hqess-product__media picture { width: 108%; max-width: none; flex-shrink: 0; margin-bottom: -1.7rem; }
.hqess-product--portable .hqess-product__media picture { width: 88%; }
.hqess-product--portable .hqess-product__media img { mix-blend-mode: multiply; }
.hqess-product--cabinet .hqess-product__media::before { content: ""; position: absolute; bottom: 1.35rem; width: 36%; height: 0.4rem; border-radius: 50%; background: rgba(31, 35, 40, 0.1); filter: blur(4px); }
.hqess-product__copy h3 { font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-size: clamp(1.45rem, 2.1vw, 1.9rem); line-height: 1.1; letter-spacing: -0.01em; font-weight: 800; margin: 0 0 0.6rem; }
.hqess-product__name-zh { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 0.875rem; font-weight: 600; line-height: 1.5; color: #4d5751; margin: 0 0 1rem; }
.hqess-product__use { font-size: 1.125rem; color: #555e59; line-height: 1.45; min-height: 3.3rem; margin: 0 0 1.4rem; }
.hqess-product__specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: auto 0 1.1rem; padding-top: 1.4rem; border-top: 1px solid var(--hqess-border); }
.hqess-product__spec { display: flex; flex-direction: column; min-width: 0; }
.hqess-product__spec dt { order: 2; font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.04em; color: #59615c; margin-top: 0.5rem; }
.hqess-product__spec dd { margin: 0; white-space: nowrap; line-height: 1; }
.hqess-product__spec strong { font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-size: clamp(2rem, 2.8vw, 2.65rem); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hqess-product__spec dd > span { font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-size: 1rem; font-weight: 600; color: #59615c; }
.hqess-product__link { display: inline-flex; align-items: center; align-self: flex-start; gap: 0.8rem; min-height: 3rem; margin-bottom: 0.75rem; color: var(--hqess-green); font-size: 1rem; font-weight: 600; text-decoration: none; }
.hqess-product__link .button__icon { width: 1rem; height: 1rem; transition: transform 220ms ease; }
.hqess-product__link:focus-visible { outline: 2px solid var(--hqess-green); outline-offset: 5px; }
.hqess-product:focus-within { border-color: var(--hqess-green); }
.hqess-products__footer { display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; margin-top: 2rem; }
.hqess-products__all { margin: 0; letter-spacing: 0.05em; }
@media (hover: hover) and (pointer: fine) {
  .hqess-product:hover { border-color: var(--hqess-green); }
  .hqess-product:hover .hqess-product__media img { transform: scale(1.02); }
  .hqess-product:hover .hqess-product__link .button__icon,
  .hqess-products__all:hover .button__icon { transform: translateX(4px); }
}
.hqess-product__link:focus-visible .button__icon { transform: translateX(4px); }
:root:lang(zh) .hqess-products__title { font-size: clamp(1.8rem, 3.5vw, 3.25rem); line-height: 1.25; letter-spacing: -0.035em; }
:root:lang(zh) .hqess-products__intro { font-size: 1rem; line-height: 1.85; }
:root:lang(zh) .hqess-product__use { font-size: 0.9rem; line-height: 1.8; }
:root:lang(zh) .hqess-product__spec dt { font-size: 0.7rem; letter-spacing: 0; }
:root:lang(zh) .hqess-product__link { font-size: 0.875rem; }
@media (max-width: 1100px) {
  .hqess-products__header { grid-template-columns: 1fr; gap: 1.5rem; }
  .hqess-products__intro { max-width: 40rem; }
  .hqess-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .hqess-product__copy h3 { font-size: 1.85rem; }
}
@media (max-width: 768px) {
  .hqess-products__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .hqess-product { padding: 1.25rem 1.25rem 0.75rem; }
  .hqess-products__header { margin-bottom: 1rem; }
  .hqess-products__intro { font-size: 1.125rem; }
  .hqess-product__media { height: 17rem; margin-bottom: 1.5rem; }
  .hqess-product--cabinet .hqess-product__media picture { width: 12rem; margin-bottom: -2.45rem; }
  .hqess-product--mobile .hqess-product__media picture { width: 100%; max-width: 29rem; }
  .hqess-product--portable .hqess-product__media picture { width: 88%; max-width: 23rem; }
  .hqess-product__use { min-height: 0; }
  .hqess-product__spec strong { font-size: 2.4rem; }
  .hqess-product__specs { margin-top: 0; }
  .hqess-products__footer { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hqess-product,
  .hqess-product__media img,
  .hqess-product__link .button__icon { transition: none; }
  .hqess-product:hover .hqess-product__media img,
  .hqess-product:hover .hqess-product__link .button__icon,
  .hqess-products__all:hover .button__icon,
  .hqess-product__link:focus-visible .button__icon { transform: none; }
}