/* ============================================================
   Gessura — the marketplace (shop archive) · v5 «Monochrome premium»
   Tokens only — nothing here invents a colour, radius, duration
   or hairline.

   A storefront in the homepage's language. The clean first page
   opens on the market film, features the top model edge-to-edge,
   prints the collections as ledger rows and the provenance as
   numbered rows — then the models themselves:
   one quiet toolbar strip on hairlines and a flush tile grid
   whose first two cells run double width. The renders are
   silver-on-black, so the whole page reads as one black field.
   Mint appears only on active states, focus, hovers and live
   prices. Hover brightens a render or breathes a row; nothing
   lifts.
   ============================================================ */

.g3-shop { padding-bottom: clamp(64px, 7vw, 120px); }

/* ---------------------------------------- 1 · opening scene -- */
/* Full-bleed market film, large thin type over the scrim. */

.g3-mkhero {
  position: relative;
  min-height: 92vh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--coal);
}
.g3-mkhero-media {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.g3-mkhero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}
/* legibility scrim: weighted to the copy corner and the fold */
.g3-mkhero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 10, 12, .84) 0%, rgba(10, 10, 12, .48) 40%, rgba(10, 10, 12, .1) 74%),
    linear-gradient(180deg, rgba(10, 10, 12, .5) 0%, transparent 26%, transparent 62%, rgba(10, 10, 12, .88) 100%);
}
.g3-mkhero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 26px;
  justify-items: start;
  max-width: min(1080px, 94vw);
  padding: 140px clamp(24px, 6vw, 110px) clamp(64px, 9vh, 110px);
}
.g3-mkhero-title {
  font-weight: 200;
  font-size: clamp(42px, 6.6vw, 116px);
  line-height: 1.04;
  letter-spacing: -.015em;
}
.g3-mkhero-sub {
  margin: 0;
  max-width: 52ch;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--bone-soft);
}
.g3-mkhero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}

@media (max-width: 900px) {
  .g3-mkhero { min-height: 100svh; }
  .g3-mkhero-media::after {
    background:
      linear-gradient(180deg, rgba(10, 10, 12, .55) 0%, rgba(10, 10, 12, .25) 35%, rgba(10, 10, 12, .82) 78%, rgba(10, 10, 12, .96) 100%);
  }
  .g3-mkhero-copy { padding-top: 120px; }
  .g3-mkhero-title { font-size: clamp(36px, 9vw, 60px); }
}

/* ------------------------------------------- 2 · featured ---- */
/* The most expensive model on the floor. Its render sits large on
   the page black — contained, never framed — the name runs giant
   and thin beside it. */

.g3-mkfeat {
  position: relative;
  min-height: min(86vh, 880px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--coal);
  border-block: 1px solid var(--hairline);
}
.g3-mkfeat-media {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.g3-mkfeat-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
}
/* the render is black-grounded already; the scrim only guards the copy side */
.g3-mkfeat-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 10, 12, .92) 0%, rgba(10, 10, 12, .55) 36%, transparent 64%);
}
.g3-mkfeat-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 24px;
  justify-items: start;
  max-width: 940px;
  padding: clamp(56px, 8vh, 100px) clamp(24px, 6vw, 110px);
}
.g3-mkfeat-title {
  font-weight: 200;
  font-size: clamp(38px, 5.2vw, 100px);
  line-height: 1.05;
  letter-spacing: -.015em;
  max-width: 14ch;
}
.g3-mkfeat-spec {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bone-soft);
}
/* the asking price is live */
.g3-mkfeat-spec b,
.g3-mkfeat-spec b .woocommerce-Price-amount {
  font-weight: 500;
  color: var(--ember-hi);
}
.g3-mkfeat-copy .g3-btn { margin-top: 6px; }

@media (max-width: 900px) {
  .g3-mkfeat { min-height: 80vh; align-items: end; }
  .g3-mkfeat-media img { object-position: center 20%; opacity: .6; object-fit: cover; }
  .g3-mkfeat-media::after {
    background:
      linear-gradient(180deg, rgba(10, 10, 12, .5) 0%, rgba(10, 10, 12, .3) 40%, rgba(10, 10, 12, .9) 100%);
  }
  .g3-mkfeat-title { font-size: clamp(32px, 8vw, 52px); }
}

/* ---------------------------------------- 3 · collections ---- */
/* One ledger row per category: numeral stamp, the name, a dashed
   line, the live count as a giant thin numeral. Hover breathes. */

.g3-mkindex-rows { border-top: 1px solid var(--hairline); }
.g3-mkindex-row {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2.6vw, 40px);
  padding: clamp(26px, 3.4vw, 46px) 0;
  border-bottom: 1px solid var(--hairline);
  transition: padding-left var(--t-base) var(--ease);
}
.g3-mkindex-row:hover { padding-left: 18px; }
.g3-mkindex-no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--bone-faint);
}
.g3-mkindex-name {
  font-size: clamp(26px, 3.2vw, 54px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--bone);
}
.g3-mkindex-line {
  flex: 1;
  border-bottom: 1px dashed var(--hairline);
  translate: 0 -8px;
}
.g3-mkindex-count {
  font-weight: 200;
  font-size: clamp(38px, 4.8vw, 84px);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--bone);
}
.g3-mkindex-count em {
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.g3-mkindex-go {
  font-size: 22px;
  font-weight: 200;
  color: var(--bone-faint);
  transition: color var(--t-quick) var(--ease), translate var(--t-base) var(--ease);
}
.g3-mkindex-row:hover .g3-mkindex-go {
  color: var(--bone);
  translate: 6px 0;
}

@media (max-width: 700px) {
  .g3-mkindex-row { flex-wrap: wrap; row-gap: 8px; }
  .g3-mkindex-line { display: none; }
  .g3-mkindex-name { flex: 1; min-width: 0; }
  .g3-mkindex-count { font-size: clamp(30px, 9vw, 44px); margin-left: auto; }
  .g3-mkindex-go { display: none; }
}

/* ----------------------------------------- 4 · provenance ---- */
/* Where every file comes from: three numbered rows, one quiet CTA. */

.g3-mkprov-rows { border-top: 1px solid var(--hairline); }
.g3-mkprov-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: clamp(16px, 2.5vw, 40px);
  padding: clamp(22px, 2.8vw, 36px) 0;
  border-bottom: 1px solid var(--hairline);
  transition: padding-left var(--t-base) var(--ease);
}
.g3-mkprov-row:hover { padding-left: 14px; }
.g3-mkprov-no {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--bone-faint);
}
.g3-mkprov-name {
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 300;
  color: var(--bone);
}
.g3-mkprov-note {
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: right;
  color: var(--bone-faint);
}
.g3-mkprov-foot { margin-top: 34px; }

@media (max-width: 700px) {
  .g3-mkprov-row { grid-template-columns: 40px minmax(0, 1fr); }
  .g3-mkprov-note {
    grid-column: 2;
    text-align: left;
    white-space: normal;
  }
}

/* ------------------------------------------- slim head -------- */
/* Filtered / searched / paged views skip the editorial run. */

.g3-mkslim { padding-bottom: clamp(28px, 3.5vw, 48px); }
.g3-mkslim .g3-stamp { margin: 0 0 16px; }
.g3-mkslim .g3-h1 { font-weight: 300; }

/* ------------------------------------------------ toolbar ---- */
/* One quiet strip on hairlines, directly above the grid. Controls
   are caps-labelled groups; every field is a bare underline. The
   field names and data-s3-filters hook are a contract — restyled,
   never rewired. */

.g3-market { scroll-margin-top: 76px; }

.g3-shop-bar { border-block: 1px solid var(--hairline); }
.g3-shop-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px clamp(22px, 2.4vw, 44px);
  padding-block: 14px 16px;
}

.g3-shop-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.g3-shop-lab {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* bare fields: no boxes, a hairline under the figure */
.g3-shop-bar .g3-input,
.g3-shop-bar .g3-select {
  min-height: 32px;
  padding: 4px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  font-size: 13.5px;
  color: var(--bone);
  transition: border-color var(--t-quick) var(--ease);
}
.g3-shop-bar .g3-input:hover,
.g3-shop-bar .g3-select:hover { border-color: var(--hairline-2); }
.g3-shop-bar .g3-input:focus,
.g3-shop-bar .g3-select:focus {
  outline: none;
  border-color: var(--ember);
  box-shadow: none;
}

.g3-shop-group-q { flex: 0 1 220px; min-width: 170px; }
.g3-shop-q { width: 100%; }
.g3-shop-q::-webkit-search-cancel-button { -webkit-appearance: none; }

/* chip checkboxes — the input hides, the quiet caps chip carries
   the state; mint only when active */
.g3-shop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  min-height: 32px;
  align-items: center;
}
.g3-shop-check { cursor: pointer; }
.g3-shop-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.g3-shop-bar .g3-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-soft);
  cursor: pointer;
  transition: color var(--t-quick) var(--ease);
}
.g3-shop-bar .g3-chip i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--bone-faint);
  transition: color var(--t-quick) var(--ease);
}
.g3-shop-bar .g3-chip:hover { color: var(--bone); }
.g3-shop-bar .g3-chip.is-active,
.g3-shop-check input:checked + .g3-chip { color: var(--ember-hi); }
.g3-shop-check input:checked + .g3-chip i { color: var(--ember-hi); }
.g3-shop-check input:focus-visible + .g3-chip {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

/* format chips read as file extensions: mono, tighter */
.g3-shop-bar .g3-shop-fmt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
}

/* price pair — two short underline fields and a dash */
.g3-shop-price {
  display: flex;
  align-items: center;
  gap: 8px;
}
.g3-shop-price .g3-spec { color: var(--bone-faint); }
.g3-shop-price .g3-input {
  width: 64px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
/* spinners argue with the mono column; the keyboard still works */
.g3-shop-price input::-webkit-outer-spin-button,
.g3-shop-price input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.g3-shop-price input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.g3-shop-sort {
  width: auto;
  padding-right: 20px;
  cursor: pointer;
}
.g3-shop-sort option { background: var(--coal-2); color: var(--bone); }

.g3-shop-group-apply { margin-left: auto; }
.g3-shop-group-apply .g3-btn { min-height: 32px; padding: 5px 18px; font-size: 13px; }

/* ------------------------------------------- caption line ---- */

.g3-shop-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  padding-block: 14px 16px;
}
.g3-shop-count {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.g3-shop-active {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
}
/* active filter chips: quiet caps, mint because they are active */
.g3-shop-line .g3-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ember-hi);
}
.g3-shop-line .g3-chip i {
  font-style: normal;
  color: var(--ember-hi);
  transition: color var(--t-quick) var(--ease);
}
.g3-shop-line .g3-chip:hover i { color: var(--bone); }
.g3-shop-clear {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-soft);
  border-bottom-width: 1px;
  padding-bottom: 1px;
}

/* ------------------------------------------- the grid -------- */
/* Flush tiles separated by hairlines. The lattice is drawn by the
   tiles themselves — each one lays a hairline into the 1px gap on
   its right, below it, and at the corner — so the sheet has no
   ground of its own. A short last row therefore ends in page
   black, not in a lighter slab: only real tiles carry lines.
   The hairline is the opaque mix of --bone over --coal (the same
   value --hairline composites to), because three overlapping
   translucent shadows would double up at every crossing.
   The sheet clips the outer right edge (no frame on the sides,
   as before) and keeps 1px of padding so the bottom row's rule
   survives the clip. The first two cells are feature cells:
   double width, wider plate, louder caption. */

.g3-shop-sheet {
  --g3-lattice: color-mix(in srgb, var(--bone) 8%, var(--coal));
  list-style: none;
  margin: 0;
  padding: 0 0 1px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 1px;
  background: transparent;
  border-top: 1px solid var(--hairline);
  overflow: clip;
}

.g3-shcell {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--coal);
  position: relative;
}
.g3-shop-sheet > .g3-shcell {
  box-shadow:
    1px 0 0 0 var(--g3-lattice),
    0 1px 0 0 var(--g3-lattice),
    1px 1px 0 0 var(--g3-lattice);
}

.g3-shcell-link,
li .g3-shcell-link {
  display: block;
  color: inherit;
  text-decoration: none;   /* system.css underlines `li a`; a tile is a plate */
}
.g3-shcell-link:focus-visible { outline-offset: -3px; }

/* the render, edge to edge — its own black is the tile's black */
.g3-shcell-plate {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
}
.g3-shcell-plate img,
.g3-shcell-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: filter var(--t-base) var(--ease);
}
.g3-shcell-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--bone-faint);
}

/* feature cells: the first two entries of the archive grid run
   double width (scoped to the archive sheet — the PDP related
   strip reuses the cell, not the feature) */
.g3-shop-sheet > .g3-shcell:nth-child(-n+2) { grid-column: span 2; }
.g3-shop-sheet > .g3-shcell:nth-child(-n+2) .g3-shcell-plate { aspect-ratio: 4 / 3; }
.g3-shop-sheet > .g3-shcell:nth-child(-n+2) .g3-shcell-name { font-size: 19px; }
.g3-shop-sheet > .g3-shcell:nth-child(-n+2) .g3-shcell-cap { padding: 16px 18px 20px; }

/* hover: the render brightens a touch, the arrow slides — nothing lifts */
.g3-shcell:hover .g3-shcell-plate img,
.g3-shcell:focus-within .g3-shcell-plate img {
  filter: brightness(1.16);
}

/* one honest caps flag over the render */
.g3-shcell-stamp {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-soft);
}

/* the caption: name + arrow on one line, caps meta under */
.g3-shcell-cap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 14px;
  padding: 14px 16px 18px;
}
.g3-shcell-name {
  min-width: 0;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--bone);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.g3-shcell-go {
  font-size: 15px;
  font-weight: 300;
  color: var(--bone-faint);
  transition: color var(--t-quick) var(--ease), translate var(--t-base) var(--ease);
}
.g3-shcell:hover .g3-shcell-go,
.g3-shcell:focus-within .g3-shcell-go {
  color: var(--bone);
  translate: 5px 0;
}
.g3-shcell-spec {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--bone-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g3-shcell-spec b { font-weight: 500; color: var(--bone-soft); }
.g3-shcell-spec del { color: var(--bone-faint); text-decoration-color: var(--hairline-2); }
.g3-shcell-spec del b { color: var(--bone-faint); font-weight: 400; }
/* the struck amount is history, the asking amount is live */
.g3-shcell-spec del + b,
.g3-shcell-spec del ~ b { color: var(--ember-hi); }

/* ------------------------------------------------ empty ------ */

.g3-shop-empty {
  display: grid;
  justify-items: start;
  gap: 16px;
  padding-block: clamp(64px, 8vw, 120px);
  border-top: 1px solid var(--hairline);
}
.g3-shop-empty .g3-h2 { font-weight: 300; }
.g3-shop-empty .g3-btn { margin-top: 8px; }

/* ------------------------------------------------ pager ------ */
/* WooCommerce puts .page-numbers on the <ul> and on every link,
   so every rule is scoped to li. Bare mono numerals on the page;
   the current one is live. */

.g3-shop-pager { padding-top: clamp(28px, 4vw, 48px); }
.g3-shop-pager .woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}
.g3-shop-pager li { list-style: none; margin: 0; }
.g3-shop-pager li .page-numbers {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 0;
  border-bottom: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--bone-soft);
  transition: color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease);
}
.g3-shop-pager li a.page-numbers:hover {
  color: var(--bone);
  border-bottom-color: var(--hairline-2);
}
.g3-shop-pager li .page-numbers.current {
  color: var(--ember-hi);
  border-bottom-color: var(--ember);
}

/* --------------------------------------------- responsive ---- */

@media (max-width: 1280px) {
  .g3-shop-sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .g3-shop-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3-shop-group-apply { margin-left: 0; }
}

@media (max-width: 680px) {
  .g3-shop-bar-inner { gap: 16px 26px; padding-block: 16px 18px; }
  .g3-shop-group-q { flex: 1 1 100%; min-width: 0; }

  /* thumb sizing: tapped controls get a 44px box, and every text
     field 16px so iOS does not rescale the viewport on focus */
  .g3-shop-bar .g3-input,
  .g3-shop-bar .g3-select { font-size: 16px; min-height: 44px; }
  .g3-shop-check .g3-chip { min-height: 40px; align-items: center; }
  .g3-shop-group-apply { width: 100%; }
  .g3-shop-group-apply .g3-btn { width: 100%; min-height: 44px; }
  .g3-shop-pager li .page-numbers { min-width: 44px; height: 44px; }
}

@media (max-width: 520px) {
  .g3-shop-sheet { grid-template-columns: 1fr; }
  /* one track: the feature span would mint a phantom column */
  .g3-shop-sheet > .g3-shcell:nth-child(-n+2) { grid-column: auto; }
  .g3-shop-sheet > .g3-shcell:nth-child(-n+2) .g3-shcell-plate { aspect-ratio: 1; }
  .g3-shop-sheet > .g3-shcell:nth-child(-n+2) .g3-shcell-name { font-size: 15.5px; }
  .g3-shop-sheet > .g3-shcell:nth-child(-n+2) .g3-shcell-cap { padding: 13px 14px 16px; }
  .g3-shcell-name { white-space: normal; }
  .g3-shcell-cap { padding: 13px 14px 16px; }
}

/* --------------------------------------------------- a11y ---- */

@media (prefers-reduced-motion: reduce) {
  .g3-shcell-plate img { transition: none; }
  .g3-shcell-go { transition: none; }
  .g3-mkindex-row, .g3-mkindex-go, .g3-mkprov-row { transition: none; }
}