/* Photo hero. Doubled selector on purpose: the generator injects this file
   BEFORE styles.css, so a single .guide-hero-merch ties with .guide-hero on
   specificity and loses on source order. */
.guide-hero.guide-hero-merch {
  /* Its own veil rather than --photo-veil-soft. This photograph is far
     brighter through the middle than the other heroes (pale sky over pale
     sand), and measured against the shared soft veil the lede came out at
     3.39:1 where 4.5 is needed. These stops were raised until every text
     element cleared its threshold with margin. */
  background:
    linear-gradient(178deg,
      rgba(10, 51, 70, .88) 0%,
      rgba(10, 51, 70, .74) 50%,
      rgba(10, 51, 70, .86) 100%),
    url(../images/hero-silver-lake-merch-v1.webp) 70% 5%/cover no-repeat,
    var(--lake);
}

/* Merch.

   Page-scoped, like sable.css. Note the same trap: the generator injects a
   page's `head` field BEFORE styles.css, so anything here that collides with
   a shared rule needs a doubled selector to win on specificity. Nothing in
   this file collides today, and `merch-` is a free prefix in this repo. */

.merch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 22px 0 8px;
}

.merch-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 18px 16px;
  background: var(--white);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Product shot sits flush to the card edges, above the copy. The mockups are
   square and come on their own backgrounds, so no cropping and no frame. */
.merch-item img {
  display: block;
  width: calc(100% + 36px);
  margin: -18px -18px 12px;
  max-width: none;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--sand);
}

.merch-item strong {
  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--lake-deep);
}

.merch-item span {
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(22, 48, 61, .78);
}

/* Pushed to the bottom so the cue sits on one line across a ragged row. */
.merch-item em {
  margin-top: auto;
  padding-top: 8px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* Deep lake blue, not the orange accent. At 11px this is normal-size text
     and needs 4.5:1; no orange in the palette clears it on a white card
     (--sunset-hot measures 4.10, --sunset 3.12). The orange still carries the
     accent role on the hover border and the focus ring. */
  color: var(--lake);
}

.merch-item:hover,
.merch-item:focus-visible {
  transform: translateY(-2px);
  border-color: var(--dune-dark);
  box-shadow: var(--shadow);
}

.merch-item:focus-visible { outline: 3px solid var(--sunset-hot); outline-offset: 2px; }

.merch-all {
  display: inline-block;
  margin-top: 4px;
  font-weight: 700;
  letter-spacing: .04em;
}

.merch-note { font-size: 13.5px; color: rgba(22, 48, 61, .78); }

@media (max-width: 560px) {
  .merch-grid { grid-template-columns: 1fr; }
}