/* Editorial shop index */
.categories {
  scroll-margin-top: 80px;
  grid-template-columns: var(--split-40-60);
  gap: clamp(40px, 3.3vw, 72px);
  align-items: stretch;
  padding: 64px var(--gutter) 72px;
  background: var(--paper);
}

.cat-list { min-width: 0; }
.cat-list > .cat-title {
  margin-bottom: 28px;
  font-size: clamp(34px, 3.3vw, 46px);
  line-height: 1.08;
}
.cat-link {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  flex: 1 1 auto;
  gap: 12px;
  min-height: 72px;
  padding: 12px 0;
  color: var(--ink);
  border-color: #dedbd3;
}
.cat-link:last-child { border-bottom: 1px solid #dedbd3; }
.cat-num {
  color: #a28b77;
  font: 400 10px/1 var(--mono);
  letter-spacing: .15em;
}
.cat-name {
  font: 300 clamp(28px, 2.2vw, 38px)/1.05 var(--serif);
  letter-spacing: -.035em;
  transition: color .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.cat-link.is-active { color: var(--ink); }
.cat-link.is-active .cat-name {
  color: #c96d4d;
  font-style: italic;
  transform: none;
}
.cat-sub {
  color: #a28b77;
  opacity: 1;
  font: 400 9px/1.4 var(--mono);
  letter-spacing: .17em;
  white-space: nowrap;
}
.cat-thumb { display: none; }
.menu-visual-img { width: 100%; background-position: center; }

.cat-visual {
  position: relative;
  top: auto;
  justify-self: stretch;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-left: 3px solid #cd7256;
  background: #d7d3cb;
  isolation: isolate;
}
.cat-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: 0;
  transform: scale(1.045);
  transition: opacity .64s cubic-bezier(.22,.61,.36,1), transform 3.2s cubic-bezier(.2,.55,.3,1);
}
.cat-placeholder { background: #d7d3cb; }
/* Menswear, Womenswear: keep the face in frame */
.cat-photo[data-photo="0"] { object-position: center 20%; }
.cat-photo[data-photo="1"] { object-position: center 15%; }
/* Beanie sits at the top of the shot: keep the whole hat in frame */
.cat-photo[data-photo="2"] { object-position: center 4%; }
.cat-photo.is-active {
  opacity: 1;
  transform: scale(1);
}
.cat-visual-label {
  position: absolute;
  z-index: 4;
  bottom: 20px;
  left: 17px;
  display: inline-block;
  padding: 8px 16px;
  background: #30312e;
  color: #f9f5ed;
  font: 400 10px/1.2 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .categories {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 56px;
    padding-bottom: 72px;
  }
  .cat-list { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .cat-list > .cat-title { width: auto; margin-bottom: 24px; }
  .cat-link {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 80px;
    gap: 8px;
    min-height: 96px;
    height: auto;
    padding: 8px 0;
    border: 0;
    border-top: 1px solid #dedbd3;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
  }
  .cat-link.is-active { background: transparent; border-color: #dedbd3; color: var(--ink); }
  .cat-link:last-child { border-bottom: 1px solid #dedbd3; }
  .cat-num { display: block; }
  .cat-name, .cat-link.is-active .cat-name {
    font: 300 clamp(29px, 5vw, 42px)/1.05 var(--serif);
    letter-spacing: -.03em;
    text-transform: none;
    white-space: normal;
  }
  .cat-link.is-active .cat-name { transform: translateX(7px); }
  .cat-sub { display: none; }
  .cat-thumb {
    display: block;
    grid-column: 3;
    width: 80px;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
  }
  .cat-thumb[src*="/dressed/"] { object-position: center 20%; }
  .cat-visual { display: none; }
}

/* phone: section removed; shop links live in the menu and product grid */
@media (max-width: 600px) {
  .categories { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-name, .cat-photo { transition: none; }
  .cat-photo, .cat-photo.is-active { transform: none; }
}
.cat-name-sub {
  font-size: .42em;
  font-style: italic;
  letter-spacing: 0;
  margin-left: .3em;
  opacity: .75;
}