/* ==========================================================================
   6ixmerchandise — collection, product card, grid, search, 404
   Owner: FE-3.  Every value traced to FRONTEND_ARCHITECTURE.md §5 / §2.6 / §2.10
   or to docs/frontend/{desktop-grid,mobile-collection,collection-anatomy}.json.
   Consumes assets/css/tokens.css — declares no colours of its own.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Small shared primitives (eyebrow / mono / chip / button / skip link)
   -------------------------------------------------------------------------- */

.sixm-eyebrow {
  font-family: var(--6m-mono);
  font-size: var(--6m-eyebrow-size);
  font-weight: var(--6m-eyebrow-weight);
  letter-spacing: var(--6m-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--6m-signal);
  margin: 0;
}

.sixm-mono {
  font-family: var(--6m-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sixm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--6m-line);
  border-radius: 0;
  background: var(--6m-bg);
  color: var(--6m-ink);
  font-family: var(--6m-mono);
  font-size: var(--6m-chip-size);
  letter-spacing: var(--6m-chip-tracking);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  min-height: 32px;
  transition: background var(--animation-speed-slow) var(--animation-easing),
    color var(--animation-speed-slow) var(--animation-easing);
}

.sixm-chip:hover { background: var(--6m-bg-2); }

.sixm-chip--dark {
  background: var(--6m-ink);
  border-color: var(--6m-ink);
  color: var(--6m-bg);
}

.sixm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--6m-btn-padding);
  border: 1px solid var(--6m-ink);
  border-radius: var(--6m-btn-radius);
  background: var(--6m-ink);
  color: var(--6m-bg);
  font-family: var(--6m-sans);
  font-size: var(--6m-btn-size);
  font-weight: var(--6m-btn-weight);
  letter-spacing: var(--6m-btn-tracking);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  min-height: var(--minimum-touch-target);
}

.sixm-btn--sm { padding: 9px 14px; min-height: 36px; font-size: 12px; }
.sixm-btn--light { background: var(--6m-bg); color: var(--6m-ink); border-color: var(--6m-bg); }
.sixm-btn--ghost { background: transparent; color: currentColor; border-color: currentColor; }

.sixm-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sixm-skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  display: inline-block;
  margin: 8px var(--6m-gutter);
  padding: 8px 12px;
  background: var(--6m-ink);
  color: var(--6m-bg);
}

.screen-reader-text,
.sixm-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   1. Breadcrumbs (§6.2)
   -------------------------------------------------------------------------- */

.s6m-bc {
  max-width: var(--narrow-page-width);
  margin: 0 auto;
  padding: 12px var(--6m-gutter) 0;
}

.s6m-bc__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--6m-muted);
}

.s6m-bc__list a { color: var(--6m-muted); text-decoration: none; }
.s6m-bc__list a:hover { color: var(--6m-ink); text-decoration: underline; }
.s6m-bc__sep { color: var(--6m-muted-2); }
.s6m-bc__current { color: var(--6m-ink); }

@media screen and (min-width: 768px) {
  .s6m-bc { padding-inline: var(--6m-gutter-d); }
}

/* --------------------------------------------------------------------------
   2. Hero (§5.1)
   -------------------------------------------------------------------------- */

.sixm-coll-hero {
  background: var(--6m-bg);
  border-bottom: 1px solid var(--6m-line);
}

.sixm-coll-hero__inner {
  max-width: var(--narrow-page-width);
  margin: 0 auto;
  padding: 18px var(--6m-gutter) 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.sixm-coll-hero__text { min-width: 0; flex: 1 1 auto; }

.sixm-coll-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
}

.sixm-coll-hero__pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--6m-signal);
  animation: sixm-chip-pulse 1.5s infinite;
}

@keyframes sixm-chip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.sixm-coll-hero__title {
  font-family: var(--6m-display);
  font-weight: 400;
  font-size: clamp(40px, 11vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--6m-ink);
  margin: 6px 0 0;
}

.sixm-coll-hero__body {
  max-width: 540px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--6m-muted);
}

.sixm-coll-hero__body p { margin: 0 0 8px; }

/* Collection-hero Spotify band (REVIEW_3 N-3). The slot reserves the player's
   exact height BEFORE the iframe exists, so the deferred injection in
   assets/js/collection.js moves nothing on the page — CLS contribution 0. */
.sixm-coll-hero__player {
  margin: 18px 0 0;
  max-width: 520px;
}

.sixm-coll-hero__player-label {
  margin: 0 0 8px;
  color: var(--6m-signal);
}

.sixm-coll-hero__slot {
  position: relative;
  display: block;
  height: 152px;          /* the Spotify compact player's own height */
  border: 1px solid var(--6m-line-2);
  background: var(--6m-bg-2, #f4f3ef);
  overflow: hidden;
}

/* A real control once JS arms it (role=button + tabindex are set there), so the
   third-party embed only loads when a shopper asks for it. */
.sixm-coll-hero__skeleton {
  display: grid;
  place-items: center;
  height: 100%;
  font-family: var(--6m-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--6m-muted);
}

.sixm-coll-hero__skeleton[role="button"] { cursor: pointer; }
.sixm-coll-hero__skeleton[role="button"]:hover { color: var(--6m-ink); }
.sixm-coll-hero__skeleton:focus-visible { outline: 2px solid var(--6m-ink); outline-offset: -2px; }

.sixm-coll-hero__frame {
  display: block;
  width: 100%;
  height: 152px;
  border: 0;
}
.sixm-coll-hero__body p:last-child { margin-bottom: 0; }
.sixm-coll-hero__body a { color: var(--6m-ink); }

.sixm-coll-hero__media { display: none; }

@media screen and (min-width: 768px) {
  .sixm-coll-hero__inner { padding: 22px var(--6m-gutter-d) 28px; }
  .sixm-coll-hero__title { font-size: clamp(56px, 7vw, 92px); }
  .sixm-coll-hero__body { max-width: 640px; font-size: 14px; }

  .sixm-coll-hero__media {
    display: block;
    flex: 0 0 auto;
    width: min(320px, 28vw);
  }

  .sixm-coll-hero__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--6m-bg-2);
  }
}

/* --------------------------------------------------------------------------
   3. Sticky chip bar (§5.2)
   -------------------------------------------------------------------------- */

.sixm-coll-filter {
  background: var(--6m-bg);
  border-bottom: 1px solid var(--6m-line);
  position: sticky;
  top: var(--sticky-header-offset, var(--header-height, 0px));
  z-index: var(--layer-sticky, 8);
}

.sixm-coll-filter__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--6m-gutter);
  max-width: var(--narrow-page-width);
  margin: 0 auto;
  flex-wrap: nowrap;
  min-width: 0;
}

.sixm-coll-filter__chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
  flex: 1 1 auto;
}

.sixm-coll-filter__chips::-webkit-scrollbar { display: none; }
.sixm-coll-filter__pill { flex: 0 0 auto; }
.sixm-coll-filter__count { display: none; color: var(--6m-muted); flex: 0 0 auto; }

@media screen and (min-width: 768px) {
  .sixm-coll-filter__bar { padding: 12px var(--6m-gutter-d); }
  .sixm-coll-filter__count { display: inline; }
}

/* --------------------------------------------------------------------------
   4. Facet bar (§5.3)
   -------------------------------------------------------------------------- */

.sixm-facets {
  max-width: var(--narrow-page-width);
  margin: 0 auto;
  padding: 8px var(--6m-gutter);
  border-bottom: 1px solid var(--6m-line-2);
}

.sixm-facets__row {
  display: flex;
  align-items: center;
  gap: 8px 18px;
  overflow-x: auto;
  scrollbar-width: none;
}

.sixm-facets__row::-webkit-scrollbar { display: none; }

@media screen and (min-width: 768px) {
  .sixm-facets__row { flex-wrap: wrap; overflow: visible; }
}

.sixm-facet { position: relative; }

.sixm-facet__summary {
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  color: var(--6m-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  min-height: 32px;
}

.sixm-facet__summary::-webkit-details-marker { display: none; }
.sixm-facet__summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}

.sixm-facet[open] > .sixm-facet__summary::after { transform: rotate(225deg) translate(-1px, -1px); }

.sixm-facet__panel {
  position: absolute;
  z-index: var(--layer-header-menu, 12);
  top: 100%;
  left: 0;
  min-width: 240px;
  max-height: 320px;
  overflow: auto;
  padding: 12px;
  background: var(--6m-bg);
  border: 1px solid var(--6m-line);
  box-shadow: var(--shadow-popover);
}

.sixm-facet__panel--swatches,
.sixm-facet__panel--pills { display: flex; flex-wrap: wrap; gap: 6px; }

.sixm-facet__option,
.sixm-facet__pill,
.sixm-facet__swatch {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--6m-ink);
  cursor: pointer;
  padding: 5px 2px;
  min-height: 30px;
}

.sixm-facet__pill,
.sixm-facet__swatch {
  border: 1px solid var(--6m-line);
  padding: 5px 9px;
}

.sixm-facet__pill.is-active,
.sixm-facet__swatch.is-active { border-color: var(--6m-ink); box-shadow: inset 0 0 0 1px var(--6m-ink); }

.sixm-facet__dot {
  width: 14px;
  height: 14px;
  border: 1px solid var(--6m-line);
  flex: 0 0 auto;
}

.sixm-facet__count { color: var(--6m-muted-2); font-size: 11px; }
.sixm-facet__range { display: flex; align-items: center; gap: 8px; }
.sixm-facet__range input { width: 88px; padding: 8px; border: 1px solid var(--color-input-border); border-radius: var(--style-border-radius-inputs); font: inherit; }
.sixm-facet__sep { color: var(--6m-muted); font-size: 13px; }
.sixm-facet__hint { margin: 8px 0 0; font-size: 12px; color: var(--6m-muted); }

.sixm-facets__sort { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sixm-facets__sort-label { font-size: 14px; color: var(--6m-ink); }
.sixm-facets__select { font: inherit; font-size: 13px; padding: 7px 8px; border: 1px solid var(--color-input-border); border-radius: var(--style-border-radius-inputs); background: var(--6m-bg); min-height: 34px; }
.sixm-facets__actions { display: flex; align-items: center; gap: 12px; }
/* With JavaScript the facets apply on change, so the submit button is redundant. */
.sixm-facets__form[data-js] .sixm-facets__apply { display: none; }
.sixm-facets__clear { font-size: 13px; color: var(--6m-muted); }
.sixm-facets__active { margin: 8px 0 0; font-size: 12px; color: var(--6m-muted); }

@media screen and (min-width: 768px) {
  .sixm-facets { padding-inline: var(--6m-gutter-d); }
}

/* --------------------------------------------------------------------------
   5. Grid (§5.4) — measured live: 5 cols @1440 (card 259px), 2 @390 (card 189px)
   -------------------------------------------------------------------------- */

.sixm-collection__results {
  max-width: var(--narrow-page-width);
  margin: 0 auto;
  /* full_width_on_mobile: true — the live grid is edge-to-edge under 750px, which is
     what makes the card exactly 189px at a 390px viewport (2 x 189 + 12 = 390). */
  padding: 0 0 32px;
}

.sixm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  container-type: inline-size;
  container-name: product-grid;
}

@media screen and (min-width: 750px) {
  .sixm-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px 16px;
  }
  /* --page-margin (40px), not the 48px hero gutter: this is what makes the card
     259px wide at 1440, matching docs/frontend/desktop-grid.json. */
  .sixm-collection__results { padding-inline: var(--page-margin); }
}

/* Grid-density toggle (§5.3). One step tighter than the default at every
   breakpoint — 3-up instead of 2-up on a phone, ~190px instead of ~250px tracks on
   desktop. Presentation only; the URL and the result set do not change. */
[data-sixm-density="compact"] .sixm-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media screen and (min-width: 750px) {
  [data-sixm-density="compact"] .sixm-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px 12px;
  }
}

.sixm-facets__density {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
}

.sixm-facets__density-option {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--6m-muted-2);
  cursor: pointer;
}

.sixm-facets__density-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.sixm-facets__density-option:hover { color: var(--6m-ink); }
.sixm-facets__density-option:has(input:checked) { color: var(--6m-ink); }
.sixm-facets__density-option:has(input:focus-visible) { outline: 2px solid var(--6m-ink); outline-offset: 2px; }

.sixm-grid--four { grid-template-columns: repeat(2, 1fr); }

@media screen and (min-width: 750px) {
  .sixm-grid--four { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   6. THE product card (§5.5)
   -------------------------------------------------------------------------- */

.sixm-card {
  position: relative;
  border-radius: var(--product-corner-radius, 0);
  border: none;
  min-width: 0;
}

.sixm-card__link {
  position: absolute;
  inset: 0;
  z-index: var(--layer-raised, 2);
}

.sixm-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--product-card-gap, 4px);
  overflow: hidden;
}

/* The image box is reserved by the CONTAINER, never by the image.
   Most of the catalogue is imported without thumbnails; if the box depended on the
   image's intrinsic size the cards would collapse to text height and the grid rows
   would go ragged wherever image availability is mixed. */
.sixm-card__media {
  position: relative;
  width: 100%;
  background: var(--6m-bg-2);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

@supports not (aspect-ratio: 1 / 1) {
  .sixm-card__media { height: 0; padding-block-start: 100%; }
}

.sixm-card__gallery { position: absolute; inset: 0; display: block; }

.sixm-card__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--6m-bg-2);
}

.sixm-card__img--hover {
  opacity: 0;
  transition: opacity var(--hover-transition-duration) var(--hover-transition-timing);
}

.sixm-card__img--placeholder { background: var(--6m-bg-2); }

@media (hover: hover) and (pointer: fine) {
  .sixm-card:hover .sixm-card__img--hover { opacity: 1; }
}

.sixm-card__badges {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: var(--layer-flat, 1);
  display: flex;
  gap: 4px;
}

.sixm-card__badge {
  border-radius: var(--badge-border-radius, 100px);
  padding: 4px 10px;
  font-size: 11px;
  line-height: 1.2;
  text-transform: none;
  color: var(--6m-ink);
}

.sixm-card__badge--sale { background: var(--6m-bg); }
.sixm-card__badge--soldout { background: #eef1ea; }

.sixm-card__wish {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: var(--layer-raised, 2);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--6m-bg);
  color: var(--6m-ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--hover-transition-duration) var(--hover-transition-timing);
}

.sixm-card:hover .sixm-card__wish,
.sixm-card__wish:focus-visible { opacity: 1; }

.sixm-card__info { display: flex; flex-direction: column; gap: 2px; min-height: 56px; }

.sixm-card__eyebrow { color: var(--6m-muted); font-size: 9.5px; }

.sixm-card__title-link { text-decoration: none; color: inherit; }

.sixm-card__title {
  margin: 0;
  padding-block-start: 4px;
  font-family: var(--6m-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-align: left;
  text-wrap: pretty;
  color: var(--6m-ink);
}

.sixm-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--6m-mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--6m-ink);
}

.sixm-card__price .price-item--regular,
.sixm-card__price s { color: var(--6m-muted-2); font-weight: 400; text-decoration: line-through; }
.sixm-card__price .woocommerce-Price-currencySymbol { font-weight: inherit; }

.sixm-card__swatches { display: flex; gap: 0; overflow: hidden; padding-top: 2px; }

.sixm-card__swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--6m-line);
  margin-right: 4px;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   7. Result count, empty state, pagination (§5.4, §5.8)
   -------------------------------------------------------------------------- */

.sixm-result-count { margin: 18px 0 0; color: var(--6m-muted); text-align: center; }

.sixm-empty {
  max-width: 560px;
  margin: 48px auto;
  text-align: center;
}

.sixm-empty__title { font-family: var(--6m-display); font-size: 28px; text-transform: uppercase; margin: 0 0 8px; }
.sixm-empty__body { color: var(--6m-muted); font-size: 14px; }

.sixm-pagination {
  --pagination-size: 36px;
  display: flex;
  justify-content: center;
  padding: var(--padding-xl) var(--padding-sm);
  margin-top: var(--padding-xl);
}

.pagination__list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination__link {
  display: grid;
  place-items: center;
  min-width: var(--pagination-size);
  height: var(--pagination-size);
  padding: 0 6px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--6m-ink);
  text-decoration: none;
}

.pagination__link:hover { background: var(--6m-bg-2); }

.pagination__link--current {
  background: var(--color-foreground, var(--6m-ink));
  color: var(--color-background, var(--6m-bg));
}

.pagination__link--disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.pagination__link--gap { display: grid; place-items: center; min-width: var(--pagination-size); height: var(--pagination-size); color: var(--6m-muted); }

@media screen and (max-width: 749px) {
  .pagination__item--mobile-hide { display: none; }
}

/* --------------------------------------------------------------------------
   8. Below the grid: description remainder, FAQ accordions, link mesh, guides
   -------------------------------------------------------------------------- */

.sixm-coll-body {
  max-width: 860px;
  margin: 28px auto 8px;
  padding: 0 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--6m-ink);
}

.sixm-coll-body p { margin: 0 0 14px; color: var(--6m-muted); }

.sixm-coll-body h2 {
  font-family: var(--6m-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 26px 0 10px;
  color: var(--6m-ink);
}

.sixm-coll-body a { color: var(--6m-ink); text-underline-offset: 2px; }

.sixm-coll-body > details {
  margin: 0 0 14px;
}

.sixm-coll-body > details > summary {
  cursor: pointer;
  list-style: none;
  color: var(--6m-muted);
  font-size: 14px;
}

.sixm-coll-body > details > summary::-webkit-details-marker { display: none; }

/* The sixm-faq__list blocks exist inside 197 imported collection bodies (§2.7 styles). */
.sixm-faq__list {
  max-width: 820px;
  margin: 22px auto 0;
  border-top: 1px solid #ececec;
}

.sixm-faq__list h2 {
  font-family: var(--6m-display);
  font-size: 16px;
  font-weight: 400;
  margin: 0 0 4px;
}

.sixm-faq__item {
  border-bottom: 1px solid #ececec;
  padding: 11px 2px;
}

.sixm-faq__item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14.5px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: #222;
}

.sixm-faq__item summary::-webkit-details-marker { display: none; }
.sixm-faq__item summary::after { content: "+"; font-size: 19px; line-height: 1; color: #aaa; }
.sixm-faq__item[open] summary::after { content: "\2013"; }
.sixm-faq__a { padding: 8px 0 2px; color: #555; font-size: 14px; line-height: 1.55; }
.sixm-faq__a p { margin: 0 0 8px; color: inherit; }

.sixm-linkmesh {
  max-width: 1100px;
  margin: 36px auto 0;
  padding: 0 18px;
}

/* Four cards with a two-letter monogram, the name, a drop count and an arrow —
   the anatomy of live's "Other artists 999 fans cop" block
   (docs/frontend/html/collection-juice-wrld.html). The dense 14-item three-column
   list this replaced was a link dump, not a shortlist. */
.sixm-linkmesh__head { margin: 0 0 18px; }

.sixm-linkmesh__title {
  font-family: var(--6m-display);
  font-weight: 400;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

.sixm-linkmesh__sub {
  margin: 0;
  font-size: 13px;
  color: var(--6m-muted);
}

.sixm-linkmesh__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sixm-linkmesh__item a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px 12px;
  padding: 14px 16px;
  border: 1px solid var(--6m-line-2);
  color: var(--6m-ink);
  text-decoration: none;
  font-size: 13px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.sixm-linkmesh__item a:hover {
  border-color: var(--6m-ink);
  transform: translateY(-2px);
}

.sixm-linkmesh__mono {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--6m-line-2);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--6m-muted);
}

.sixm-linkmesh__name {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.sixm-linkmesh__arrow {
  grid-row: 1 / span 2;
  color: var(--6m-muted-2);
}

.sixm-linkmesh__item a:hover .sixm-linkmesh__name { text-decoration: underline; }
/* --6m-muted-2 composites to #a9a9a9 on white = 2.35:1. No grey lighter than
   #767676 clears AA, so the quiet tier collapses into --6m-muted here
   (REVIEW_3 item 6). */
.sixm-linkmesh__count { grid-column: 2; color: var(--6m-muted); font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  .sixm-linkmesh__item a { transition: none; }
  .sixm-linkmesh__item a:hover { transform: none; }
}

.sixm-guides {
  padding: 36px 20px;
  background: #fafafa;
  border-top: 1px solid #e8e8e8;
  margin-top: 32px;
}

.sixm-guides__inner { max-width: 1100px; margin: 0 auto; }
.sixm-guides__head { text-align: center; margin-bottom: 24px; }

.sixm-guides__title {
  margin: 0;
  font-family: var(--6m-display);
  font-weight: 400;
  font-size: 1.35em;
  letter-spacing: -0.5px;
  color: #0a0a0a;
  text-transform: uppercase;
}

.sixm-guides__sub { margin: 8px 0 0; color: #666; font-size: 0.92em; }

.sixm-guides__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.sixm-guides__card {
  display: block;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  color: #0a0a0a;
  text-decoration: none;
  transition: all 0.2s;
}

.sixm-guides__card:hover { border-color: var(--6m-ink); transform: translateY(-2px); }

.sixm-guides__eyebrow {
  display: block;
  font-size: 0.72em;
  /* #888 on white is 3.54:1 — below AA. Same grey family, two steps darker. */
  color: var(--6m-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin-bottom: 6px;
}

.sixm-guides__name { display: block; font-weight: 700; font-size: 0.98em; line-height: 1.35; }

/* --------------------------------------------------------------------------
   9. /collections index (§5.10)
   -------------------------------------------------------------------------- */

.sixm-collections-index {
  max-width: var(--narrow-page-width);
  margin: 0 auto;
  padding: 0 var(--6m-gutter) 48px;
}

.sixm-collections-index__header { padding: 48px 0 24px; }

.sixm-collections-index__title {
  font-family: var(--6m-display);
  font-weight: 400;
  font-size: clamp(40px, 9vw, 72px);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0;
}

.sixm-collections-index__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 768px) {
  .sixm-collections-index { padding-inline: var(--6m-gutter-d); }
  .sixm-collections-index__grid { grid-template-columns: repeat(3, 1fr); }
}

.sixm-collection-card a { display: block; color: inherit; text-decoration: none; }

.sixm-collection-card__media {
  display: block;
  background: var(--6m-bg-2);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

/* No collection images were imported (0 of 276 thumbnail_id values resolve), so the
   empty tile stays square instead of reserving a 4:5 portrait box per card. */
.sixm-collection-card__media--empty { aspect-ratio: 1 / 1; }

.sixm-collection-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sixm-collection-card__title { display: block; margin-top: 8px; font-size: 14px; font-weight: 500; }
.sixm-collection-card__count { display: block; color: var(--6m-muted-2); margin-top: 2px; }

/* --------------------------------------------------------------------------
   10. Search (§2.6)
   -------------------------------------------------------------------------- */

.sixm-search {
  max-width: var(--narrow-page-width);
  margin: 0 auto;
  padding: 0 var(--6m-gutter) 48px;
}

.sixm-search__bar {
  position: sticky;
  top: var(--sticky-header-offset, var(--header-height, 0px));
  z-index: var(--layer-sticky, 8);
  background: var(--6m-bg);
  padding: 16px 0;
}

.sixm-search__form {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: var(--input-search-max-width);
  position: relative;
}

.sixm-search__form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--style-border-radius-inputs);
  font: inherit;
  font-size: 14px;
}

.sixm-search__clear {
  position: absolute;
  right: 104px;
  color: var(--6m-muted);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
}

/* The H1 (see search.php). Sized here so promoting the element from <p> did not
   change a pixel: h1's own scale must not apply to it. */
.sixm-search__count { margin: 12px 0 0; color: var(--6m-muted); font-size: 11px; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
.sixm-search__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sixm-search__trending,
.sixm-search__recent,
.sixm-search__popular { margin-top: 28px; }

@media screen and (min-width: 768px) {
  .sixm-search { padding-inline: var(--6m-gutter-d); }
}

/* --------------------------------------------------------------------------
   11. 404 (§2.10)
   -------------------------------------------------------------------------- */

.sixm-404 {
  background: #0a0a0a;
  color: #fff;
  min-height: 80vh;
}

.sixm-404__inner {
  max-width: var(--narrow-page-width);
  margin: 0 auto;
  padding: 56px var(--6m-gutter) 72px;
}

.sixm-404__eyebrow { color: var(--6m-signal); }

.sixm-404__title {
  font-family: var(--6m-display);
  font-weight: 400;
  font-size: clamp(56px, 13vw, 116px);
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 10px 0 0;
  /* Explicit: Kadence colours headings from its global palette, which would render
     "PAGE" in near-black on this black panel. */
  color: #fff;
}

.sixm-404__title-line { display: block; color: #fff; }
.sixm-404__title-line--signal { color: var(--6m-signal); }

.sixm-404__body { max-width: 420px; margin: 20px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.72); }

.sixm-404__search { display: flex; gap: 8px; margin: 20px 0 0; max-width: 460px; }

.sixm-404__search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 14px;
}

.sixm-404__search input::placeholder { color: rgba(255, 255, 255, 0.45); }
.sixm-404__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.sixm-404__label { color: var(--6m-signal); margin: 0 0 10px; }
.sixm-404__collections,
.sixm-404__picks { margin-top: 40px; }
.sixm-404__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.sixm-404 .sixm-chip {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.sixm-404 .sixm-chip:hover { background: rgba(255, 255, 255, 0.08); }
.sixm-404 .sixm-card__title { color: #fff; }
.sixm-404 .sixm-card__price { color: #fff; }
.sixm-404 .sixm-card__eyebrow { color: rgba(255, 255, 255, 0.55); }
.sixm-404 .sixm-card__media,
.sixm-404 .sixm-card__img,
.sixm-404 .sixm-card__img--placeholder { background: #1a1a1a; }
.sixm-404 .sixm-card__title-line--signal { color: var(--6m-signal); }

@media screen and (min-width: 768px) {
  .sixm-404__inner { padding-inline: var(--6m-gutter-d); }
}

/* --------------------------------------------------------------------------
   12. Motion / forced colours
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sixm-coll-hero__pulse { animation: none; }
  .sixm-card__img--hover,
  .sixm-card__wish,
  .sixm-guides__card { transition: none; }
}

@media screen and (forced-colors: active) {
  .sixm-card__wish { opacity: 1; }
  .sixm-card__badge { border: 1px solid currentColor; }
}