/* =============================================================================
   product.css  --  S2 product centre (archive / filter / detail / related)
   TOKENS ONLY: every colour, size, spacing and radius comes from tokens.css.
   No new literal colours, font sizes, spacing or radii are introduced here.
   Zero chroma, minimal, no decorative motion (C-class red lines).
   Grid children carry min-width:0 so long titles can never widen a cell
   (the 768px overflow lesson from D11/D22).
   ============================================================================= */

/* ---- Archive shell ---- */
.nc-archive {
  padding-block: var(--nc-sp-7);
}

.nc-archive__breadcrumb {
  margin-block-end: var(--nc-sp-5);
}

.nc-archive__head {
  margin-block-end: var(--nc-sp-5);
}

.nc-archive__title {
  margin: 0;
  font-size: var(--nc-fs-28);
  line-height: var(--nc-lh-heading);
}

/* ---- Product grid ---- */
.nc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nc-sp-5) var(--nc-sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .nc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .nc-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---- Product card ---- */
.nc-card {
  min-width: 0;
  margin: 0;
}

.nc-card__link {
  display: block;
  color: var(--nc-text);
  text-decoration: none;
}

.nc-card__link:hover,
.nc-card__link:focus {
  color: var(--nc-text);
  text-decoration: none;
}

.nc-card__media {
  width: 100%;
}

.nc-card__title {
  margin: var(--nc-sp-3) 0 0;
  font-size: var(--nc-fs-16);
  font-weight: var(--nc-fw-medium);
  line-height: var(--nc-lh-heading);
  overflow-wrap: anywhere;
}

/* ---- Filter panel ---- */
.nc-filter {
  margin-block-end: var(--nc-sp-6);
  padding-block: var(--nc-sp-4);
  border-block: 1px solid var(--nc-line);
}

.nc-filter__groups {
  display: grid;
  gap: var(--nc-sp-5);
}

@media (min-width: 768px) {
  .nc-filter__groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .nc-filter__groups {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.nc-filter__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.nc-filter__legend {
  padding: 0;
  margin-block-end: var(--nc-sp-2);
  font-size: var(--nc-fs-14);
  font-weight: var(--nc-fw-semibold);
  color: var(--nc-text);
}

.nc-filter__opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nc-sp-2);
}

.nc-filter__opt {
  display: inline-flex;
  align-items: center;
  min-height: var(--nc-touch);
  padding-inline: var(--nc-sp-3);
  border: 1px solid var(--nc-line);
  border-radius: var(--nc-radius);
  color: var(--nc-text-2);
  font-size: var(--nc-fs-14);
  text-decoration: none;
  transition: border-color var(--nc-transition), color var(--nc-transition);
}

.nc-filter__opt:hover,
.nc-filter__opt:focus {
  border-color: var(--nc-text);
  color: var(--nc-text);
  text-decoration: none;
}

.nc-filter__opt.is-active {
  border-color: var(--nc-text);
  background: var(--nc-ph-bg);
  color: var(--nc-text);
}

.nc-filter__actions {
  margin-block-start: var(--nc-sp-4);
}

.nc-filter__clear {
  font-size: var(--nc-fs-14);
  color: var(--nc-text-2);
}

/* ---- Pagination ---- */
.nc-pagination {
  margin-block-start: var(--nc-sp-7);
}

.nc-pagination__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nc-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nc-pagination__item .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--nc-touch);
  min-height: var(--nc-touch);
  padding-inline: var(--nc-sp-2);
  border: 1px solid var(--nc-line);
  border-radius: var(--nc-radius);
  color: var(--nc-text);
  font-size: var(--nc-fs-15);
  text-decoration: none;
}

.nc-pagination__item .page-numbers.current {
  border-color: var(--nc-text);
  background: var(--nc-ph-bg);
}

.nc-pagination__item a.page-numbers:hover,
.nc-pagination__item a.page-numbers:focus {
  border-color: var(--nc-text);
}

/* ---- Empty state ---- */
.nc-empty {
  padding-block: var(--nc-sp-8);
  text-align: center;
}

.nc-empty__message {
  margin-block: 0 var(--nc-sp-2);
  font-size: var(--nc-fs-18);
  color: var(--nc-text);
}

.nc-empty__hint {
  margin-block: 0 var(--nc-sp-5);
  color: var(--nc-text-3);
}

.nc-empty__back {
  display: inline-flex;
  align-items: center;
  min-height: var(--nc-touch);
  color: var(--nc-text);
}

/* ---- Single product ---- */
.nc-single {
  padding-block: var(--nc-sp-7);
}

.nc-single__breadcrumb {
  margin-block-end: var(--nc-sp-5);
}

.nc-single__top {
  display: grid;
  gap: var(--nc-sp-6);
}

@media (min-width: 768px) {
  .nc-single__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  .nc-single__top {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

.nc-single__media,
.nc-single__summary {
  min-width: 0;
}

.nc-single__main-img {
  width: 100%;
}

.nc-single__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nc-sp-2);
  margin: var(--nc-sp-3) 0 0;
  padding: 0;
  list-style: none;
}

.nc-single__thumb {
  width: calc((100% - (var(--nc-sp-2) * 3)) / 4);
}

.nc-single__thumb-ph {
  width: 100%;
}

.nc-single__title {
  margin-block: 0 var(--nc-sp-5);
  font-size: var(--nc-fs-28);
  line-height: var(--nc-lh-heading);
  overflow-wrap: anywhere;
}

.nc-spec {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--nc-line);
}

.nc-spec__row {
  border-bottom: 1px solid var(--nc-line);
}

.nc-spec__key {
  width: 34%;
  padding: var(--nc-sp-2) var(--nc-sp-3) var(--nc-sp-2) 0;
  text-align: left;
  vertical-align: top;
  font-size: var(--nc-fs-14);
  font-weight: var(--nc-fw-medium);
  color: var(--nc-text-2);
}

.nc-spec__val {
  padding: var(--nc-sp-2) 0;
  vertical-align: top;
  font-size: var(--nc-fs-14);
  color: var(--nc-text);
  overflow-wrap: anywhere;
}

.nc-single__sizechart {
  margin-block-start: var(--nc-sp-4);
  font-size: var(--nc-fs-14);
}

.nc-single__label {
  color: var(--nc-text-2);
}

.nc-single__inquiry {
  margin-block-start: var(--nc-sp-5);
}

.nc-single__detail {
  margin-block-start: var(--nc-sp-8);
}

.nc-single__detail-ph {
  width: 100%;
}

/* ---- Attachments ---- */
.nc-attach {
  margin-block-start: var(--nc-sp-5);
}

.nc-attach__title {
  margin-block: 0 var(--nc-sp-3);
  font-size: var(--nc-fs-16);
}

.nc-attach__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nc-attach__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--nc-sp-2);
  padding-block: var(--nc-sp-2);
  border-bottom: 1px solid var(--nc-line);
}

.nc-attach__size {
  color: var(--nc-text-3);
  font-size: var(--nc-fs-13);
}

/* ---- Related ---- */
.nc-related {
  margin-block-start: var(--nc-sp-8);
}

.nc-related__title {
  margin-block: 0 var(--nc-sp-5);
  font-size: var(--nc-fs-22);
  line-height: var(--nc-lh-heading);
}