/* Shared product tile — same visual as shop.html's grid.
   Consumed by cart.html "don't forget" upsell + PDP "related
   compounds" section. Corner "+" on mobile, ADD pill on desktop;
   both wired to the delegated handler in av-products.js. */

.av-tile-grid { display:grid; grid-template-columns:repeat(4, 1fr); column-gap:18px; row-gap:48px; }
@media (max-width:900px) { .av-tile-grid { grid-template-columns:repeat(3, 1fr); } }
@media (max-width:720px) { .av-tile-grid { grid-template-columns:repeat(2, 1fr); column-gap:14px; row-gap:32px; } }

.rs-prod {
  background:transparent; padding:0; display:flex; flex-direction:column;
  transition:transform 200ms ease;
  position:relative; text-decoration:none; color:inherit;
}
.rs-prod:hover { transform:translateY(-3px); }
.rs-prod:hover .rs-prod-img { box-shadow:0 18px 44px -22px rgba(20,22,28,0.18); }

.rs-prod-img {
  display:block; margin-bottom:14px; line-height:0;
  aspect-ratio:9/10; overflow:hidden;
  border-radius:28px;
  transition:box-shadow 200ms ease;
  position:relative;
}
.rs-prod-img img {
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center 52%;
}

/* Liquid-glass corner "+" — mirrors the nav pill recipe. Hidden on
   desktop; revealed at ≤720px. */
.rs-prod-add-corner {
  display:none;
  position:absolute; top:10px; right:10px;
  width:34px; height:34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06)),
    #4A4E58;
  color:#fff;
  border:1px solid rgba(255,255,255,0.22); border-radius:50%;
  align-items:center; justify-content:center;
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.35),
             inset 0 -1px 1px rgba(0,0,0,0.15),
             0 8px 32px rgba(0,0,0,0.24);
  cursor:pointer; z-index:2;
  transition:transform 150ms ease, filter 200ms ease;
}
.rs-prod-add-corner svg { width:16px; height:16px; }
.rs-prod-add-corner:active { transform:scale(0.92); }
.rs-prod-add-corner.added {
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.08)), #1D9E75;
}

/* Mobile-only price kicker — small serif line ABOVE the name so scan
   order reads price → name → tagline. Hidden on desktop. */
.rs-prod-price-kicker {
  display:none;
  font-family:'Playfair Display', Georgia, serif;
  font-weight:500; font-size:19px;
  color:#14161C;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.01em;
  margin:0 0 4px;
}

.rs-prod-name { font-family:'Playfair Display', Georgia, serif; font-weight:500; font-size:18px; line-height:1.2; color:#14161C; margin:0 0 4px; letter-spacing:-0.005em; }
.rs-prod-desc { font-size:11.5px; line-height:1.45; color:rgba(20,22,28,0.6); margin:0 0 14px; flex:1; }

.rs-prod-foot { display:flex; flex-direction:row; align-items:center; gap:12px; }
.rs-prod-price { font-family:'Playfair Display', Georgia, serif; font-weight:500; font-size:20px; color:#14161C; flex-shrink:0; }
.rs-prod-add {
  font-family:'DM Sans', system-ui, sans-serif;
  font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  background:#14161C; color:#F9F9F6; border:0; padding:13px 16px; border-radius:40px; cursor:pointer;
  transition:background 200ms ease, color 200ms ease;
  flex:1;
}
.rs-prod-add:hover { background:#0D0D0F; color:#F9F9F6; }
.rs-prod-add.added { background:#0D0D0F; color:#F9F9F6; }

@media (max-width:720px) {
  .rs-prod-name { margin-bottom:2px; font-size:16px; }
  .rs-prod-desc { font-size:11px; margin-bottom:8px; flex:0 0 auto; }
  .rs-prod-price { font-size:16px; }
  /* Kill the ADD pill row on mobile — corner "+" is the sole action. */
  .rs-prod-add { display:none; }
  .rs-prod-foot { display:none; }
  .rs-prod-add-corner { display:inline-flex; }
  .rs-prod-price-kicker { display:block; }
}

/* PDP "Related compounds" section wrapper (header + eyebrow + link).
   The tile grid inside uses .av-tile-grid + .rs-prod-* above. */
.pep-related { padding:64px 24px 80px; background:#fff; border-top:1px solid rgba(20,22,28,0.08); }
.pep-related-inner { max-width:1020px; margin:0 auto; }
.pep-related-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:32px; gap:24px; }
.pep-related-eyebrow { font-size:11px; letter-spacing:0.32em; text-transform:uppercase; font-weight:700; color:#8A8F99; margin:0 0 8px; }
.pep-related-h2 { font-family:'Playfair Display', Georgia, serif; font-size:30px; line-height:1.1; color:#14161C; margin:0; font-weight:400; }
.pep-related-link { font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:#14161C; text-decoration:none; border-bottom:1px solid rgba(20,22,28,0.30); padding-bottom:4px; white-space:nowrap; transition:color 180ms ease, border-color 180ms ease; }
.pep-related-link:hover { color:#0D0D0F; border-bottom-color:#0D0D0F; }
@media (max-width:900px) {
  .pep-related { padding:48px 20px 56px; }
  .pep-related-header { flex-direction:column; align-items:flex-start; margin-bottom:24px; }
  .pep-related-h2 { font-size:24px; }
}