/* ==========================================================================
   Shop — product samples and purchase links.
   Loaded only on /shop/, which is the only page carrying large images.
   ========================================================================== */

.product { padding-block: 8px 34px; }

.product-head {
  display: flex; align-items: baseline; gap: 18px;
  flex-wrap: wrap; margin-top: 22px;
}
.product-head h2 {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 700;
  color: var(--gold); letter-spacing: 0.02em; margin: 0;
}

.specs {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  list-style: none; margin: 0; padding: 0;
}
.specs li {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim);
}
.specs li + li::before { content: '·'; margin-right: 14px; color: var(--rule); }

.product-blurb {
  /* Body serif, not the brand monospace. Courier is the voice of the tiles
     and the labels; a paragraph of it is hard work, which is the same reason
     the grape descriptions do not use it either. */
  font-family: var(--body);
  max-width: var(--measure); margin-top: 12px;
  color: var(--text-mid); font-size: 1rem; line-height: 1.7;
}

/* Samples ---------------------------------------------------------------- */
.samples {
  display: flex; flex-wrap: wrap; gap: 20px;
  margin-top: 22px;
}
.sample {
  margin: 0; flex: 1 1 300px; max-width: 460px; min-width: 0;
}
.sample img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule); border-radius: 3px;
  background: var(--paper);
}
.sample figcaption {
  margin-top: 8px; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
}

/* Buying ----------------------------------------------------------------- */
.shop-buy { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.buy-link {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 20px; min-width: 132px;
  border: 1px solid var(--gold-dim); border-radius: 3px;
  background: rgba(200, 168, 75, 0.06);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.buy-link:hover, .buy-link:focus-visible {
  background: rgba(200, 168, 75, 0.14); border-color: var(--gold);
}
.buy-label {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold);
}
.buy-note {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.08em;
  color: var(--text-dim);
}

.buy-none {
  margin-top: 20px; font-size: 0.74rem; color: var(--text-mid);
  max-width: var(--measure);
}

.shop-foot {
  margin-top: 18px; font-size: 0.72rem; color: var(--text-mid);
  max-width: var(--measure); line-height: 1.7;
}

@media (max-width: 860px) {
  .specs li          { font-size: 0.74rem; }
  .sample figcaption { font-size: 0.74rem; }
  .product-head h2   { font-size: 1.35rem; }
  .product-blurb     { font-size: 1.02rem; }
  .buy-none, .shop-foot { font-size: 0.86rem; }
  .buy-label { font-size: 0.8rem; }
  .buy-note  { font-size: 0.68rem; }
}

@media (max-width: 640px) {
  .sample { flex: 1 1 100%; max-width: none; }
  .buy-link { flex: 1 1 100%; }
}