/* =========================================================================
 * Tap N Roll Singles — Product Detail Page
 * Layout + styling for the three PDP states (in_stock / low_stock / sold_out)
 * Matches mockup tapnroll-pdp-v2-mockups.pdf.
 * ========================================================================= */

.tnr-pdp { padding-bottom: var(--tnr-s-8); }

/* ---- Urgency banner (low_stock state) ---- */
.tnr-urgency-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tnr-s-4);
	margin: var(--tnr-s-4) 0 var(--tnr-s-6);
	padding: var(--tnr-s-4) var(--tnr-s-5);
	background: linear-gradient(180deg, rgba(245,166,35,0.16), rgba(245,166,35,0.06));
	border: 1px solid rgba(245,166,35,0.45);
	border-radius: var(--tnr-r-3);
}
.tnr-urgency-banner__count {
	font-family: var(--tnr-font-display);
	font-size: 28px;
	letter-spacing: var(--tnr-ls-display);
	color: var(--tnr-amber);
}
.tnr-urgency-banner__buyers {
	font-family: var(--tnr-font-mono);
	font-size: 12px;
	letter-spacing: var(--tnr-ls-eyebrow);
	text-transform: uppercase;
	color: var(--tnr-muted);
}
.tnr-urgency-banner__cta {
	margin-left: auto;
	background: var(--tnr-amber);
	color: var(--tnr-amber-ink);
	font-weight: 700;
	font-size: 16px;
	padding: 12px 18px;
	border-radius: var(--tnr-r-2);
	text-decoration: none;
}
.tnr-urgency-banner__cta:hover { background: var(--tnr-amber-2); }

/* ---- Two-column grid: card image | buy box ---- */
.tnr-pdp__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--tnr-s-7);
	align-items: start;
}
@media (max-width: 900px) {
	.tnr-pdp__grid { grid-template-columns: 1fr; }
}

/* ---- Card image (left) ---- */
.tnr-pdp__image {
	background: var(--tnr-card);
	border: 1px solid var(--tnr-line);
	border-radius: var(--tnr-r-3);
	padding: var(--tnr-s-5);
	box-shadow: var(--tnr-shadow-2);
	position: relative;
	overflow: hidden;
}
.tnr-pdp__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--tnr-r-2);
}
.tnr-pdp__image--sold_out img {
	filter: grayscale(0.5) brightness(0.85);
	opacity: 0.7;
}
.tnr-pdp__image-overlay {
	position: absolute;
	inset: auto 0 0 0;
	margin: 0;
	padding: var(--tnr-s-3);
	text-align: center;
	font-family: var(--tnr-font-display);
	font-size: 32px;
	letter-spacing: var(--tnr-ls-display);
	color: var(--tnr-red);
	background: linear-gradient(0deg, rgba(15,17,21,0.92), rgba(15,17,21,0));
}

/* ---- Buy box (right) ---- */
.tnr-pdp__buy { padding: var(--tnr-s-2) 0; }

.tnr-pdp__eyebrow {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tnr-s-2);
	align-items: center;
	font-family: var(--tnr-font-mono);
	font-size: var(--tnr-fs-eyebrow);
	letter-spacing: var(--tnr-ls-eyebrow);
	text-transform: uppercase;
	color: var(--tnr-muted);
	margin-bottom: var(--tnr-s-3);
}
.tnr-pdp__set        { color: var(--tnr-text); }
.tnr-pdp__set-code   { color: var(--tnr-amber); }
.tnr-pdp__rarity     { padding: 2px 8px; border-radius: var(--tnr-r-pill); border: 1px solid var(--tnr-line-2); }
.tnr-pdp__rarity--mythic   { color: #E89A3C; border-color: #E89A3C; }
.tnr-pdp__rarity--rare     { color: #C9A857; border-color: #C9A857; }
.tnr-pdp__rarity--uncommon { color: #B7C0CD; border-color: #B7C0CD; }
.tnr-pdp__rarity--common   { color: var(--tnr-muted); }

.tnr-pdp__title {
	font-family: var(--tnr-font-display);
	font-size: clamp(40px, 6vw, 64px);
	line-height: 0.95;
	letter-spacing: var(--tnr-ls-display);
	color: var(--tnr-text);
	margin: 0 0 var(--tnr-s-3);
}
.tnr-pdp__title--sold_out { color: var(--tnr-muted); }

.tnr-pdp__cost { margin-bottom: var(--tnr-s-3); }

.tnr-pdp__type-line {
	font-family: var(--tnr-font-body);
	font-size: 15px;
	color: var(--tnr-muted);
	margin: 0 0 var(--tnr-s-4);
}

.tnr-pdp__price-row {
	display: flex;
	align-items: baseline;
	gap: var(--tnr-s-4);
	margin-bottom: var(--tnr-s-4);
}
.tnr-pdp__price {
	font-family: var(--tnr-font-display);
	font-size: 44px;
	color: var(--tnr-amber);
	letter-spacing: var(--tnr-ls-display);
}
.tnr-pdp__price--out { color: var(--tnr-faint); text-decoration: line-through; }

.tnr-pdp__stock {
	font-family: var(--tnr-font-mono);
	font-size: 12px;
	letter-spacing: var(--tnr-ls-eyebrow);
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--tnr-r-pill);
}
.tnr-pdp__stock--in_stock  { color: var(--tnr-green);     background: rgba(58,174,106,0.10); }
.tnr-pdp__stock--low_stock { color: var(--tnr-amber);     background: rgba(245,166,35,0.12); }
.tnr-pdp__stock--out       { color: var(--tnr-red);       background: rgba(215,84,77,0.12); }

/* ---- Variant pills ---- */
.tnr-pdp__variants {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tnr-s-2);
	margin-bottom: var(--tnr-s-5);
}
.tnr-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--tnr-s-2);
	padding: 10px 14px;
	border-radius: var(--tnr-r-pill);
	background: var(--tnr-card);
	border: 1px solid var(--tnr-line);
	color: var(--tnr-text);
	font: 500 14px/1 var(--tnr-font-body);
	cursor: pointer;
	transition: border-color var(--tnr-dur-fast) var(--tnr-ease),
	            background var(--tnr-dur-fast) var(--tnr-ease);
}
.tnr-pill:hover { border-color: var(--tnr-amber); }
.tnr-pill[aria-pressed="true"],
.tnr-pill.is-selected {
	background: rgba(245,166,35,0.12);
	border-color: var(--tnr-amber);
}
.tnr-pill__qty {
	font-family: var(--tnr-font-mono);
	font-size: 11px;
	color: var(--tnr-muted);
	padding: 2px 6px;
	border-radius: var(--tnr-r-pill);
	background: var(--tnr-card-2);
}
.tnr-pill--out {
	color: var(--tnr-faint);
	text-decoration: line-through;
	cursor: not-allowed;
}
.tnr-pill--out .tnr-pill__qty { color: var(--tnr-faint); }

/* ---- CTA ---- */
.tnr-pdp__cta { margin-top: var(--tnr-s-4); }
.tnr-pdp__cta-shopwp .tnr-btn,
.tnr-pdp__cta-shopwp .wpshop-buy-button { width: 100%; }

/* ---- Oracle text panel ---- */
.tnr-pdp__oracle {
	margin-top: var(--tnr-s-7);
	background: var(--tnr-card);
	border: 1px solid var(--tnr-line);
	border-radius: var(--tnr-r-3);
	padding: var(--tnr-s-5) var(--tnr-s-6);
}
.tnr-pdp__section-head {
	display: flex;
	gap: var(--tnr-s-3);
	align-items: baseline;
	margin-bottom: var(--tnr-s-4);
}
.tnr-oracle {
	font-family: var(--tnr-font-serif);
	font-size: 17px;
	line-height: 1.55;
	color: var(--tnr-text);
}
.tnr-oracle p { margin: 0 0 var(--tnr-s-3); }
.tnr-oracle p:last-child { margin-bottom: 0; }
.tnr-reminder { color: var(--tnr-muted); }

.tnr-pt,
.tnr-loyalty {
	margin-top: var(--tnr-s-4);
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: var(--tnr-r-pill);
	background: var(--tnr-card-2);
	border: 1px solid var(--tnr-line-2);
	font-family: var(--tnr-font-display);
	font-size: 22px;
	color: var(--tnr-amber);
	letter-spacing: var(--tnr-ls-display);
}

/* ---- Rulings ---- */
.tnr-pdp__rulings {
	margin-top: var(--tnr-s-6);
	background: var(--tnr-card);
	border: 1px solid var(--tnr-line);
	border-radius: var(--tnr-r-3);
	padding: var(--tnr-s-5) var(--tnr-s-6);
}
.tnr-rulings { list-style: none; margin: 0; padding: 0; }
.tnr-ruling {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: var(--tnr-s-4);
	padding: var(--tnr-s-3) 0;
	border-top: 1px solid var(--tnr-line);
}
.tnr-ruling:first-child { border-top: none; }
.tnr-ruling__date {
	font-family: var(--tnr-font-mono);
	font-size: 12px;
	color: var(--tnr-muted);
	letter-spacing: var(--tnr-ls-eyebrow);
	text-transform: uppercase;
}
.tnr-ruling__text { margin: 0; color: var(--tnr-text); font-size: 15px; line-height: 1.5; }

/* ---- Format legality grid ---- */
.tnr-pdp__legal {
	margin-top: var(--tnr-s-6);
	background: var(--tnr-card);
	border: 1px solid var(--tnr-line);
	border-radius: var(--tnr-r-3);
	padding: var(--tnr-s-5) var(--tnr-s-6);
}
.tnr-legal-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--tnr-s-2);
}
.tnr-legal {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 14px;
	border-radius: var(--tnr-r-2);
	background: var(--tnr-card-2);
	border: 1px solid var(--tnr-line);
	font-family: var(--tnr-font-mono);
	font-size: 12px;
	letter-spacing: var(--tnr-ls-eyebrow);
	text-transform: uppercase;
}
.tnr-legal__format { color: var(--tnr-text); }
.tnr-legal__status { color: var(--tnr-muted); }
.tnr-leg-legal       { border-color: rgba(58,174,106,0.45); }
.tnr-leg-legal       .tnr-legal__status { color: var(--tnr-green); }
.tnr-leg-not-legal   .tnr-legal__status { color: var(--tnr-faint); }
.tnr-leg-banned      { border-color: rgba(215,84,77,0.45); }
.tnr-leg-banned      .tnr-legal__status { color: var(--tnr-red); }
.tnr-leg-restricted  .tnr-legal__status { color: var(--tnr-amber); }

/* ---- Similar Cards rail ---- */
.tnr-pdp__similar {
	margin-top: var(--tnr-s-7);
}
.tnr-rail {
	list-style: none;
	margin: 0;
	padding: var(--tnr-s-3) 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(180px, 200px);
	gap: var(--tnr-s-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}
.tnr-rail__item { scroll-snap-align: start; }
.tnr-rail__link {
	display: block;
	background: var(--tnr-card);
	border: 1px solid var(--tnr-line);
	border-radius: var(--tnr-r-3);
	padding: var(--tnr-s-3);
	text-decoration: none;
	color: var(--tnr-text);
	transition: border-color var(--tnr-dur-fast) var(--tnr-ease),
	            transform var(--tnr-dur-fast) var(--tnr-ease);
}
.tnr-rail__link:hover { border-color: var(--tnr-amber); transform: translateY(-2px); }
.tnr-rail__image img { width: 100%; height: auto; border-radius: var(--tnr-r-2); display: block; }
.tnr-rail__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: var(--tnr-s-3);
}
.tnr-rail__title {
	font: 500 13px/1.2 var(--tnr-font-body);
	color: var(--tnr-text);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.tnr-rail__price {
	font-family: var(--tnr-font-display);
	font-size: 18px;
	color: var(--tnr-amber);
	letter-spacing: var(--tnr-ls-display);
}