/* Dead Man Drive Radio: merch store (products from Fourthwall) and the bag.
   Colors come from the same custom properties as the player, so a theme that sets
   --dmd-* restyles both. --dmd-display sets the heading font. */

.dmd-store, .dmd-bag, .dmd-toast, .dmd-bag-fab { font-family: var(--dmd-font, inherit); box-sizing: border-box; }
.dmd-store *, .dmd-bag *, .dmd-toast * { box-sizing: border-box; }
.dmd-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------ buttons */
.dmd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--dmd-accent, #ff2d3d); color: #fff; text-decoration: none;
	font: 700 .9rem/1.1 var(--dmd-font, inherit); letter-spacing: .05em; text-transform: uppercase;
	transition: background-color .15s, transform .15s;
}
.dmd-btn:hover { background: #ff4a58; color: #fff; }
.dmd-btn:active { transform: scale(.98); }
.dmd-btn:focus-visible { outline: 3px solid var(--dmd-accent-2, #ffb21a); outline-offset: 3px; }
.dmd-btn[disabled] { background: var(--dmd-line, #262c35); color: var(--dmd-muted, #9aa3ae); cursor: not-allowed; transform: none; }
.dmd-btn-ghost { background: transparent; color: var(--dmd-fg, #f2f4f7); box-shadow: inset 0 0 0 2px var(--dmd-accent, #ff2d3d); }
.dmd-btn-ghost:hover { background: var(--dmd-accent, #ff2d3d); }

/* ------------------------------------------------------------ product grid */
.dmd-store { --dmd-gap: 18px; }
.dmd-products {
	display: grid; gap: var(--dmd-gap);
	/* at most --dmd-cols across, fewer as the screen narrows, two on most phones */
	grid-template-columns: repeat(auto-fill, minmax(max(150px, calc((100% - (var(--dmd-cols, 4) - 1) * var(--dmd-gap)) / var(--dmd-cols, 4))), 1fr));
}
@media (max-width: 560px) { .dmd-store { --dmd-gap: 12px; } }

.dmd-product {
	display: flex; flex-direction: column; min-width: 0;
	background: var(--dmd-panel, #161a20); color: var(--dmd-fg, #f2f4f7);
	border: 1px solid var(--dmd-line, #262c35); border-radius: var(--dmd-radius, 14px); overflow: hidden;
	transition: border-color .2s, transform .2s;
}
.dmd-product:hover { border-color: color-mix(in srgb, var(--dmd-accent, #ff2d3d) 55%, var(--dmd-line, #262c35)); }
.dmd-product-media { position: relative; aspect-ratio: 1 / 1; background: #1d2229; overflow: hidden; }
.dmd-product-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.dmd-product:hover .dmd-product-media img { transform: scale(1.03); }
.dmd-product-flag {
	position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px;
	background: rgba(0, 0, 0, .75); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.dmd-product.is-sold-out .dmd-product-media img { filter: grayscale(.85) brightness(.7); }
.dmd-product-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 12px 14px 14px; }
.dmd-product-name {
	margin: 0; color: var(--dmd-fg, #f2f4f7); font-family: var(--dmd-display, inherit); font-weight: 800;
	font-size: 1.15rem; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere;
}
.dmd-product-price { color: var(--dmd-accent-2, #ffb21a); font-weight: 700; font-variant-numeric: tabular-nums; }
.dmd-product-variant {
	width: 100%; min-height: 40px; padding: 8px 34px 8px 12px; border-radius: 10px;
	border: 1px solid var(--dmd-line, #262c35); background-color: var(--dmd-bg, #0d0f12); color: var(--dmd-fg, #f2f4f7);
	font: inherit; font-size: .9rem; appearance: none; -webkit-appearance: none; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.dmd-product-variant:focus-visible { outline: 2px solid var(--dmd-accent-2, #ffb21a); outline-offset: 1px; }
.dmd-product-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 4px; }
.dmd-product-actions .dmd-btn { width: 100%; }
.dmd-add.is-added { background: var(--dmd-accent-2, #ffb21a); color: #111; }
.dmd-product-more { align-self: center; color: var(--dmd-muted, #9aa3ae); font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; }
.dmd-product-more:hover { color: var(--dmd-fg, #f2f4f7); }
@media (max-width: 560px) {
	.dmd-product-body { padding: 10px 10px 12px; }
	.dmd-product-name { font-size: 1rem; }
	.dmd-btn { padding: 10px 12px; font-size: .8rem; }
}
.dmd-store-soon { color: var(--dmd-muted, #9aa3ae); font-size: 1.05rem; }

/* ------------------------------------------------------------ the bag */
.dmd-bag-lock, .dmd-bag-lock body { overflow: hidden; }
.dmd-bag { position: fixed; inset: 0; z-index: 10000; }
.dmd-bag[hidden] { display: none; }
.dmd-bag-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); opacity: 0; transition: opacity .2s; }
.dmd-bag-panel {
	position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
	display: flex; flex-direction: column;
	background: var(--dmd-panel, #161a20); color: var(--dmd-fg, #f2f4f7);
	border-left: 1px solid var(--dmd-line, #262c35); box-shadow: -20px 0 50px rgba(0, 0, 0, .45);
	transform: translateX(100%); transition: transform .22s ease;
}
.dmd-bag.is-open .dmd-bag-scrim { opacity: 1; }
.dmd-bag.is-open .dmd-bag-panel { transform: none; }
.dmd-bag-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 14px 20px; border-bottom: 1px solid var(--dmd-line, #262c35); }
.dmd-bag-head h2 { margin: 0; font-family: var(--dmd-display, inherit); font-size: 1.5rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--dmd-fg, #f2f4f7); }
.dmd-bag-x { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--dmd-fg, #f2f4f7); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.dmd-bag-x:hover { background: var(--dmd-line, #262c35); }
.dmd-bag-x:focus-visible { outline: 2px solid var(--dmd-accent-2, #ffb21a); }
.dmd-bag-alert:focus { outline: 2px solid var(--dmd-accent-2, #ffb21a); outline-offset: 2px; }
.dmd-bag-alert { margin: 12px 16px 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 178, 26, .1); border-left: 3px solid var(--dmd-accent-2, #ffb21a); font-size: .9rem; }
.dmd-bag-items { list-style: none; margin: 0; padding: 4px 16px; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.dmd-bag-item { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--dmd-line, #262c35); }
.dmd-bag-item:last-child { border-bottom: 0; }
.dmd-bag-media { width: 76px; height: 76px; border-radius: 10px; overflow: hidden; background: #1d2229; }
.dmd-bag-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dmd-bag-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dmd-bag-name { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.dmd-bag-option { color: var(--dmd-muted, #9aa3ae); font-size: .85rem; }
.dmd-bag-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.dmd-bag-line { font-weight: 700; font-variant-numeric: tabular-nums; }
.dmd-qty { display: inline-flex; align-items: center; border: 1px solid var(--dmd-line, #262c35); border-radius: 999px; }
.dmd-qty-btn { width: 36px; height: 36px; border: 0; background: transparent; color: var(--dmd-fg, #f2f4f7); font-size: 1.1rem; cursor: pointer; border-radius: 999px; }
.dmd-qty-btn:hover { background: var(--dmd-line, #262c35); }
.dmd-qty-btn:focus-visible { outline: 2px solid var(--dmd-accent-2, #ffb21a); }
.dmd-qty-btn[disabled] { opacity: .35; cursor: default; }
.dmd-qty-n { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.dmd-bag-remove { align-self: flex-start; margin-top: 4px; padding: 2px 0; border: 0; background: none; color: var(--dmd-muted, #9aa3ae); font: inherit; font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dmd-bag-remove:hover { color: var(--dmd-fg, #f2f4f7); }
.dmd-bag-empty { flex: 1; padding: 28px 20px; color: var(--dmd-muted, #9aa3ae); }
.dmd-bag-empty[hidden], .dmd-bag-foot[hidden], .dmd-bag-items[hidden], .dmd-bag-resume[hidden], .dmd-bag-alert[hidden] { display: none; }
.dmd-bag-empty p { margin: 0 0 16px; }
.dmd-bag-resume a { color: var(--dmd-accent-2, #ffb21a); font-weight: 700; }
.dmd-bag-foot { padding: 16px 20px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--dmd-line, #262c35); background: var(--dmd-bg, #0d0f12); }
.dmd-bag-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; }
.dmd-bag-total strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.dmd-bag-note { margin: 6px 0 14px; color: var(--dmd-muted, #9aa3ae); font-size: .82rem; line-height: 1.4; }
.dmd-bag-checkout { width: 100%; min-height: 50px; font-size: 1rem; }
.dmd-bag-checkout.is-busy { opacity: .7; pointer-events: none; }
.dmd-bag-checkout.is-busy::after { content: ""; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: dmd-spin .7s linear infinite; }
@keyframes dmd-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ count, toast, floating bag */
.dmd-bag-count, [data-dmd-bag-count] {
	position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
	background: var(--dmd-accent, #ff2d3d); color: #fff; font: 700 11px/18px var(--dmd-font, inherit); text-align: center; pointer-events: none;
}
[data-dmd-bag-count][hidden] { display: none; }
.is-bump { animation: dmd-bump .45s ease; }
@keyframes dmd-bump { 30% { transform: scale(1.45); } 100% { transform: none; } }

.dmd-toast {
	position: fixed; left: 50%; bottom: 20px; z-index: 9995; transform: translate(-50%, 16px); opacity: 0;
	display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px); padding: 10px 10px 10px 18px;
	border-radius: 999px; background: var(--dmd-fg, #f2f4f7); color: #111; font-weight: 600; font-size: .92rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .4); transition: opacity .2s, transform .2s;
}
.dmd-toast[hidden] { display: none; }
.dmd-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.dmd-toast-btn { flex: none; border: 0; border-radius: 999px; padding: 8px 14px; background: #111; color: #fff; font: 700 .8rem/1 var(--dmd-font, inherit); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.dmd-has-sticky .dmd-toast { bottom: calc(var(--dmd-sticky-h, 68px) + 14px); }

.dmd-bag-fab {
	position: fixed; right: 16px; bottom: 16px; z-index: 9994; width: 56px; height: 56px; border: 0; border-radius: 50%;
	display: grid; place-items: center; background: var(--dmd-accent, #ff2d3d); color: #fff; cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.dmd-bag-fab[hidden] { display: none; }
.dmd-bag-fab .dmd-bag-count { top: -2px; right: -2px; background: var(--dmd-fg, #f2f4f7); color: #111; }
.dmd-has-sticky .dmd-bag-fab { bottom: calc(var(--dmd-sticky-h, 68px) + 14px); }
.dmd-bag-icon { width: 24px; height: 24px; display: block; }

@media (prefers-reduced-motion: reduce) {
	.dmd-bag-panel, .dmd-bag-scrim, .dmd-toast, .dmd-product, .dmd-product-media img, .dmd-btn { transition: none; }
	.is-bump, .dmd-bag-checkout.is-busy::after { animation: none; }
}