/* Merch shop: catalogue, product page, orders (OpenSpec add-referrals-coins-merch).
   DEPO Album tokens of site.css: dark surfaces, Poppins headings, the yellow accent for prices. */

.shop-hero { max-width: 760px; margin: 8px 0 36px; }
.shop-hero__title { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.05; letter-spacing: -0.02em; }
.shop-hero__lead { margin-top: 14px; font-size: 17px; max-width: 58ch; }
.shop-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.shop-hero__actions:empty { display: none; }
.shop-pass { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 14px; border-radius: var(--radius); background: rgb(70 154 88 / 0.14); color: #b7e8c2; font-size: 14px; }
.shop-pass a { color: var(--yellow); font-weight: 700; }

/* Grid */
.shop-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(16px, 2vw, 28px); }
.shop-card__link { display: flex; flex-direction: column; gap: 14px; }
.shop-card__media {
    position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg);
    background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 1px solid var(--line);
}
.shop-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.shop-card__link:hover .shop-card__media img { transform: scale(1.04); }
.shop-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gray); }
.shop-card__placeholder .icon { width: 56px; height: 56px; stroke-width: 1.2; }
.shop-card__badges { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.shop-card__body { display: flex; flex-direction: column; gap: 6px; padding: 0 2px; }
.shop-card__title { font: 600 17px/1.3 var(--font-head); }
.shop-card__link:hover .shop-card__title { color: var(--yellow); }
.shop-card.is-sold-out .shop-card__media img { filter: grayscale(1); opacity: 0.6; }

.shop-kind {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
    background: rgb(24 23 26 / 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: var(--text); font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.shop-kind .icon { width: 13px; height: 13px; }
.shop-kind--digital, .shop-kind--pass { color: #b7e8c2; }
.shop-kind--membership { color: var(--yellow); }
.shop-kind--owned { background: rgb(70 154 88 / 0.85); color: #fff; }
.shop-kind--sold-out { background: rgb(239 68 68 / 0.85); color: #fff; }

.shop-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-variant-numeric: tabular-nums; }
.shop-price__coins { display: inline-flex; align-items: center; gap: 6px; color: var(--yellow); font-weight: 700; }
.shop-price__coins .icon { width: 16px; height: 16px; }
.shop-price__money { color: var(--muted); }

/* Product */
.shop-product { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.shop-gallery { position: sticky; top: calc(var(--header-h) + 16px); display: flex; flex-direction: column; gap: 12px; }
.shop-gallery__main { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); }
.shop-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.shop-gallery__thumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.shop-gallery__thumb { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: none; cursor: pointer; opacity: 0.6; transition: opacity var(--trans), border-color var(--trans); }
.shop-gallery__thumb img { width: 64px; height: 64px; object-fit: cover; }
.shop-gallery__thumb:hover, .shop-gallery__thumb.is-active { opacity: 1; }
.shop-gallery__thumb.is-active { border-color: var(--yellow); }

.shop-info { display: flex; flex-direction: column; gap: 16px; }
.shop-info__badges { position: static; }
.shop-info__badges .shop-kind { background: var(--surface-3); }
.shop-info__badges .shop-kind--owned { background: rgb(70 154 88 / 0.85); }
.shop-info__badges .shop-kind--sold-out { background: rgb(239 68 68 / 0.85); }
.shop-info__title { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.01em; }
.shop-info__price .shop-price { font-size: 20px; }
.shop-info__text { color: #d4d4d8; white-space: pre-line; overflow-wrap: anywhere; max-width: 60ch; }
.shop-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--muted); font-size: 14px; }
.shop-facts:empty { display: none; }
.shop-facts li { display: flex; align-items: center; gap: 8px; }
.shop-facts .icon { width: 16px; height: 16px; color: var(--yellow); }

.shop-order { padding: 22px; display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.shop-order__title { font-size: 18px; }
.shop-form { display: flex; flex-direction: column; gap: 16px; }
.shop-form__qty .input { max-width: 120px; }
.shop-form__shipping { display: flex; flex-direction: column; gap: 12px; }
.shop-form__shipping .form__row { gap: 12px; }
.shop-pay { display: flex; flex-direction: column; gap: 8px; }
.shop-pay .segmented__item > span { grid-template-columns: auto 1fr; }
.shop-pay .segmented__item strong { font-size: 15px; }
.shop-pay .segmented__item input:focus-visible + span { box-shadow: 0 0 0 3px rgb(255 181 0 / 0.25); }
.shop-form__providers .pay-method { margin: 0; }

/* Orders */
.shop-orders { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.shop-order-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px; }
.shop-order-row__media { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--surface-3); color: var(--gray); }
.shop-order-row__media img { width: 72px; height: 72px; object-fit: cover; }
.shop-order-row__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.shop-order-row__title { font: 600 16px/1.3 var(--font-head); overflow-wrap: anywhere; }
.shop-order-row__title a:hover { color: var(--yellow); }
.shop-order-row__meta { font-size: 14px; font-variant-numeric: tabular-nums; }
.shop-order-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.shop-status { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-3); color: var(--muted); white-space: nowrap; }
.shop-status--paid, .shop-status--shipped { background: rgb(255 181 0 / 0.14); color: var(--yellow); }
.shop-status--completed { background: rgb(70 154 88 / 0.18); color: #7bd38f; }
.shop-status--cancelled, .shop-status--refunded { background: rgb(239 68 68 / 0.12); color: #fca5a5; }

.shop-pass-box { padding: 20px; display: flex; flex-direction: column; gap: 12px; margin: 8px 0 20px; }
.shop-pass-box__title { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.shop-pass-box__title .icon { color: #7bd38f; }
.shop-downloads { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.shop-downloads li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }

.shop-state { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(28px, 5vw, 56px); text-align: center; }
.shop-state__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface-3); color: var(--muted); }
.shop-state__icon .icon { width: 30px; height: 30px; }

@media (max-width: 900px) {
    .shop-product { grid-template-columns: 1fr; }
    .shop-gallery { position: static; }
}
@media (max-width: 560px) {
    .shop-order-row { grid-template-columns: 56px minmax(0, 1fr); }
    .shop-order-row__media, .shop-order-row__media img { width: 56px; height: 56px; }
    .shop-order-row__side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
    .shop-card__media img { transition: none; }
    .shop-card__link:hover .shop-card__media img { transform: none; }
}