/* ============================================================
   Luxshine Hair — Shop / Product Listing page (Hair Extensions,
   Shop by Length, …). Built from Figma 224-9015. DS tokens only.
   ============================================================ */

/* ---------- Banner ---------- */
.shop-banner {
  position: relative;
  background: var(--primary-100);
  overflow: hidden;
}
.shop-banner__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 420px;
  padding-block: var(--space-16);
}
.shop-banner__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 568px;
  color: var(--color-black);
}
.shop-banner__head { display: flex; flex-direction: column; gap: var(--space-4); }
/* The introduction in large body type on every product and category page (user 2026-10-14: "tăng font size lên
   20px. áp dụng mọi trang sp và danh mục"). A product group's name (category.html, one or two words) is set in
   display type (user 2026-10-14: "font-size 80px" — the display token nearest it, 84px on a desktop frame, smaller
   on narrower screens); the banners whose title is a whole sentence (Hair Extensions, Shop by…) keep 40px, which
   would otherwise run to six lines. */
.shop-banner__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  color: var(--color-black);
}
.shop-banner[data-t2-banner] .shop-banner__title { font-size: var(--display-2-size); line-height: var(--display-2-lh); }
.shop-banner__text { font-size: var(--h6-size); line-height: var(--h6-lh); }
.shop-banner__text p + p { margin-top: var(--space-4); }
.shop-banner__media {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 54%;
  z-index: 1;
  pointer-events: none;
}
.shop-banner__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* fade the model image into the gold field on its left edge */
.shop-banner__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--primary-100) 0%, transparent 38%);
  z-index: 1;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-8);
}
/* Product listing (category.html): a tighter strip between the banner and the list. */
[data-category] > .breadcrumb { padding-block: var(--space-4); }
.breadcrumb__item {
  font-size: var(--caption-size);
  line-height: 20px;
  letter-spacing: 0.56px;
  color: var(--text-muted);
  text-transform: capitalize;
}
.breadcrumb__item--current { color: var(--color-black); font-weight: 600; }
a.breadcrumb__item:hover { color: var(--color-black); }
.breadcrumb__sep { width: 1px; height: 9px; background: var(--grey-400); }

/* ---------- Body layout ---------- */
.shop-body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  padding-bottom: var(--space-24);
}

/* ---------- Filters sidebar ---------- */
.shop-filters {
  flex: 0 0 344px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* A class selector beats the UA [hidden] rule — restore hide-when-hidden
   so category.html's sidebar collapses on non-filtered (non-Wigs) pages. */
.shop-filters[hidden] { display: none; }
.filter-group { width: 100%; }
.shop-main__title { font-family: var(--font-heading); font-weight: 400; font-size: 48px; line-height: 56px; text-transform: uppercase; color: var(--color-black); margin-bottom: var(--space-6); }
.shop-filters__title { font-family: var(--font-heading); font-size: var(--h5-size); line-height: var(--h5-lh); text-transform: uppercase; color: var(--color-black); margin-bottom: var(--space-6); }
/* Divider line between filter groups */
.filter-group + .filter-group {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}
.filter-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  list-style: none;
  padding-bottom: var(--space-4);
}
.filter-group__head::-webkit-details-marker { display: none; }
.filter-group__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--h6-size);
  line-height: var(--h6-lh);
  text-transform: uppercase;
  color: var(--color-black);
}
.filter-group__chev {
  display: none;
  width: 24px;
  height: 24px;
  background: currentColor;
  color: var(--color-black);
  -webkit-mask: url("../assets/icons/keyboard-arrow-down.svg") no-repeat center / 24px;
  mask: url("../assets/icons/keyboard-arrow-down.svg") no-repeat center / 24px;
  transition: transform .2s ease;
}
.filter-group[open] .filter-group__chev { transform: rotate(180deg); }

.filter-options { display: flex; flex-direction: column; gap: var(--space-2); }

.filter-links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
/* Nhóm tĩnh (Hair Extensions, Wigs, Closure): line dọc trái, không chevron, luôn mở */
.filter-group--static .filter-group__head { pointer-events: none; cursor: default; }
.filter-group--static .filter-group__chev { display: none; }
.filter-group--static .filter-links { border-left: 1px solid var(--border-subtle); padding-left: var(--space-4); }
.filter-link {
  display: inline-flex; align-items: center;
  padding: var(--space-1) 0;
  font-size: var(--body-size); line-height: var(--body-lh);
  color: var(--color-black);
  transition: color .2s ease;
}
.filter-link:hover, .filter-link:focus-visible { color: var(--color-primary); }
.filter-link--active { background: var(--color-primary); color: var(--color-black); padding: var(--space-1) var(--space-3); }
.filter-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  cursor: pointer;
}
.filter-option__box {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.filter-option__label {
  font-weight: 400;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--color-black);
}
.filter-option__tag {
  flex: 1 1 auto;
  font-weight: 600;
  font-size: var(--caption-size);
  line-height: var(--caption-lh);
  color: var(--color-error);
}
.filter-option__count {
  margin-left: auto;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--color-black);
}
.filter-option__tag + .filter-option__count { margin-left: 0; }
/* Ô chọn nằm trong cụm lọc điều hướng (.filter-links): giữ nhịp hàng 32px của .filter-link */
.filter-links .filter-option { padding-block: var(--space-1); }

/* Motion on the listing page (soft-skill): state changes are interpolated on one
   spring-like curve, and only transform + opacity move. */
:root { --ease-soft: cubic-bezier(0.32, 0.72, 0, 1); }

/* ---------- Colour filter: groups of photo swatches ---------- */
.swatch-groups { display: flex; flex-direction: column; gap: var(--space-6); }
.swatch-group__title { font-weight: 600; font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black); margin-bottom: var(--space-2); }
.swatch-group__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.swatch-group__empty { font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-font); }
/* Tile = the product-page swatch (.pdp-swatch) at filter size: square photo in a frame. */
.filter-swatch {
  position: relative; box-sizing: border-box;
  width: 48px; height: 48px; cursor: pointer;
  display: grid; place-items: center;
}
/* Selected frame: a gold tray with a black hairline, eased out from behind the photo. */
.filter-swatch::before {
  content: ""; position: absolute; inset: 0;
  border: 1px solid var(--color-black); background: var(--color-primary);
  opacity: 0; transform: scale(.82);
  transition: opacity .32s var(--ease-soft), transform .32s var(--ease-soft);
}
.filter-swatch:has(.filter-swatch__box:checked)::before { opacity: 1; transform: none; }
.filter-swatch__box { position: absolute; opacity: 0; width: 0; height: 0; }
.filter-swatch__img { position: relative; width: 40px; height: 40px; object-fit: cover; display: block; transition: transform .32s var(--ease-soft); }
@media (hover: hover) { .filter-swatch:hover .filter-swatch__img { transform: scale(1.06); } }
.filter-swatch:active .filter-swatch__img { transform: scale(.94); }
.filter-swatch:has(.filter-swatch__box:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Colour code: rises in on hover / keyboard focus, attached to the tile so the pointer can move onto it. */
.filter-swatch__name {
  position: absolute; left: 50%; bottom: 100%; z-index: 2;
  padding: var(--space-1) var(--space-2);
  background: var(--color-black); color: var(--color-white);
  font-size: var(--caption-size); line-height: var(--caption-lh); white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translate(-50%, 4px);
  transition: opacity .24s var(--ease-soft), transform .24s var(--ease-soft), visibility 0s .24s;
}
.filter-swatch:hover .filter-swatch__name,
.filter-swatch:has(.filter-swatch__box:focus-visible) .filter-swatch__name { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.swatch-groups[data-tip-off] .filter-swatch__name { opacity: 0; visibility: hidden; }
/* No hover (touch): the code sits under its tile instead of in a tooltip. */
@media (hover: none) {
  .filter-swatch { width: 56px; height: auto; grid-template-rows: 48px auto; padding-bottom: var(--space-1); }
  .filter-swatch__name,
  .swatch-groups[data-tip-off] .filter-swatch__name {
    position: relative; left: auto; bottom: auto; transform: none; padding: 0;
    background: transparent; color: var(--color-black);
    white-space: normal; text-align: center; opacity: 1; visibility: visible; transition: none;
  }
}

/* ---------- Listing page (category.html): chips + cards ---------- */
[data-category] .chip { transition: transform .24s var(--ease-soft); }
[data-category] .chip:active { transform: scale(.97); }
[data-category] .chip--new { animation: chip-in .32s var(--ease-soft) backwards; }
[data-category] .chip__x { transition: transform .32s var(--ease-soft); }
@media (hover: hover) { [data-category] .chip:hover .chip__x { transform: rotate(90deg); } }
@keyframes chip-in { from { opacity: 0; transform: translateY(8px); } }
/* Cards rise in as they enter the viewport — the same move as [data-reveal] elsewhere on the site. */
[data-category] .product-card { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft); transition-delay: calc(var(--i, 0) * 80ms); }
[data-category] .product-card.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-category] .product-card { opacity: 1; transform: none; transition: none; }
  [data-category] .chip--new { animation: none; }
  .filter-swatch::before, .filter-swatch__img, .filter-swatch__name { transition: none; }
}

/* ---------- Price filter ---------- */
.price-group { display: flex; flex-direction: column; gap: var(--space-4); }
.price-inputs { display: flex; align-items: center; gap: var(--space-2); }
.price-field {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding-inline: var(--space-6);
  border: 1px solid var(--grey-400);
  font-weight: 600;
  font-size: var(--body-size);
  color: var(--color-black);
}
.price-field__input {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: center;
  font: inherit;
  color: inherit;
}
.price-field__input::-webkit-outer-spin-button,
.price-field__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-field__input { -moz-appearance: textfield; }
.price-sep { color: var(--color-font); }

/* dual-handle range slider: two range inputs stacked over one track */
.price-range { position: relative; height: 16px; }
.price-range__track {
  position: absolute;
  inset-inline: 0;
  top: 4px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--grey-400);
}
.price-range__fill {
  position: absolute;
  top: 4px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}
.price-range input[type="range"] {
  position: absolute;
  inset-inline: 0;
  top: 0;
  width: 100%;
  height: 16px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.price-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  border: 2px solid var(--color-white);
  box-shadow: var(--shadow-sm);
  pointer-events: auto;
  cursor: pointer;
}
.price-range input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  border: 2px solid var(--color-white);
  pointer-events: auto;
  cursor: pointer;
}

/* ---------- Main column ---------- */
.shop-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-10); }
/* Product listing (category.html): the tools read as one cluster with the grid. */
[data-category] .shop-main { gap: var(--space-4); }

.shop-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-bottom: calc(var(--space-4) - var(--space-10)); }
.shop-head .shop-main__title { margin-bottom: 0; }
.shop-head .shop-search { flex: 0 1 360px; }

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--grey-400);
}
.shop-count { font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black); }
.shop-count strong { font-weight: 600; }

.shop-search { position: relative; flex: 1 1 240px; max-width: 360px; display: flex; align-items: center; }
.shop-search__ico { position: absolute; left: var(--space-3); width: 18px; height: 18px; background: var(--grey-600); -webkit-mask: url("../assets/icons/search.svg") no-repeat center / contain; mask: url("../assets/icons/search.svg") no-repeat center / contain; pointer-events: none; }
.shop-search__input { width: 100%; height: 40px; padding: 0 var(--space-3) 0 var(--space-10); border: 1px solid var(--grey-400); background: var(--color-white); color: var(--color-black); font-size: 16px; line-height: 24px; }
.shop-search__input::placeholder { color: var(--grey-600); }
.shop-search__input:focus-visible { outline: none; border-color: var(--color-primary); }
.shop-footer { display: flex; align-items: center; justify-content: center; gap: var(--space-6); padding-top: var(--space-8); }

/* Price visibility: an admin setting; the switch previews both states on the demo. */
.price-toggle { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; cursor: pointer; font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-black); }
.price-toggle__box { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--color-primary); cursor: pointer; }
.price-toggle__note { font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--color-font); }

.sort-control { display: flex; align-items: center; gap: var(--space-2); }
.sort-control__ico {
  width: 16px; height: 16px;
  background: currentColor; color: var(--color-black);
  -webkit-mask: url("../assets/icons/sliders-horizontal.svg") no-repeat center / 16px;
  mask: url("../assets/icons/sliders-horizontal.svg") no-repeat center / 16px;
}
.sort-control__label { font-size: var(--body-size); color: var(--color-black); }
.sort-select {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--body-size);
  color: var(--color-black);
  padding-right: var(--space-6);
  cursor: pointer;
  background-image: url("../assets/icons/arrow-down-up.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 16px;
}

/* ---------- Active filters ---------- */
.shop-active { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.shop-active__label { font-size: var(--body-size); color: var(--color-black); }
.shop-active__chips { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.shop-active:not(:has(.chip)) { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding-inline: var(--space-6);
  background: var(--color-primary);
  color: var(--color-black);
  font-weight: 600;
  font-size: var(--body-size);
  border: 0;
  cursor: pointer;
}
/* Product listing (category.html): tighter chips — several filters apply at once there. */
[data-category] .chip { padding-inline: var(--space-3); }
.chip__x {
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: url("../assets/icons/x.svg") no-repeat center / 14px;
  mask: url("../assets/icons/x.svg") no-repeat center / 14px;
}
.chip:hover { background: var(--primary-400); }
.clear-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--body-size);
  color: var(--color-black);
  cursor: pointer;
}
.clear-all__x {
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url("../assets/icons/x.svg") no-repeat center / 16px;
  mask: url("../assets/icons/x.svg") no-repeat center / 16px;
}
.clear-all:hover { color: var(--color-primary); }

/* ---------- Product grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  width: 100%;
}
.product-card { display: flex; flex-direction: column; gap: var(--space-2); }
.product-card__link { display: flex; flex-direction: column; gap: var(--space-2); color: inherit; }
.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--grey-500);
  overflow: hidden;
}
.product-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.product-card__link:hover .product-card__media img { transform: scale(1.04); }
.product-card__badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding-inline: var(--space-2);
  background: var(--color-error);
  color: var(--color-white);
  font-weight: 600;
  font-size: var(--caption-size);
  line-height: 22px;
  text-align: center;
}
.product-card__body { display: flex; flex-direction: column; gap: var(--space-1); }
.product-card__stock {
  font-style: normal;
  font-size: var(--caption-size);
  line-height: var(--caption-lh);
  color: var(--color-black);
}
.product-card__stock b { font-weight: 700; }
.product-card__stock--low { color: var(--color-error); }
.product-card__name {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--color-black-deep);
}
.product-card__link:hover .product-card__name { color: var(--color-primary); }
.product-card__prices { display: flex; align-items: baseline; gap: var(--space-1); font-size: var(--body-size); line-height: var(--body-lh); }
.product-card__price { font-weight: 600; color: var(--color-black-deep); }
.product-card__old { text-decoration: line-through; color: var(--color-font); }

/* ---------- Empty state ---------- */
.shop-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-24);
  text-align: center;
}
.shop-empty__title { font-family: var(--font-heading); font-size: var(--h5-size); line-height: var(--h5-lh); color: var(--color-black); text-transform: uppercase; }
.shop-empty__text { font-size: var(--body-size); color: var(--text-muted); }
.product-grid[data-empty] { display: none; }
.product-grid[data-empty] + .shop-empty { display: flex; }

/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-4); }
/* One page is enough -> js/category.js hides the pager (a class selector beats the UA [hidden] rule). */
.pagination[hidden] { display: none; }
/* A new page of the listing brings its toolbar to the top, clear of the sticky header;
   the result count takes the focus there. */
.shop-toolbar { scroll-margin-top: calc(var(--header-h, calc(var(--space-24) + var(--space-12))) + var(--space-4)); }
.shop-count:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.page-arrow, .page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--body-size);
  color: var(--color-black);
  cursor: pointer;
}
.page-btn[aria-current="page"] { background: var(--color-primary); }
.page-btn:not([aria-current="page"]):hover { background: var(--grey-200); }
.page-arrow__ico { width: 16px; height: 16px; background: currentColor; }
.page-arrow--prev .page-arrow__ico {
  -webkit-mask: url("../assets/icons/chevron-left.svg") no-repeat center / 16px;
  mask: url("../assets/icons/chevron-left.svg") no-repeat center / 16px;
}
.page-arrow--next .page-arrow__ico {
  -webkit-mask: url("../assets/icons/chevron-right.svg") no-repeat center / 16px;
  mask: url("../assets/icons/chevron-right.svg") no-repeat center / 16px;
}
.page-arrow[disabled] { opacity: .35; cursor: not-allowed; }
.page-ellipsis { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--color-black); }

/* ---------- Category results page (per-category listing, no sidebar) ---------- */
.category-head { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.category-title { font-family: var(--font-heading); font-size: var(--h3-size); line-height: var(--h3-lh); text-transform: uppercase; color: var(--color-black); }
/* Inside a product group the title row above carries the title and the search. */
.category-head[hidden] { display: none; }
.category-body { display: flex; flex-direction: column; gap: var(--space-10); padding-bottom: var(--space-24); }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.category-grid[data-empty] { display: none; }
.category-grid[data-empty] + .shop-empty { display: flex; }
/* Other products after a short listing (js/category.js): the list simply carries on, one grid gap below the last row
   (the column's own 16px gap plus 8px makes the grid's 24px). Its heading is for screen readers only. */
.shop-more { margin-top: calc(var(--space-6) - var(--space-4)); }
.shop-more[hidden] { display: none; }
.breadcrumb [hidden] { display: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1280px) {
  .category-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .shop-banner__inner { min-height: 360px; }
  .shop-banner__content { max-width: 60%; }
  .shop-banner__media { width: 46%; }
  .shop-body { flex-direction: column; }
  .shop-filters {
    flex: 1 1 auto;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-8);
  }
  .filter-group { flex: 1 1 280px; }
  /* row layout -> no horizontal divider between groups */
  .filter-group + .filter-group { margin-top: 0; padding-top: 0; border-top: 0; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .shop-banner__inner { min-height: 0; padding-block: var(--space-12); }
  .shop-banner__content { max-width: 100%; gap: var(--space-6); }
  .shop-banner__title, .shop-banner[data-t2-banner] .shop-banner__title { font-size: var(--h4-size); line-height: var(--h4-lh); }
  .shop-banner__media { display: none; }
  .shop-toolbar { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .price-toggle { margin-left: 0; }
  .shop-head { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .shop-head .shop-search { flex: 1 1 auto; }
  .category-head { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .category-head .shop-search { flex: none; max-width: none; }
  .product-grid, .category-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .shop-more { margin-top: 0; }
  .pagination { gap: var(--space-2); flex-wrap: wrap; }
}

@media (max-width: 480px) {
  /* Seven 40px cells of the pager on one line of a phone. */
  .pagination { gap: var(--space-1); }
}
@media (max-width: 340px) {
  /* The narrowest phones: the cells keep their height and lose 8px of width. */
  .page-arrow, .page-btn, .page-ellipsis { width: 32px; }
}
@media (max-width: 400px) {
  /* The category list keeps its two columns down to the narrowest phone (comment cmvkoe7wvj853, 2026-10-23: "quá ít
     sản phẩm"): in one column a page held six products. */
  .product-grid { grid-template-columns: 1fr; }
}

/* ---------- Filter button and sheet (phones) ----------
   Comment cmvkodckt1ph3 (2026-10-23: "bộ filter gói gọn thành 1 nút lọc. khi bấm vào mới hiện ra"): on phones the filter
   column is one button above the list; pressed, it opens as a full-screen native dialog in the mobile menu's frame
   (white, a top row with a 44px close, content in the page gutters) and closes on its "Show N results" button, the
   close or Esc. js/category.js moves the column into the sheet on phones and back beside the list on wider screens. */
.filter-open { display: none; }
.filter-open__ico { width: 20px; height: 20px; flex: none; }
.filter-sheet { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--color-white); color: var(--color-black); }
.filter-sheet[open] { display: flex; flex-direction: column; }
.filter-sheet::backdrop { background: transparent; }
html:has(.filter-sheet[open]) { overflow: hidden; }
.filter-sheet__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) var(--space-6); border-bottom: 1px solid var(--border-subtle); }
.filter-sheet__title { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: var(--h5-size); line-height: var(--h5-lh); text-transform: uppercase; }
.filter-sheet__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.filter-sheet__close .icon { width: 24px; height: 24px; }
.filter-sheet__close:focus-visible { outline: 2px solid var(--color-black); outline-offset: 2px; }
.filter-sheet__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-6); }
.filter-sheet__foot { padding: var(--space-4) var(--space-6) var(--space-6); border-top: 1px solid var(--border-subtle); }
.filter-sheet__done { width: 100%; }
/* In the sheet the column stands as on the desktop: one group under another with a rule between; the sheet's own
   title replaces the column's. */
.filter-sheet .shop-filters { flex-direction: column; gap: 0; }
/* Each group is as tall as its links (comments cmvos8brc3syh · cmvos8h3i2dm5): the tablet row's flex: 1 1 280px
   turned into a 280px height once the column runs down, leaving Wigs and Closure & Frontal with a blank tail. */
.filter-sheet .filter-group { flex: none; }
.filter-sheet .shop-filters__title { display: none; }
.filter-sheet .filter-group + .filter-group { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
@media (max-width: 767px) {
  .filter-open:not([hidden]) { display: inline-flex; min-height: 44px; padding-block: var(--space-3); }
  /* The toolbar in two rows instead of four (comment cmvov87zl9u0a), in reading order: Filter | count, then
     Show prices | Sort. The Filter button drops its frame to read like Sort (icon + word) and keeps a 44px target. */
  .shop-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 var(--space-2); }
  .filter-open:not([hidden]) { gap: var(--space-2); padding-inline: 0; border-color: transparent; background: none; color: var(--color-black); font-size: var(--body-size); line-height: var(--body-lh); }
  .filter-open:not([hidden]):hover { background: none; color: var(--color-primary); }
  .shop-count { text-align: right; }
  .filter-open:not([hidden]), .price-toggle { justify-self: start; }
  .price-toggle { position: relative; min-height: 44px; margin-left: 0; }
  /* Words a screen reader still reads but the eye can do without here. */
  .price-toggle__note, .sort-control__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sort-control { position: relative; min-height: 44px; justify-self: end; }
  /* Sort keeps only its own up-down arrow: its sliders icon was the same as Filter's, side by side they read as one. */
  .sort-control__ico { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .filter-sheet[open] { animation: mnav-in .5s cubic-bezier(.16, 1, .3, 1) both; }
}

/* ======================= SHOP BY TEXTURE band ======================= */
.tex-band { padding-block: var(--space-24); }
.tex-band__head { text-align: center; margin-bottom: var(--space-12); }
.tex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.tex-card { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; }
.tex-card__media { position: absolute; inset: 0; }
.tex-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .6, .2, 1); }
.tex-card:hover .tex-card__media img, .tex-card:focus-visible .tex-card__media img { transform: scale(1.05); }
.tex-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--color-black) 72%, transparent) 2%, transparent 58%); }
.tex-card__overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-6); }
.tex-card__eyebrow { font-family: var(--font-body); font-weight: 700; font-size: var(--caption-size); letter-spacing: 2px; text-transform: uppercase; color: var(--color-primary); }
.tex-card__name { font-family: var(--font-heading); font-weight: 400; font-size: var(--h4-size); line-height: var(--h4-lh); text-transform: uppercase; color: var(--color-white); }
.tex-card__cta { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: 600; font-size: var(--body-size); color: var(--color-white); }
.tex-card__desc { margin-top: var(--space-1); font-size: var(--caption-size); line-height: var(--caption-lh); color: color-mix(in srgb, var(--color-white) 85%, transparent); }
.tex-grid--flush { gap: 0; }
.tex-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media (max-width: 860px) { .tex-grid { grid-template-columns: repeat(2, 1fr); } .tex-band { padding-block: var(--space-16); } }
@media (max-width: 520px) { .tex-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tex-card__media img { transition: none; } }

/* ======================= VIDEO HERO (21:9 + logo intro) ======================= */
.video-hero { position: relative; aspect-ratio: 21 / 9; overflow: hidden; display: flex; align-items: flex-end; background: var(--surface-dark); }
.video-hero__media { position: absolute; inset: 0; z-index: 0; }
.video-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-hero__veil { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--surface-dark) 82%, transparent), transparent 62%); }
.video-hero__inner { position: relative; z-index: 1; width: 100%; padding-bottom: var(--space-16); }
.video-hero__title { font-family: var(--font-heading); font-weight: 400; font-size: var(--h1-size); line-height: var(--h1-lh); text-transform: uppercase; color: var(--color-white); max-width: 18ch; }
.video-hero__text { margin-top: var(--space-4); max-width: 60ch; font-size: var(--body-size); line-height: var(--body-lh); color: color-mix(in srgb, var(--color-white) 88%, transparent); }
.video-hero__inner .btn { margin-top: var(--space-6); }
.video-hero__intro { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: var(--surface-dark); animation: logo-intro 2.6s ease forwards; }
.video-hero__logo { width: 200px; height: auto; animation: logo-pulse 2.6s ease forwards; }
@keyframes logo-intro { 0%, 55% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes logo-pulse { 0% { opacity: 0; transform: scale(.92); } 22% { opacity: 1; transform: scale(1); } 55% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } }
@media (max-width: 760px) { .video-hero { aspect-ratio: 16 / 10; } .video-hero__title { font-size: var(--h2-size); line-height: var(--h2-lh); } .video-hero__logo { width: 140px; } }
@media (prefers-reduced-motion: reduce) { .video-hero__intro { animation: none; opacity: 0; visibility: hidden; } .video-hero__logo { animation: none; } }