/**
 * DROIX Guide Blocks — structural component sheet.
 *
 * Rules of this file (load-bearing — see ARCHITECTURE.md):
 *  - every selector is scoped .dxg-*        (never leaks into the theme)
 *  - no !important                          (theme overrides always possible)
 *  - brand values come from --dxg-* tokens  (per-profile sheet, inline)
 *  - body text inherits the page font; only headings use --dxg-font-head
 *
 * Token defaults are declared by DXG_Styles::token_css() (inline style).
 */

/* ─────────────────────────── shared atoms ─────────────────────────── */

.dxg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--dxg-radius-btn, 16px);
	font-family: var(--dxg-font-head, inherit);
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dxg-btn--primary {
	background: var(--dxg-accent, #B0CB1F);
	color: var(--dxg-accent-text, #1B2400);
	box-shadow: 0 8px 20px rgba(176, 203, 31, 0.35);
}
.dxg-btn--primary:hover {
	background: var(--dxg-accent-hover, #74A401);
	color: #fff;
	box-shadow: none;
}
.dxg-btn--ghost {
	border: 1px solid #D9D9D9;
	background: #fff;
	color: #242421;
	font-weight: 500;
	font-size: 14px;
	padding: 12px 18px;
}
.dxg-btn--ghost:hover {
	background: var(--dxg-tint, #F3F8DC);
	border-color: var(--dxg-accent, #B0CB1F);
	color: #242421;
}
.dxg-btn--sm {
	padding: 8px 16px;
	border-radius: 12px;
	font-size: 12.5px;
}
.dxg-btn--static { cursor: default; color: #999; border-color: #EEE; font-weight: 500; }
.dxg-btn--static:hover { background: #fff; border-color: #EEE; }

.dxg-price {
	font-family: var(--dxg-font-head, inherit);
	font-weight: 700;
	font-size: 16px;
	color: var(--dxg-price, #BB3DA1);
	white-space: nowrap;
}
.dxg-price--lg { font-size: 22px; }
.dxg-price.is-sale { color: var(--dxg-sale, #D80027); }
.dxg-price__was {
	font-size: 0.85em;
	font-weight: 500;
	color: #999;
	text-decoration: line-through;
	white-space: nowrap;
}

.dxg-chip {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 5px 12px;
	border-radius: 9999px;
	font-weight: 600;
	font-size: 12px;
	line-height: 1.4;
}
.dxg-chip--instock  { background: var(--dxg-tint, #F3F8DC); color: #4E6F01; }
.dxg-chip--preorder { background: #FFF6D6; color: #8A6D00; }
.dxg-chip--oos      { background: #EEEEEE; color: #666666; }
.dxg-chip--external { background: #EEEEEE; color: #666666; }

.dxg-rating-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border-radius: 8px;
	background: var(--dxg-tint, #F3F8DC);
	font-family: var(--dxg-font-head, inherit);
	font-weight: 700;
	font-size: 12.5px;
	color: #4E6F01;
	text-decoration: none;
}
.dxg-rating-chip--external { background: #F6F8FA; color: #999; font-weight: 600; font-size: 11px; font-family: inherit; }

.dxg-star { width: 12px; height: 12px; flex: 0 0 auto; background: #8FAA0C; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

.dxg-icon-check, .dxg-icon-minus { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 3px; position: relative; }
.dxg-icon-check::before { content: ""; position: absolute; left: 1px; top: 2px; width: 9px; height: 5px; border-left: 2.5px solid var(--dxg-accent-hover, #74A401); border-bottom: 2.5px solid var(--dxg-accent-hover, #74A401); transform: rotate(-45deg); }
.dxg-icon-minus::before { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 2.5px; border-radius: 2px; background: #999; }

.dxg-arrow-right::after, .dxg-arrow-down::after, .dxg-arrow-out::after { content: "→"; font-size: 0.9em; line-height: 1; }
.dxg-arrow-down::after { content: "↓"; }
.dxg-arrow-out::after { content: "↗"; }

/* ───────────────────────────── glance ─────────────────────────────── */

.dxg-glance {
	margin: 32px 0;
	background: #F8F8F8;
	border-radius: 30px;
	padding: 26px 28px;
}
.dxg-glance__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.dxg-glance__title {
	margin: 0;
	font-family: var(--dxg-font-head, inherit);
	font-weight: 700;
	font-size: 22px;
	color: #242421;
}
.dxg-glance__note { font-size: 13px; color: #999; }
.dxg-glance__jump {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--dxg-font-head, inherit);
	font-weight: 500;
	font-size: 14px;
	color: var(--dxg-accent-hover, #74A401);
	text-decoration: none;
}
.dxg-glance__jump:hover { color: #4E6F01; }
.dxg-glance__list { display: flex; flex-direction: column; gap: 10px; }

/* ─────────────────────────── pick strip ───────────────────────────── */

.dxg-strip {
	display: flex;
	gap: 16px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--dxg-border, #F0F0F0);
	border-radius: var(--dxg-radius-card, 20px);
	padding: 12px 18px 12px 12px;
	box-shadow: 0 2px 6px rgba(38, 38, 38, 0.04);
	margin: 0;
}
.dxg-strip + .dxg-strip { margin-top: 10px; }
.dxg-strip__media {
	width: 92px;
	height: 66px;
	border-radius: 14px;
	background: #F6F8FA;
	overflow: hidden;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dxg-strip__media img { width: 100%; height: 100%; object-fit: contain; }
.dxg-strip__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.dxg-strip__badge {
	font-family: var(--dxg-font-head, inherit);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--dxg-rank, #017DC5);
	white-space: nowrap;
}
.dxg-strip__name {
	font-family: var(--dxg-font-head, inherit);
	font-weight: 700;
	font-size: 16px;
	color: #242421;
	text-decoration: none;
}
.dxg-strip__name:hover { color: #4E6F01; }
.dxg-strip__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dxg-strip__review { font-weight: 600; font-size: 12.5px; color: var(--dxg-accent-hover, #74A401); text-decoration: none; }
.dxg-strip__spec { font-size: 12.5px; color: #999; }
.dxg-strip__aside { display: flex; flex-direction: column; gap: 7px; align-items: flex-end; flex: 0 0 auto; }
.dxg-strip__nostock { font-size: 12.5px; font-weight: 600; color: #999; }

/* ─────────────────────────── pick panel ───────────────────────────── */

.dxg-pick {
	background: #F8F8F8;
	border-radius: 30px;
	padding: 26px 28px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 24px 0;
	scroll-margin-top: 100px;
}
.dxg-pick__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dxg-pick__spacer { flex: 1; }
.dxg-pick__badge {
	white-space: nowrap;
	padding: 6px 14px;
	border-radius: 9999px;
	background: var(--dxg-rank, #017DC5);
	color: #fff;
	font-family: var(--dxg-font-head, inherit);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
.dxg-verdict { display: flex; align-items: center; gap: 9px; }
.dxg-verdict__ring {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.dxg-verdict__score {
	width: 37px;
	height: 37px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--dxg-font-head, inherit);
	font-weight: 700;
	font-size: 14.5px;
	color: #242421;
}
.dxg-verdict__label { display: flex; flex-direction: column; }
.dxg-verdict__label b { font-family: var(--dxg-font-head, inherit); font-weight: 700; font-size: 13px; color: #242421; }
.dxg-verdict__label a { font-weight: 600; font-size: 12px; color: var(--dxg-accent-hover, #74A401); text-decoration: none; }
.dxg-pick__grid {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 26px;
	align-items: stretch;
}
.dxg-pick__media {
	background: #fff;
	border-radius: var(--dxg-radius-card, 20px);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 210px;
}
.dxg-pick__media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; box-sizing: border-box; }
.dxg-pick__body { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.dxg-pick__name {
	margin: 0;
	font-family: var(--dxg-font-head, inherit);
	font-weight: 700;
	font-size: 23px;
	color: #242421;
}
.dxg-pick__tagline { font-size: 13.5px; color: #666; }
.dxg-pick__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dxg-pick__chip {
	padding: 6px 12px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid #EEE;
	font-weight: 600;
	font-size: 12.5px;
	color: #484848;
}
.dxg-pick__points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.dxg-pick__points li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.5; color: #333; margin: 0; }
.dxg-pick__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
	padding-top: 6px;
	flex-wrap: wrap;
}

@media (max-width: 640px) {
	.dxg-pick { padding: 18px 16px; border-radius: 22px; }
	.dxg-pick__grid { grid-template-columns: 1fr; gap: 14px; }
	.dxg-pick__media { min-height: 170px; }
	.dxg-strip { flex-wrap: wrap; }
	.dxg-strip__aside { flex-direction: row; width: 100%; align-items: center; justify-content: space-between; }
	.dxg-glance { padding: 18px 16px; border-radius: 22px; }
}

/* ────────────────────────── compare table ─────────────────────────── */

.dxg-compare { margin: 32px 0; scroll-margin-top: 100px; }
.dxg-compare__scroll {
	overflow-x: auto;
	border: 1px solid var(--dxg-border, #F0F0F0);
	border-radius: 30px;
	box-shadow: 0 2px 6px rgba(38, 38, 38, 0.04);
	-webkit-overflow-scrolling: touch;
}
.dxg-compare__inner { background: #fff; }
.dxg-compare__row { display: grid; border-bottom: 1px solid #F6F6F6; }
.dxg-compare__row--head { border-bottom: 1px solid var(--dxg-border, #F0F0F0); }
.dxg-compare__row--price { border-bottom: none; }
.dxg-compare__label {
	padding: 13px 18px;
	font-weight: 600;
	font-size: 12.5px;
	color: #484848;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #fff;
}
.dxg-compare__label--head { justify-content: flex-end; font-family: var(--dxg-font-head, inherit); font-weight: 700; color: #999; }
.dxg-compare__bench-sub { font-size: 11px; color: #999; font-weight: 400; }
.dxg-compare__cell {
	padding: 13px 10px;
	border-left: 1px solid var(--dxg-border, #F0F0F0);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 12.5px;
	line-height: 1.4;
	color: #333;
	background: #fff;
}
.dxg-compare__cell.is-pick { background: var(--dxg-tint, #F3F8DC); }
.dxg-compare__val.is-best { font-weight: 700; }
.dxg-compare__missing { color: #C4C4C4; }
.dxg-compare__prod { flex-direction: column; gap: 7px; padding: 16px 12px 12px; }
.dxg-pick-pill {
	white-space: nowrap;
	padding: 3px 10px;
	border-radius: 9999px;
	background: var(--dxg-accent, #B0CB1F);
	color: var(--dxg-accent-text, #1B2400);
	font-family: var(--dxg-font-head, inherit);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
.dxg-pick-pill--empty { background: transparent; height: 18px; padding: 0; }
.dxg-compare__media {
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 10px;
	background: #F6F8FA;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dxg-compare__media img { width: 100%; height: 100%; object-fit: contain; }
.dxg-compare__name {
	font-family: var(--dxg-font-head, inherit);
	font-weight: 700;
	font-size: 12.5px;
	color: #242421;
	text-align: center;
	line-height: 1.3;
	text-decoration: none;
}
.dxg-compare__name:hover { color: #4E6F01; }
.dxg-compare__bench { flex-direction: column; gap: 6px; justify-content: center; }
.dxg-compare__bench-val { font-family: var(--dxg-font-head, inherit); font-weight: 500; font-size: 13.5px; color: #333; }
.dxg-compare__bench.is-best .dxg-compare__bench-val { font-weight: 700; color: #242421; }
.dxg-compare__bench-val small { font-size: 10.5px; color: #999; font-weight: 400; }
.dxg-compare__bar { display: block; width: 100%; height: 6px; border-radius: 9999px; background: #EDEDED; overflow: hidden; }
.dxg-compare__bar-fill { display: block; height: 100%; border-radius: 9999px; background: var(--dxg-accent, #B0CB1F); }
.dxg-compare__cta { flex-direction: column; gap: 9px; padding: 16px 10px; }
.dxg-compare__nostock { font-size: 12px; font-weight: 600; color: #999; }

.dxg-compare__label {
	position: sticky;
	left: 0;
	z-index: 2;
	box-shadow: 2px 0 4px rgba(0, 0, 0, 0.04);
}

@media (max-width: 768px) {
	.dxg-compare__scroll { border-radius: 20px; }
	.dxg-compare__inner { --dxg-compare-label: 110px; }
}

/* ─────────────────────────── buy inline ───────────────────────────── */

.dxg-buy {
	display: flex;
	gap: 16px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--dxg-border, #F0F0F0);
	border-radius: var(--dxg-radius-card, 20px);
	padding: 12px 18px 12px 12px;
	box-shadow: 0 2px 6px rgba(38, 38, 38, 0.04);
	margin: 20px 0;
}
.dxg-buy__media {
	width: 72px;
	height: 54px;
	border-radius: 12px;
	background: #F6F8FA;
	overflow: hidden;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dxg-buy__media img { width: 100%; height: 100%; object-fit: contain; }
.dxg-buy__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; align-items: flex-start; }
.dxg-buy__name { font-family: var(--dxg-font-head, inherit); font-weight: 700; font-size: 15px; color: #242421; }
.dxg-buy__aside { display: flex; flex-direction: column; gap: 7px; align-items: flex-end; flex: 0 0 auto; }

/* In-prose variant ([dxg_buy style="inline"]) — flows inside a sentence. */
.dxg-buy--inline {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	vertical-align: middle;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	margin: 0 2px;
}

@media (max-width: 480px) {
	.dxg-buy { flex-wrap: wrap; }
	.dxg-buy--inline { flex-wrap: nowrap; }
	.dxg-buy__aside { flex-direction: row; width: 100%; align-items: center; justify-content: space-between; }
}

/* ─────────────────────────── featured card ────────────────────────── */

.dxg-featured {
	border: 1px solid var(--dxg-border, #F0F0F0);
	border-radius: var(--dxg-radius-card, 20px);
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 6px rgba(38, 38, 38, 0.04);
	margin: 0 0 20px;
}
.dxg-featured__eyebrow {
	display: block;
	padding: 14px 18px 0;
	font-family: var(--dxg-font-head, inherit);
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dxg-accent-hover, #74A401);
}
.dxg-featured__row { display: flex; gap: 14px; align-items: center; padding: 12px 18px 16px; }
.dxg-featured__media {
	width: 88px;
	height: 64px;
	border-radius: 12px;
	background: #F6F8FA;
	overflow: hidden;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dxg-featured__media img { width: 100%; height: 100%; object-fit: contain; }
.dxg-featured__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dxg-featured__name { font-family: var(--dxg-font-head, inherit); font-weight: 700; font-size: 15px; color: #242421; }
.dxg-featured__stock { font-size: 11.5px; color: #666; }
.dxg-featured__body .dxg-price { font-size: 18px; margin-top: 4px; }
.dxg-featured__cta {
	display: flex;
	height: 50px;
	margin: 0 14px 14px;
	border-radius: 14px;
	font-weight: 500;
	font-size: 14.5px;
	color: #fff;
	box-shadow: none;
}

/* The inline variant is the mobile slot (droix_article_top) — on desktop the
   sidebar widget shows the card instead, so hide the inline one there. */
@media (min-width: 1025px) {
	.dxg-featured--inline { display: none; }
}