/* Purchase module: item shop, cart, checkout, pending redemption -------------------
   1. Intro, header and cart bar   2. Categories   3. Product grid   4. Cart and checkout lines
   5. Summary aside   6. Pending table (cards on phones)
   ------------------------------------------------------------------------- */

/* 1. Intro, header and cart bar ------------------------------------------------- */
.fy-purchase-intro {
	display: flex;
	gap: var(--sp-4);
	align-items: center;
	margin: 0 0 var(--sp-8);
	padding: var(--sp-4) var(--sp-5);
	border: 1px solid rgba(255, 214, 109, .25);
	border-radius: var(--r-lg);
	background: radial-gradient(120% 160% at 0% 0%, rgba(255, 196, 63, .1), transparent 60%), var(--surface-sunken);
	color: var(--text-2);
}
.fy-purchase-intro p { margin: 0; }
.fy-purchase-intro a { font-weight: 800; }
.fy-purchase-intro__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 196, 63, .15); color: var(--gold-300); }

.fy-purchase-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.fy-purchase-head h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); }
.fy-purchase-cartbar {
	display: flex;
	align-items: center;
	gap: var(--sp-3) var(--sp-4);
	padding: .55rem .6rem .55rem .9rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}
.fy-purchase-cartbar__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(140, 87, 248, .18); color: var(--violet-300); }
.fy-purchase-cartbar__text p { margin: 0; color: var(--text-3); font-size: .86rem; line-height: 1.35; }
.fy-purchase-cartbar__text span { color: var(--text); font-weight: 800; }
@media (max-width: 599.98px) {
	.fy-purchase-cartbar { width: 100%; border-radius: var(--r-lg); }
	.fy-purchase-cartbar .fy-btn { margin-left: auto; }
}

/* 2. Categories --------------------------------------------------------------------------- */
.fy-purchase-cats {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 var(--sp-6);
	white-space: normal;
}
.fy-purchase-cats a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 40px;
	padding: 0 .6rem 0 1rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .03);
	color: var(--text-2);
	font: 600 .92rem/1 var(--font-display);
	text-decoration: none;
	transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fy-purchase-cats a:hover { border-color: var(--violet-300); background: rgba(140, 87, 248, .14); color: var(--text); }
.fy-purchase-cats a[aria-current="page"] { border-color: rgba(255, 214, 109, .55); background: rgba(255, 196, 63, .13); color: var(--gold-100); }
.fy-purchase-cats__count {
	display: inline-grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	padding: 0 .45rem;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .08);
	color: var(--text-3);
	font: 800 .74rem/1 var(--font-body);
}
.fy-purchase-cats a[aria-current="page"] .fy-purchase-cats__count { background: rgba(255, 196, 63, .22); color: var(--gold-100); }
/* Categories without items stay reachable but step back, so the stocked ones read first. */
.fy-purchase-cats a[data-empty]:not([aria-current]) { border-style: dashed; border-color: var(--line); background: none; color: var(--text-4); }
.fy-purchase-cats a[data-empty]:not([aria-current]) .fy-purchase-cats__count { background: none; color: var(--text-4); }
/* Wide screens: the empty pills have no fill, so the site background art (freya.css) shows through them and
   --text-4 drops under 4.5:1 over the bright parts of the heroes (4.38:1 at 1440 px); --text-3 still steps back. */
@media (min-width: 1100px) {
	.fy-purchase-cats a[data-empty]:not([aria-current]), .fy-purchase-cats a[data-empty]:not([aria-current]) .fy-purchase-cats__count { color: var(--text-3); }
}
.fy-purchase-catname { margin: 0 0 var(--sp-4); font-size: var(--fs-lg); }
.fy-purchase-incart { margin: 0 0 var(--sp-3); color: var(--text-3); font-size: .9rem; }
.fy-purchase-incart .fy-i { margin-right: .35rem; color: var(--mint-400); vertical-align: -.12em; }
.fy-purchase-incart .cart-item-name { color: var(--text); font-weight: 700; }
.fy-purchase-info { margin: 0 0 var(--sp-4); }
.fy-purchase-info .info-text { display: inline; margin: 0; padding: 0; border: 0; background: none; color: var(--text-3); font-size: .9rem; }

/* 3. Product grid ---------------------------------------------------------------------- */
.fy-purchase-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
	gap: var(--sp-5);
	margin: 0;
}
.fy-purchase-item {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	gap: var(--sp-4) var(--sp-4);
	padding: var(--sp-5);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--grad-card), var(--surface);
	box-shadow: var(--shadow-md), var(--inner-hi);
	transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.fy-purchase-item:hover { transform: translateY(-3px); border-color: var(--line-3); }
.fy-purchase-item__media {
	position: relative;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: radial-gradient(circle at 50% 35%, rgba(167, 126, 255, .22), rgba(255, 255, 255, .03) 70%), var(--surface-sunken);
	color: var(--violet-300);
}
.fy-purchase-item__media img { max-width: 64px; max-height: 64px; object-fit: contain; }
.fy-purchase-item__media.is-icon img { width: 48px; height: 48px; image-rendering: pixelated; }
.fy-purchase-item__media > .fy-i { width: 30px; height: 30px; }
.fy-purchase-item__qty {
	position: absolute;
	right: -8px;
	bottom: -8px;
	padding: .15rem .45rem;
	border: 2px solid var(--surface);
	border-radius: var(--r-pill);
	background: var(--violet-700);
	color: #fff;
	font: 700 .74rem/1.2 var(--font-display);
}
.fy-purchase-item__body { min-width: 0; }
.fy-purchase-item__body h3 { margin: 0 0 .3rem; font-size: 1.12rem; line-height: 1.3; }
.fy-purchase-item__body h3 a { color: var(--text); text-decoration: none; }
.fy-purchase-item__body h3 a:hover { color: var(--gold-300); }
.fy-purchase-item__info { color: var(--text-3); font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; }
.fy-purchase-item__links { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: var(--sp-2) 0 0; font-size: .86rem; }
.fy-purchase-item__links a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 800; text-decoration: none; }
.fy-purchase-item__links .fy-purchase-item__delete { color: var(--rose-300); }
.fy-purchase-item__buy {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--line);
}
.fy-purchase-item__price { margin: 0; color: var(--text-3); font-weight: 700; }
.fy-purchase-item__price .cost { margin-right: .2rem; color: var(--gold-200); font: 600 1.45rem/1 var(--font-display); }

/* 4. Cart and checkout lines ------------------------------------------------------------- */
.fy-purchase-layout { display: grid; gap: var(--sp-8); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) {
	.fy-purchase-layout { grid-template-columns: minmax(0, 1fr) 340px; }
	.fy-purchase-aside { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
}
.fy-purchase-section-title { display: flex; align-items: center; gap: .55rem; margin: 0 0 var(--sp-4); font-size: var(--fs-h3); }
.fy-purchase-section-title .fy-i { color: var(--gold-300); }
.fy-purchase-checkout__intro { max-width: 70ch; margin-bottom: var(--sp-8); }
.fy-purchase-lines { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-5); padding: 0; list-style: none; }
.fy-purchase-line {
	display: grid;
	grid-template-columns: auto 64px minmax(0, 1fr);
	gap: var(--sp-3) var(--sp-4);
	align-items: start;
	margin: 0;
	padding: var(--sp-4) var(--sp-5);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
}
.fy-purchase-line--plain { grid-template-columns: minmax(0, 1fr) auto; }
.fy-purchase-line__check { display: grid; place-items: center; width: 28px; height: 64px; cursor: pointer; }
.fy-purchase-line__check input { width: 1.25rem; height: 1.25rem; margin: 0; }
.fy-purchase-line__media.fy-purchase-item__media { width: 64px; height: 64px; border-radius: 16px; }
.fy-purchase-line__media.is-icon img { width: 40px; height: 40px; }
.fy-purchase-line__body { min-width: 0; }
.fy-purchase-line__body h3 { margin: .15rem 0 .2rem; font-size: 1.08rem; }
.fy-purchase-line__body h3 a { color: var(--text); text-decoration: none; }
.fy-purchase-line__body h3 a:hover { color: var(--gold-300); }
.fy-purchase-line__body .shop-item-qty { margin: 0 0 .2rem; color: var(--text-3); font-size: .9rem; }
.fy-purchase-line__body .qty { color: var(--text); font-weight: 800; }
.fy-purchase-line__info { margin: 0; color: var(--text-3); font-size: .9rem; }
.fy-purchase-line__cost { grid-column: 3; margin: 0; color: var(--text-3); font-weight: 700; }
.fy-purchase-line--plain .fy-purchase-line__cost { grid-column: auto; align-self: center; text-align: right; }
.fy-purchase-line__cost .cost { margin-right: .2rem; color: var(--gold-200); font: 600 1.3rem/1 var(--font-display); }
@media (max-width: 639.98px) {
	/* Phones: a smaller picture and a wider text column; the line's links become one footer row
	   under the price instead of three stacked lines in a narrow column. */
	.fy-purchase-line:not(.fy-purchase-line--plain) { grid-template-columns: auto 48px minmax(0, 1fr); column-gap: var(--sp-3); row-gap: .1rem; padding: var(--sp-4); }
	/* The checkbox and picture span the text rows, so the name, quantity and info stay together. */
	.fy-purchase-line:not(.fy-purchase-line--plain) .fy-purchase-line__check { grid-row: span 3; height: 48px; }
	.fy-purchase-line:not(.fy-purchase-line--plain) .fy-purchase-line__media.fy-purchase-item__media { grid-row: span 3; width: 48px; height: 48px; border-radius: 13px; }
	.fy-purchase-line:not(.fy-purchase-line--plain) .fy-purchase-line__media.is-icon img { width: 32px; height: 32px; }
	.fy-purchase-line:not(.fy-purchase-line--plain) .fy-purchase-line__body { display: contents; }
	.fy-purchase-line:not(.fy-purchase-line--plain) .fy-purchase-line__body > * { grid-column: 3; }
	.fy-purchase-line:not(.fy-purchase-line--plain) .fy-purchase-line__cost { grid-column: 3; margin-top: .3rem; }
	.fy-purchase-line:not(.fy-purchase-line--plain) .fy-purchase-line__body > .fy-purchase-item__links {
		order: 1;
		grid-column: 1 / -1;
		gap: .35rem 1.1rem;
		margin: .7rem 0 0;
		padding-top: .7rem;
		border-top: 1px solid var(--line);
	}
}
@media (min-width: 640px) {
	.fy-purchase-line { grid-template-columns: auto 64px minmax(0, 1fr) auto; }
	.fy-purchase-line--plain { grid-template-columns: minmax(0, 1fr) auto; }
	.fy-purchase-line__cost { grid-column: auto; align-self: center; text-align: right; white-space: nowrap; }
}
.remove-from-cart { margin: 0; }

/* 5. Summary aside ------------------------------------------------------------------------- */
.fy-purchase-summary { display: grid; gap: var(--sp-4); --card-pad: var(--sp-6); }
.fy-purchase-summary__title { margin: 0; font-size: 1.3rem; }
.fy-purchase-summary__rows { display: grid; margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunken); }
.fy-purchase-summary__rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: .75rem 1rem; }
.fy-purchase-summary__rows > div + div { border-top: 1px solid var(--line); }
.fy-purchase-summary__rows dt { color: var(--text-3); font-size: .9rem; }
.fy-purchase-summary__rows dd { margin: 0; color: var(--text-2); font-weight: 700; text-align: right; white-space: nowrap; }
.fy-purchase-summary__rows dd span { color: var(--text); font: 600 1.15rem/1 var(--font-display); }
.fy-purchase-summary__total dd span { color: var(--gold-200); font-size: 1.45rem; }
.fy-purchase-summary__text { margin: 0; color: var(--text-3); font-size: .9rem; }
.fy-purchase-summary .fy-alert { margin: 0; font-size: .9rem; }
.fy-purchase-summary .checkout-text, .fy-purchase-summary form { margin: 0; }
.fy-purchase-summary__back { justify-self: center; font-size: .92rem; }

/* 6. Pending redemption: table on wide screens, cards on phones ------------------------------ */
@media (max-width: 719.98px) {
	.fy-purchase-pending .fy-table-wrap { overflow: visible; border: 0; background: none; box-shadow: none; }
	.fy-purchase-pending__table, .fy-purchase-pending__table tbody, .fy-purchase-pending__table tr, .fy-purchase-pending__table td { display: block; width: 100%; }
	.fy-purchase-pending__table { border: 0; background: none; box-shadow: none; }
	.fy-purchase-pending__table thead { display: none; }
	.fy-purchase-pending__table tr { margin: 0 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
	.fy-purchase-pending__table td { display: flex; justify-content: space-between; gap: var(--sp-3); padding: .55rem 1rem; border-bottom: 1px solid var(--line); text-align: right; }
	.fy-purchase-pending__table td:last-child { border-bottom: 0; }
	.fy-purchase-pending__table td::before { content: attr(data-label); color: var(--text-3); font: 800 .7rem/1.6 var(--font-body); letter-spacing: .1em; text-transform: uppercase; text-align: left; }
	.fy-purchase-pending__table td:first-child { padding-top: .85rem; font-weight: 800; }
}

/* Phones: categories become one scrollable row; the intro icon sits at the top. */
@media (max-width: 599.98px) {
	.fy-purchase-intro { align-items: flex-start; }
	.fy-purchase-cats {
		flex-wrap: nowrap;
		margin-inline: calc(var(--gutter) * -1);
		padding: 0 var(--gutter) .25rem;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 2.5rem), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 2.5rem), transparent 100%);
	}
	.fy-purchase-cats::-webkit-scrollbar { display: none; }
	.fy-purchase-cats a { flex: none; }
}