/* ============================================================
   Luxshine — Product group page (category.html), tier 2.
   Blocks shown when the listing is on ONE product group:
   banner, the title row, then (below the grid) strengths,
   specifications, price guide, MOQ, process, FAQ and the form.
   Reuses .shop-banner, .sec-head, .info-table, .faq, .contact and
   the hub's .hub-sec / .hub-rates / .hub-wa. Tokens only.
   ============================================================ */

/* A class selector beats the UA [hidden] rule on these blocks. */
[data-t2-banner][hidden], [data-t2-lines][hidden], [data-t2-only][hidden], [data-t2-common][hidden] { display: none; }
/* The form block closes the page with its own padding. */
[data-category]:has([data-t2-common]:not([hidden])) { padding-bottom: 0; }

/* ---------- Title row above the filters and the list ---------- */
/* Closer to the list it names than to the breadcrumb above it. */
.t2-lines { padding-block: var(--space-8); }
/* Title on the left, the listing's search on the right. */
.t2-lines__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); }

/* ---------- Content blocks under the list (user 2026-10-21: "basic quá. ko có hình ảnh") ----------
   Each block shows its points with real photos, in a mold approved on another page:
   strengths = .rv-card (remy-v2.css), specifications = .rv-shot + the shared .dtable + .rv-swatches,
   price guide = the hub's .hub-rates (hub.css), MOQ = .dtable--fold with a photo per column,
   process = Quality Standards' .qs-make (quality.css). */

/* Specifications: two columns stacked on their own, the square photo with the lengths under it on the left, the
   table with the colour codes under it on the right (both about 920px tall at 1920); the textures run across the
   width below (user 2026-10-21). */
.t2-specs__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: start; }
.t2-specs__col { display: grid; gap: var(--space-8); align-content: start; min-width: 0; }
.t2-specs__shot { --rv-curtain: var(--color-white); }
:is(.t2-lengths, .t2-colours) { margin: 0; }
.t2-avail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); margin: var(--space-16) 0 0; }
.t2-avail__item { min-width: 0; padding-top: var(--space-6); border-top: 1px solid var(--color-black); }
:is(.t2-avail, .t2-lengths, .t2-colours) dt { font-family: var(--font-heading); font-weight: 400; font-size: var(--h5-size); line-height: var(--h5-lh); text-transform: uppercase; color: var(--color-black); }
:is(.t2-avail, .t2-lengths, .t2-colours) dd { margin: var(--space-4) 0 0; font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-font); }
.t2-colours dd > p { margin-bottom: var(--space-4); }
.t2-colours a { text-decoration: underline; text-underline-offset: 4px; color: var(--color-black); }
/* Lengths as a ruler (user 2026-10-21, after "trống" for one row of tiles and "thô" for nine big ones): a row per
   length, its inches, a gold line as long as the hair (30" is the full width) and the length in cm.
   No track behind the lines: the lengths read against each other. */
.t2-lens { display: grid; row-gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.t2-lens li { display: grid; grid-template-columns: var(--space-12) minmax(0, 1fr) var(--space-16); align-items: center; column-gap: var(--space-4); }
.t2-lens__in { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; color: var(--color-black); }
.t2-lens__bar { display: block; width: calc(var(--len) / 30 * 100%); height: 2px; background: var(--color-primary); transform-origin: left center; }
.t2-lens__cm { font-variant-numeric: tabular-nums lining-nums; text-align: right; color: var(--color-font); }
/* The lines grow out from the left, one after another, as the block comes into view. */
@media (prefers-reduced-motion: no-preference) {
  .js .t2-avail__item[data-reveal] .t2-lens__bar { transform: scaleX(0); transition: transform .9s cubic-bezier(.16, 1, .3, 1) calc(.2s + var(--i) * .05s); }
  .js .t2-avail__item[data-reveal].is-in .t2-lens__bar { transform: none; }
}
/* Colour codes: the chart's swatches, six a row under the table; textures: six photos in the row. */
.t2-swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.t2-textures { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* MOQ: a column per customer group, its 3:2 photo above its name. The table's note fills the corner over the
   row names, level with the group names (user 2026-10-21: "layout bị trống"). */
.t2-moq .t2-moq__corner { vertical-align: bottom; padding: 0 var(--dtable-pad) var(--space-4) 0; } /* beats .dtable td's top alignment */
.t2-moq__corner .info-note { max-width: 30ch; margin: 0; }
.t2-moq { table-layout: fixed; }
/* Group heads keep the table's top alignment: the photos line up even when a name wraps to two lines. */
.t2-moq thead th:first-child { width: 22%; }
.t2-moq__shot { --rv-curtain: var(--color-white); aspect-ratio: var(--ty-le-tin); margin-bottom: var(--space-4); }
.t2-moq tbody tr:first-child td { font-weight: 600; font-size: var(--h5-size); line-height: var(--h5-lh); color: var(--color-black); }

/* Process: on beige, between the white MOQ block and the FAQ; the title stays in view under the 72px header. */
.t2-make { --remy-header: 72px; --rv-curtain: var(--surface-beige); padding-block: var(--space-24); background: var(--surface-beige); }
.t2-make .qs-make__title .sec-head__title { margin-bottom: 0; }
/* Under the pinned title: the Factory page's line for this section, then three of its figures (user 2026-10-21). */
.t2-make__lead { max-width: 40ch; margin-top: var(--space-6); font-size: var(--h6-size); line-height: var(--h6-lh); color: var(--color-black); text-wrap: pretty; }
.t2-make__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-8) 0 0; padding: var(--space-6) 0 0; list-style: none; border-top: 1px solid var(--color-black); }
.t2-make__num { display: block; font-family: var(--font-heading); font-size: var(--h4-size); line-height: var(--h4-lh); font-variant-numeric: lining-nums; white-space: nowrap; color: var(--color-black); }
.t2-make__label { display: block; margin-top: var(--space-1); font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-font); }
.t2-process__more { margin-top: var(--space-8); }

@media (max-width: 1024px) {
  .t2-specs__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .t2-swatches { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .t2-specs__shot { width: min(100%, 420px); }
}
/* One column: the swatches and textures each keep to one row while the width allows. */
@media (max-width: 899px) {
  .t2-avail { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); margin-top: var(--space-12); }
  .t2-swatches { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .t2-make { padding-block: var(--space-16); }
}
/* From 767px down the table folds (.dtable--fold, sections.css): the group columns sit side by side,
   so the note takes the row above them. */
@media (max-width: 767px) {
  .t2-moq__corner { grid-column: 1 / -1; padding: 0 0 var(--space-6); }
  .t2-moq__corner .info-note { max-width: none; }
}
@media (max-width: 640px) {
  .t2-lines { padding-block: var(--space-6); }
  .t2-lines__row { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .t2-lines__row .shop-search { flex: none; max-width: none; }
  .t2-swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .t2-textures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Three columns on a phone: group names at body size so "Distributor" fits its column. */
  .t2-moq thead th { font-size: var(--body-size); line-height: var(--body-lh); }
  .t2-moq__shot { margin-bottom: var(--space-2); }
  /* The three figures one under another, each number beside its label. */
  .t2-make__stats { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .t2-make__stats li { display: flex; align-items: baseline; gap: var(--space-3); }
  .t2-make__label { margin-top: 0; }
  .t2-moq tbody tr:first-child td { font-size: var(--h6-size); line-height: var(--h6-lh); }
}