/* Sanctum Gold — D2R marketplace (v1.9.4).
 * List layout, POE2 card look-and-feel. Loaded ONLY on the D2R
 * parent archive and the 17 D2R child category archives.
 * Inner card typography (.sg-card-cat, .sg-card-title, .sg-stock, .sg-price,
 * .sg-card-variations, .sg-var-*) is reused from the main stylesheet so D2R
 * rows look exactly like the POE2 cards. */

/* v1.9.49: --surface2 now defined in :root (style.css); the scoped alias is
 * redundant and would shadow future changes. */
.sg-d2r-stack{
	max-width:1280px;
	margin:0 auto 26px;
	padding:0 18px;
}

/* --- "Select Your Server:" pills --------------------------------------- */
.sg-d2r-stack-title{
	font-family:var(--font-display);
	font-size:1.35rem;
	font-weight:700;
	letter-spacing:.06em;
	color:var(--text);
	margin:0 0 12px;
}
.sg-d2r-pills{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	margin-bottom:22px;
}
.sg-d2r-pill{
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:11px 10px;
	min-height:56px;
	border:1px solid var(--opt-border);
	border-radius:12px;
	background:var(--srv-bg);
	color:var(--text);
	font-family:var(--font-body);
	font-size:clamp(.8rem,3.6vw,.92rem);
	font-weight:600;
	line-height:1.35;
	text-decoration:none;
	transition:border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.sg-d2r-pill:active{transform:scale(.98)}
.sg-d2r-pill:hover{
	/* v1.9.170 (review S170-1): --gold-hover — light #7a2c14 (9.2:1; the orange was 2.7:1), dark the same #fdba74 as before */
	color:var(--gold-hover);
	border-color:var(--gold-dim);
	text-decoration:none;
}
.sg-d2r-pill.is-active{
	border:2px solid transparent;
	background:
		linear-gradient(rgba(249,115,22,.12),rgba(249,115,22,.12)) padding-box,
		linear-gradient(var(--srv-bg),var(--srv-bg)) padding-box,
		linear-gradient(135deg,#f97316,#ef4444) border-box;
	color:var(--text);
	font-weight:700;
	text-decoration:none;
}
/* --- Filter row --------------------------------------------------------- */
.sg-d2r-searchrow{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:14px 26px;
	margin-bottom:0;
}
/* --- Out-of-stock switch toggle (theme orange) ---------------------------- */
/* v1.9.59: toggle lives at the bottom of the sidebar, below the categories. */
.sg-d2r-oos-form{ margin:14px 0 0; padding-top:14px; border-top:1px solid var(--border); }
/* v1.9.60: product-page "Show out of stock" toggle next to the Options label. */
.variations th.label{ vertical-align:middle; }
.variations th.label > label:first-child{ display:inline-block; margin-right:14px; }
.sg-roll-oos-toggle{ font-size:.82rem; }
.sg-roll-oos-toggle .sg-d2r-switch-track{ transform:scale(.85); transform-origin:left center; }
/* v1.9.61: keep the toggle in the archive style — the product label rule
 * (uppercase gold) must not leak into it. */
.single-product table.variations th.label label.sg-roll-oos-toggle{
	font-size:.82rem; font-weight:500; text-transform:none; letter-spacing:0;
	color:var(--muted); margin:0; vertical-align:middle;
}
.single-product table.variations th.label label.sg-roll-oos-toggle:hover{ color:var(--text); }
.sg-d2r-switch{
	display:inline-flex;
	align-items:center;
	gap:10px;
	cursor:pointer;
	color:var(--muted);
	font-size:.93rem;
	font-weight:500;
	user-select:none;
}
.sg-d2r-switch:hover{ color:var(--text); }
.sg-d2r-switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.sg-d2r-switch-track{
	position:relative;
	flex:0 0 auto;
	width:42px;
	height:24px;
	border-radius:999px;
	background:var(--input-bg);
	border:1px solid var(--border);
	transition:background .18s ease, border-color .18s ease;
}
.sg-d2r-switch-knob{
	position:absolute;
	top:2px;
	left:2px;
	width:18px;
	height:18px;
	border-radius:50%;
	background:#7d7468;
	transition:left .18s ease, background .18s ease;
}
.sg-d2r-switch input:checked + .sg-d2r-switch-track{
	background:linear-gradient(180deg, var(--gold-light), var(--gold));
	border-color:var(--gold);
}
.sg-d2r-switch input:checked + .sg-d2r-switch-track .sg-d2r-switch-knob{
	left:20px;
	background:#fff;
}
.sg-d2r-switch input:focus-visible + .sg-d2r-switch-track{
	outline:2px solid var(--gold-light);
	outline-offset:2px;
}
.sg-d2r-switch input:checked ~ .sg-d2r-switch-label{
	color:var(--gold-hover); /* v1.9.170: same contrast fix as the server pill hover (orange text was 2.8:1 in light mode) */
	font-weight:700;
}

/* --- Layout: left sidebar + product list -------------------------------- */
.sg-d2r-layout{
	display:grid;
	grid-template-columns:238px minmax(0,1fr);
	gap:24px;
	max-width:1280px;
	margin:26px auto 0;
	padding:0 18px;
	align-items:start;
}
/* --- Product list: one full-width row per product ----------------------- */
.sg-d2r-list{
	display:flex;
	flex-direction:column;
	gap:14px;
	min-width:0;
}
/* Child archives render rows inside the theme's ul.products grid: force one
 * column so each row spans the full width. */
body.sg-game-diablo-2-resurrected.woocommerce ul.products{
	grid-template-columns:1fr;
	gap:14px;
}
.sg-d2r-row{
	display:grid;
	grid-template-columns:148px minmax(0,1fr) 208px;
	gap:20px;
	align-items:start;
	background:var(--card);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--card-shadow);
	padding:16px;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.sg-d2r-row:hover{
	border-color:var(--border-gold);
	box-shadow:var(--card-shadow-hover);
}
.sg-d2r-row-media{
	display:block;
	background:var(--card2);
	border:1px solid var(--border);
	border-radius:8px;
	overflow:hidden;
	aspect-ratio:4/5;
	min-width:0;
}
.sg-d2r-row-media img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.sg-d2r-row-main{
	display:flex;
	flex-direction:column;
	gap:8px;
	min-width:0;
}
.sg-d2r-row-main .sg-card-title{ font-size:1.35rem !important; } /* v1.9.51: bigger D2R product names (base uses !important) */
.sg-d2r-row-main .sg-card-variations{ margin-top:2px; max-width:680px; }
/* Out-of-stock rows keep the POE2 look with a red dot */
.sg-stock.is-oos{ color:var(--red); }
.sg-stock.is-oos::before{ background:var(--red); box-shadow:0 0 8px var(--red); }
/* v1.9.158 (review): in dark mode the red text was 2.61:1; the lighter red reads 5.5+:1 */
[data-theme="dark"] .sg-stock.is-oos{ color:#f0646a; }
.sg-d2r-row-side{
	display:flex;
	flex-direction:column;
	gap:10px;
	border-left:1px solid var(--border);
	padding-left:20px;
	min-width:0;
}
.sg-d2r-row-pricewrap{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:8px;
	flex-wrap:wrap;
}
.sg-d2r-row-price{ font-size:1.7rem !important; line-height:1.1; }
.sg-d2r-row-server{
	color:var(--muted2);
	font-size:.72rem;
	font-weight:600;
	letter-spacing:.04em;
	text-transform:uppercase;
}

/* quantity stepper */
.sg-d2r-buy{ display:flex; flex-direction:column; gap:8px; }
/* v1.9.77: foot wrapper is display:contents on desktop so the row layout is
 * byte-identical to v1.9.76. */
.sg-d2r-row-foot{ display:contents; }
.sg-d2r-qty{
	display:flex;
	align-items:stretch;
	border:1px solid var(--border);
	border-radius:8px;
	overflow:hidden;
	background:var(--input-bg);
}
.sg-d2r-qty-btn{
	flex:0 0 38px;
	border:0;
	background:var(--card2);
	color:var(--gold);
	font-size:1.05rem;
	font-weight:700;
	cursor:pointer;
	line-height:1;
	padding:8px 0;
}
.sg-d2r-qty-btn:hover{ background:var(--border); color:var(--gold-hover); } /* v1.9.156: orange on the hover fill was 3.96:1 */
.sg-d2r-qty-input{
	flex:1;
	min-width:0;
	border:0;
	background:transparent;
	color:var(--text);
	text-align:center;
	font-size:.92rem;
	font-weight:700;
	outline:none;
}
/* v1.9.44: the D2R row add button is the standard WooCommerce .button —
 * same component as the POE2 card button. .sg-d2r-add remains only as the
 * JS click hook. Visuals come from .woocommerce button.button in style.css. */
.sg-d2r-buynow{
	padding:12px;
	border:1px solid var(--btn-border);
	border-radius:8px;
	background:var(--btn-bg);
	color:var(--btn-text) !important;
	font-family:var(--font-display);
	font-weight:700;
	font-size:.92rem;
	letter-spacing:.08em;
	text-transform:uppercase;
	cursor:pointer;
	box-shadow:var(--btn-shadow);
	transition:filter .15s ease, transform .15s ease;
}
.sg-d2r-buynow:hover{ filter:brightness(1.08); }
.sg-d2r-buynow:disabled{
	opacity:.55;
	cursor:not-allowed;
	filter:none;
}
.sg-d2r-msg{ font-size:.8rem; color:var(--muted); min-height:1.1em; margin:0; }

/* OOS state: row stays visible, actions disabled */
.sg-d2r-oos{ display:flex; flex-direction:column; gap:8px; }
.sg-d2r-oos-label{
	display:inline-block;
	text-align:center;
	padding:4px 10px;
	border-radius:999px;
	background:var(--red-dark);
	color:#fff;
	font-size:.76rem;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
}

.sg-d2r-no-results{
	text-align:center;
	color:var(--muted);
	padding:40px 20px;
	background:var(--card);
	border:1px solid var(--border);
	border-radius:var(--radius);
}
.sg-d2r-pagination{
	margin:26px auto 0;
	display:flex;
	justify-content:center;
}
.sg-d2r-pagination .page-numbers{
	display:inline-block;
	padding:8px 14px;
	margin:0 3px;
	border:1px solid var(--border);
	border-radius:8px;
	color:var(--text);
	text-decoration:none;
	background:var(--card);
}
.sg-d2r-pagination .page-numbers.current{
	background:var(--btn-bg);
	color:var(--btn-text);
	border-color:var(--btn-border);
	font-weight:700;
}

/* Make the D2R stack sit neatly inside the hub marketplace section */
#sg-marketplace .sg-d2r-stack{ padding:0; }
#sg-marketplace .sg-d2r-layout{ padding:0; max-width:none; }

/* --- Mobile: sidebar becomes a chips row, rows stack ------------------- */
@media (max-width:900px){
	.sg-d2r-layout{ grid-template-columns:1fr; }
	/* Grid items default to min-width:auto, which lets the wide category
	 * chips row force the track (and the whole page) wider than the
	 * viewport. Allow both columns to shrink; the chips row scrolls
	 * horizontally by design. */
	.sg-d2r-main{ min-width:0; }
	.sg-d2r-main{scroll-margin-top:84px}
	/* v1.9.77: MOBILE-ONLY compact card (row layout). D2R only,
	 * max-width:900px only — desktop markup/CSS untouched.
	 * REVERT: restore assets/d2r.css from
	 * design-snapshots/d2r-card-v1.9.76/ (or delete this whole block and the
	 * .sg-d2r-row-foot rules; the PHP wrapper is harmless on
	 * desktop via display:contents). */
	.sg-d2r-row{
		grid-template-columns:76px minmax(0,1fr) auto;
		grid-template-areas:
			"media title price"
			"media opts  opts"
			"foot  foot  foot";
		gap:8px 10px;
		padding:12px;
		align-items:start;
	}
	/* Flatten the two wrapper divs so their children land in the grid. */
	.sg-d2r-row-main,.sg-d2r-row-side{ display:contents; }
	.sg-d2r-row-media{
		grid-area:media;
		width:76px;
		max-width:none;
		margin:0;
		aspect-ratio:1/1;
	}
	.sg-d2r-row-media img{ object-fit:contain; }
	/* Category tag + stock line: dropped on compact cards (space). */
	.sg-d2r-row-main .sg-card-cat{ display:none; }
	.sg-d2r-row-main .sg-stock{ display:none; }
	.sg-d2r-row-main .sg-card-title{
		grid-area:title;
		align-self:start;
		font-family:var(--font-display);
		font-size:1.3rem !important;
		text-transform:uppercase;
		letter-spacing:.04em;
		line-height:1.05;
	}
	.sg-d2r-row-main .sg-card-variations{
		grid-area:opts;
		margin-top:0;
		max-width:none;
		gap:5px;
	}
	/* Compact option rows: custom radio circle + pill label + price. */
	.sg-d2r-row .sg-var-option{
		background:none;
		border:0;
		border-radius:6px;
		padding:3px 0;
		gap:8px;
		font-size:.78rem;
	}
	.sg-d2r-row .sg-var-option:hover{ border-color:transparent; }
	.sg-d2r-row .sg-var-option input[type=radio]{
		-webkit-appearance:none;
		appearance:none;
		width:18px;
		height:18px;
		margin:0;
		border:2px solid var(--muted2);
		border-radius:50%;
		background:var(--card);
		cursor:pointer;
		flex-shrink:0;
	}
	.sg-d2r-row .sg-var-option input[type=radio]:checked{
		border-color:var(--accent);
		background:var(--accent);
		box-shadow:inset 0 0 0 2.5px var(--card);
	}
	.sg-d2r-row .sg-var-option input[type=radio]:focus-visible{
		outline:2px solid var(--accent);
		outline-offset:2px;
	}
	/* v1.9.158 (owner): phone option pills follow the page; the picked one gets a faint peach + orange edge */
	.sg-d2r-row .sg-var-option:has(input[type=radio]:checked){ background:none; }
	.sg-d2r-row .sg-var-option:has(input[type=radio]:checked) .sg-var-label{
		background:var(--opt-pill-sel-bg);
		box-shadow:inset 0 0 0 1px var(--opt-pill-sel-edge);
	}
	.sg-d2r-row .sg-var-label{
		background:var(--opt-pill-bg);
		box-shadow:inset 0 0 0 1px var(--opt-pill-edge);
		border-radius:5px;
		padding:4px 9px;
		font-size:.78rem;
	}
	.sg-d2r-row-pricewrap{
		grid-area:price;
		display:block;
		text-align:right;
	}
	.sg-d2r-row-price{ font-size:1.2rem !important; }
	.sg-d2r-row-server{ display:none; }
	/* Foot row: qty stepper + add button (v1.9.120: detail button removed). */
	.sg-d2r-row-foot{
		grid-area:foot;
		display:flex;
		align-items:center;
		gap:8px;
		margin-top:2px;
	}
	.sg-d2r-row .sg-d2r-buy{
		flex:1 1 auto;
		min-width:0;
		flex-direction:row;
		flex-wrap:wrap;
		align-items:center;
		gap:8px;
	}
	.sg-d2r-row .sg-d2r-qty{
		flex:0 0 auto;
		width:104px;
		border-radius:999px;
		background:var(--card2);
	}
	.sg-d2r-row .sg-d2r-qty-btn{
		flex:0 0 30px;
		background:transparent;
		color:var(--text);
		padding:6px 0;
	}
	.sg-d2r-row .sg-d2r-qty-input{ font-size:.85rem; }
	/* The add button is the standard WooCommerce .button (same as POE2);
	 * it just stretches to fill the row here. */
	.sg-d2r-row .sg-d2r-buy .sg-d2r-add{
		flex:1 1 0%;
		min-width:0;
		white-space:nowrap;
		text-align:center;
		padding:10px 12px;
	}
	.sg-d2r-row .sg-d2r-buy .sg-d2r-msg{ flex-basis:100%; }
	.sg-d2r-row .sg-d2r-buy .sg-d2r-msg:empty{ display:none; }
	.sg-d2r-row .sg-needs-server{ flex:1 1 auto; cursor:pointer; -webkit-tap-highlight-color:transparent; }
	.sg-d2r-row .sg-d2r-oos{ flex:1 1 auto; }
	/* Keep every foot-row button on one line (add / select-server / oos). */
	.sg-d2r-row .sg-d2r-row-foot .button{ white-space:nowrap; }
}

/* v1.9.16: AJAX region refresh state.
 * v1.9.114: navigation (servers, categories, sort, search, pagination) stays
 * clickable while a region loads — the latest click wins. Only the product
 * rows, whose buy controls belong to the results being replaced, are dimmed
 * and blocked (d2r.js also refuses a stale add, e.g. from the keyboard). */
.sg-d2r-loading .sg-d2r-row{
	opacity:.55;
	pointer-events:none;
	transition:opacity .15s ease;
}

/* v1.9.126: the desktop layout gives the category sidebar 320px (the sidebar itself: cats.css) */
@media (min-width:901px){
	.sg-d2r-layout{ grid-template-columns:320px minmax(0,1fr); gap:28px; }
}

/* v1.9.128: breadcrumb + title on the D2R category pages line up with the content below
 * (same 1280 px width and 18 px gutter as .sg-d2r-stack); they used to touch the window edge. */
.sg-archive > .woocommerce-breadcrumb,
.sg-archive > .page-title,
.sg-archive > .term-description,
.sg-archive > .sg-cat-intro{
	max-width:1280px;
	margin-left:auto;
	margin-right:auto;
	padding-left:18px;
	padding-right:18px;
	box-sizing:border-box;
}
.sg-archive > .woocommerce-breadcrumb{ padding-top:16px; }
/* v1.9.203 (owner 2026-11-11): 20px between a D2R category's heading and the server bar (it touched it), on the
 * category page and for a category picked on the hub */
.sg-archive > .page-title,
#sg-marketplace h1.sg-section-title.sg-hub-h1-cat{ margin-bottom:20px; }
/* v1.9.203 (owner 2026-11-11): a category picked on the hub has its heading on the left at the size of the category page's
 * own heading (h1: 2rem), not centred like the hub's heading; the hub heading itself stays centred */
#sg-marketplace h1.sg-section-title.sg-hub-h1-cat{ text-align:left; font-size:2rem; }
/* v1.9.181 (T5): a category's intro sits under its left-aligned H1, not centred like a hub subtitle */
.sg-archive > .sg-cat-intro{ text-align:left; margin-bottom:18px; }

/* v1.9.160 (ChatGPT S160-4): at 861–900px keep the list's top below the sticky header (its measured height;
 * 1.9.161: one 66px row again, the search row under it is gone). */
@media (min-width:861px) and (max-width:900px){
	.sg-d2r-main{scroll-margin-top:calc(var(--sg-header-h, 66px) + 18px)}
}

/* v1.9.202 (owner 2026-11-10): the hub's own heading text and blocks, hidden while a category picked on the hub is shown (d2r.js) */
[data-sg-hub-block][hidden]{display:none!important}