/* ==========================================================================
   BON JEU — shop index
   Loads on top of product.css, which owns the palette, nav, sections, editorial
   band and footer. Only the listing itself lives here.
   ========================================================================== */

/* --------------------------------------------------------------------- head */

.shop-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  padding: clamp(40px, 7vw, 96px) 0 clamp(36px, 5vw, 72px);
}

.shop-head__title {
  font-size: clamp(30px, 4.8vw, 70px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.shop-head__note {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.section__note {
  max-width: 52ch;
  margin: -8px 0 30px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--ink-soft);
}

/* -------------------------------------------------------------------- grid */

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 40px) clamp(16px, 2vw, 32px);
}

.grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* -------------------------------------------------------------------- tile */

.tile { display: block; }

.tile__frame {
  position: relative;
  background: var(--plate-bg, #fbfaf8);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.tile--flat .tile__frame { aspect-ratio: 1; }

/* padding-bottom matches the product pages: garments hang slightly high so
   they do not read as having slipped down the frame. */
.tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 5%;
  object-fit: contain;
  transition: opacity 500ms var(--ease);
}

/* The second view is the hover state: the garment turns rather than the tile
   moving. Only where hover exists — on touch the alt view is simply unused. */
.tile__img--alt { opacity: 0; }

@media (hover: hover) {
  /* Only swap where there is a second view to swap to — the collection tiles
     hold one image, and fading it out left an empty box. */
  .tile:has(.tile__img--alt):hover .tile__img { opacity: 0; }
  .tile:has(.tile__img--alt):hover .tile__img--alt { opacity: 1; }

  /* Single-image tiles get a quiet lift instead. */
  .tile:not(:has(.tile__img--alt)):hover .tile__img { opacity: 0.86; }
}

.tile__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

.tile__name {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tile__price {
  font-size: 12px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.tile__colour {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Pieces that are not buyable yet say so, and do not pretend to be links. */
.is-soon { cursor: default; }
.is-soon .tile__price { color: var(--ink-mute); font-style: italic; }

/* ------------------------------------------------------------------ mobile */

@media (max-width: 940px) {
  .grid--four { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .shop-head__note { white-space: normal; }
}

@media (max-width: 620px) {
  .grid { grid-template-columns: 1fr; }
  .grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}