/* Product cards and grids (js/product-card.js), store controls (js/store.js) and the store page's hero and buying steps.
   Used by shop.html, the home page and a project's home. The store browser and sections are css/store.css. */

/* ---------- cards / grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 4px -3px 0 color-mix(in srgb, var(--accent-2) 28%, transparent);
  transition: border-color .15s, box-shadow .2s var(--snap), transform .2s var(--snap);
}
.alt .card { background: var(--bg); }
.card:hover, .card:focus-within { border-color: var(--accent-2); box-shadow: 0 0 18px color-mix(in srgb, var(--accent-2) 35%, transparent); transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover, .card:focus-within { transform: none; }
  .card:hover .cover::after { transform: none; }
}

/* Generated cover (products without artwork): a track-colour tile with stacked clips, in AutoStacc's look. A project
   skin restyles it inside its pages (css/projects/<id>/skin.css). */
.cover {
  aspect-ratio: 1 / 1;
  position: relative;
  display: grid;
  place-items: end start;
  overflow: hidden;
  padding: 20px;
  font-family: var(--display);
  font-weight: 750;
  letter-spacing: -.02em;
  font-size: 1.7rem;
  line-height: 1.1;
  color: #fff;
  /* deep tones of the track colour, so the white title reads on every colour in both themes (4.5:1 or more) */
  background: linear-gradient(160deg, color-mix(in srgb, var(--track, var(--teal)) 55%, #000) 0%, color-mix(in srgb, var(--track, var(--teal)) 32%, #000) 100%);
  border-bottom: 1px solid var(--line);
}
/* three stacked clips in the corner, the AutoStacc mark's shape */
.cover::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38%;
  height: 30%;
  background:
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)) 0 0 / 70% 22% no-repeat,
    linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35)) 100% 50% / 80% 22% no-repeat,
    linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)) 0 100% / 55% 22% no-repeat;
  border-radius: 4px;
  transition: transform .3s var(--snap);
}
.card:hover .cover::after { transform: translateX(-6px); }
.cover span { text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.cover span { position: relative; z-index: 1; }

.card-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body :is(h2, h3) { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.4; letter-spacing: 0; }
.card-body :is(h2, h3) a { display: inline-block; padding-block: 2px; color: inherit; text-shadow: inherit; }
.card-body :is(h2, h3) a:hover { color: var(--accent-2); text-shadow: var(--glow-2); }
.card-body p { margin: 0; color: var(--muted); font-size: .95rem; flex: 1; }
.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  gap: 10px;
}


/* ---------- phones: slimmer offset layer ---------- */
@media (max-width: 600px) {
  .card { box-shadow: 3px -2px 0 color-mix(in srgb, var(--accent-2) 28%, transparent); }
  .card-foot .btn { padding: 10px 14px; font-size: .85rem; }
}

/* ---------- store controls (js/store.js): buy slot, the "stitched" snap after adding (STACC'D badge: core.css) ---------- */
.buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.detail-buy.buy { justify-content: flex-start; }
a.owned-badge:hover { color: var(--bg); background: var(--accent); text-shadow: none; }
.btn.in-cart { border-color: var(--accent-2); color: var(--accent-2); text-shadow: var(--glow-2); }
.stitched { animation: stitch-in .32s var(--snap); }
@keyframes stitch-in {
  0% { transform: translateX(-6px) skewX(-12deg); opacity: .4; }
  40% { transform: translateX(4px) skewX(8deg); opacity: 1; }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .stitched { animation: none; } }

/* ---------- card parts: maker, why it's shown, description, labels, badges, wishlist, "not interested" ---------- */
.card { position: relative; }
.card-body .card-by { color: var(--muted); font-size: .85rem; flex: none; }
.card-body .card-why { flex: none; font-size: .85rem; color: var(--accent-2); }
.card-body .card-why::before { content: "★ "; }
.card-body .card-desc { flex: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.card-body .card-foot { margin-top: auto; padding-top: 10px; }
.card-labels { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; }
.card-labels li { padding: 2px 8px; font-size: .75rem; line-height: 1.5; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.card-labels :is(.label-format, .label-plugin, .label-daw) { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.card-labels :is(.label-size, .label-bpm) { font-family: var(--mono); }
.card-labels li[hidden] { display: none; }
a.cover { text-decoration: none; }
a.cover:hover { color: #fff; }
.cover.has-art { padding: 0; place-items: stretch; }
.cover.has-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover.has-art::after { display: none; }
/* what the data supports, on the cover: New, a sale's percent off, recent confirmed sales */
.card-badges { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.card-badges em { font-style: normal; font-family: var(--font); font-size: .72rem; font-weight: 700; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px;
  color: var(--on-accent); background: var(--accent); text-shadow: none; }
/* already yours: a stamp across the cover, so owned and not-owned read apart without colour */
.card.is-owned .cover::before {
  content: "Stacc'd";
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  padding: 3px 10px;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
}
/* the wishlist heart: top right of the cover; filled when saved (aria-pressed says it to everyone) */
.card-wish { position: absolute; top: 10px; right: 10px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 88%, transparent); cursor: pointer; display: grid; place-items: center; transition: transform .15s var(--snap); }
.card:has(> .card-wish) > .card-tags { top: 16px; right: 62px; } /* the corner tags (js/card.js) sit beside the heart */
.card-wish::before { content: "♡"; font-size: 1.3rem; line-height: 1; color: var(--text); }
.card-wish[aria-pressed="true"]::before { content: "♥"; color: var(--coral); }
.card-wish:hover { transform: scale(1.08); }
.card-wish:disabled { opacity: .6; }
.card-dismiss { align-self: flex-start; min-height: 36px; padding: 4px 0; background: none; border: 0; font: inherit; font-size: .8rem; color: var(--muted); text-decoration: underline; cursor: pointer; }
.card-dismiss:hover { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .card-wish { transition: none; } .card-wish:hover { transform: none; } }

/* ---------- a large card ---------- */
.card.selected { flex-direction: row; border-color: var(--accent-2); }
.card.selected .cover { width: min(42%, 380px); flex: none; border-bottom: 0; border-right: 1px solid var(--line); }
.card.selected .card-body { padding: 24px; }
.card.selected .card-body :is(h2, h3) { font-size: 1.35rem; }
.card.selected .card-body .card-desc { -webkit-line-clamp: unset; display: block; font-size: 1rem; }
@media (max-width: 640px) {
  .card.selected { flex-direction: column; }
  .card.selected .cover { width: auto; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- the store page (shop.html): hero and how buying works ---------- */
.shop-kicker { margin: 0 0 6px; color: var(--accent-2); font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.shop-section { padding-top: 8px; }

/* ---------- store-style sizes (productCard's mixed option): banner and capsule ---------- */
/* every card's artwork ends at a faint ring in the text colour, so dark art on a dark page (or light on light) still
   shows where the product stops */
.card { outline: 1px solid color-mix(in srgb, var(--text) 14%, transparent); outline-offset: -1px; }
.grid:has(.feature) { grid-auto-flow: row dense; }

/* banner: a featured product, two columns wide, its artwork beside its description, labels and preview button */
.card.feature { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.card.feature .cover { aspect-ratio: auto; min-height: 260px; border-bottom: 0; border-right: 1px solid var(--line); }
.card.feature .card-body { padding: 22px; }
.card.feature :is(h2, h3) { font-size: 1.25rem; }
.card.feature .card-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.card.feature .card-foot { flex-wrap: wrap; }
.card-listen[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.card-listen::before { content: "▶"; margin-right: .45em; font-size: .8em; }
.card-listen[aria-pressed="true"]::before { content: "■"; }
@media (max-width: 600px) {
  .card.feature { grid-column: auto; grid-template-columns: 1fr; }
  .card.feature .cover { aspect-ratio: 1 / 1; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* capsule: the artwork with its name and price always on a strip at its foot; hovering (or keyboard focus) slides out
   the short description and the buy button. Phones can't hover, so there the buy button always shows. Screen readers
   always get all of it. */
.card.capsule .cover { flex: 1 0 auto; border-bottom: 0; }
.card.capsule .card-badges { top: 12px; bottom: auto; }
/* a generated cover's own title moves to the top, clear of the name strip */
.card.capsule .cover:not(.has-art) > span { align-self: start; }
.card.capsule .card-body { position: absolute; inset: auto 0 0; z-index: 2; gap: 6px; padding: 12px 14px;
  background: linear-gradient(to top, color-mix(in srgb, var(--panel) 96%, transparent) 75%, color-mix(in srgb, var(--panel) 0%, transparent)); }
.card.capsule .card-body :is(.tag, .card-by, .card-labels, .card-why) { display: none; }
.card.capsule .card-desc { flex: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: .88rem; }
.card.capsule .card-foot { margin-top: 0; }
@media (hover: hover) {
  .card.capsule :is(.card-desc, .buy) { max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .3s var(--snap), opacity .2s var(--snap); }
  .card.capsule:is(:hover, :focus-within) .card-desc { max-height: 5em; opacity: 1; }
  .card.capsule:is(:hover, :focus-within) .buy { max-height: 4em; opacity: 1; }
}
@media (hover: none) {
  .card.capsule .card-desc { display: none; }
}
@media (prefers-reduced-motion: reduce) { .card.capsule :is(.card-desc, .buy) { transition: none; } }

/* The one line on buying under the store (the steps live in /guide/buying). */
.shop-how-line { padding-block: 0 32px; }