/* Featured / tag-us UGC + review photo accents. Uses Satin Eve wine/ivory tokens;
   self-contained so contested edits to site.css do not block this surface. */

.ugc-gallery,
.ugc-page {
  --ugc-wine: var(--wine, #6B1B32);
  --ugc-ivory: var(--ivory, #FBF7F2);
  --ugc-ink: var(--ink, #17131A);
  --ugc-line: rgba(23, 19, 26, 0.12);
}

.ugc-page { padding-block: 28px 64px; }
.ugc-page-hero { max-width: 36rem; margin-bottom: 28px; }
.ugc-kicker {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ugc-wine);
}
.ugc-page-hero h1 {
  margin: 0 0 12px;
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 5vw, 2.4rem);
  letter-spacing: -0.02em;
  color: var(--ugc-ink);
}
.ugc-lede { margin: 0; color: var(--muted, #5c5560); font-size: 0.98rem; line-height: 1.5; }
.ugc-lede a { color: var(--ugc-wine); }

/* PDP tag-us rail: heading, handle, then portrait 4:5 photos on a snap rail (about 70% wide on a phone so the
   next one peeks). No rules, no credits, no "updated" text. */
.ugc-head { margin: 0 0 20px; text-align: center; }
.ugc-title {
  margin: 0 0 6px;
  font-family: var(--head, "Fraunces", Georgia, serif);
  font-weight: 480;
  font-size: clamp(1.25rem, 4.2vw, 1.8rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.15;
}
.ugc-handle { color: var(--muted, #5c5560); font-size: 0.92rem; text-decoration: none; letter-spacing: 0.02em; }
.ugc-handle:hover { color: var(--ugc-ink); }
.ugc-rail {
  list-style: none;
  margin: 0 calc(-1 * var(--gutter, 16px));
  padding: 0 var(--gutter, 16px);
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter, 16px);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ugc-rail::-webkit-scrollbar { display: none; }
.ugc-rail .ugc-tile { flex: 0 0 70%; min-width: 0; scroll-snap-align: start; background: var(--panel, #F3EDE5); }
@media (min-width: 720px) { .ugc-rail .ugc-tile { flex-basis: 40%; } }
@media (min-width: 1100px) { .ugc-rail .ugc-tile { flex-basis: calc((100% - 30px) / 4); } }
.ugc-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ugc-gallery .ugc-cta { margin: 20px 0 0; text-align: center; }
.ugc-grid {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 720px) {
  .ugc-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (min-width: 1100px) {
  .ugc-grid { grid-template-columns: repeat(4, 1fr); }
}

.ugc-tile {
  position: relative;
  background: linear-gradient(160deg, var(--ugc-ivory), #f3ebe3);
}
.ugc-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.ugc-credit {
  margin: 0;
  padding: 8px 8px 10px;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--ugc-ink);
}
.ugc-empty { margin: 0 0 28px; }

.ugc-submit {
  margin-top: 40px;
  padding: 22px 18px;
  border: 1px solid var(--ugc-line);
  background:
    linear-gradient(180deg, rgba(107, 27, 50, 0.04), transparent 48%),
    var(--ugc-ivory);
  max-width: 420px;
}
.ugc-submit h2 {
  margin: 0 0 14px;
  font-size: 1.1rem;
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-weight: 500;
}
.ugc-form { display: grid; gap: 12px; }
.ugc-form label { display: grid; gap: 4px; font-size: 0.88rem; }
.ugc-form input,
.ugc-form textarea,
.ugc-form select {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--ugc-line);
  background: #fff;
  font: inherit;
}
.ugc-form textarea { min-height: 88px; resize: vertical; }
.ugc-flash {
  padding: 10px 12px;
  margin: 0 0 12px;
  border: 1px solid var(--ugc-line);
  background: #fff;
}
.ugc-flash--bad { border-color: var(--ugc-wine); color: var(--ugc-wine); }

/* Review write form photo field (on PDP) */
.pdp-write-photos { display: grid; gap: 6px; }
.pdp-write-photos input[type="file"] { min-height: 44px; font-size: 0.85rem; }
.pdp-review-photos img {
  border: 1px solid var(--ugc-line, rgba(23, 19, 26, 0.12));
}


/* Width from data-pct (set in product.js) — no inline style (CSP style-src self). */
.pdp-bar-fill { width: 0; }
.ugc-rail .ugc-tile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.ugc-caption { display: block; padding: 8px 2px 0; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--muted, #5c5560); }