/* ShopPilot storefront + docs. Every colour is a variable so any theme can restyle it. */
.sp-shop, .sp-docs, .sp-btn, .sp-disclosure {
	--sp-accent: #0f766e;
	--sp-accent-ink: #ffffff;
	--sp-accent-soft: #e6f4f1;
	--sp-bg: transparent;
	--sp-surface: #ffffff;
	--sp-surface-2: #f5f7f8;
	--sp-text: #16212b;
	--sp-muted: #5a6875;
	--sp-border: #d8dfe5;
	--sp-good: #14713d;
	--sp-warn: #8a5a00;
	--sp-danger: #a3271f;
	--sp-radius: 12px;
	--sp-btn-radius: 999px;
	--sp-input-radius: 999px;
	--sp-font: inherit;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .sp-shop, :root:not([data-theme="light"]) .sp-docs, :root:not([data-theme="light"]) .sp-btn {
		--sp-accent: #3cc4b4; --sp-accent-ink: #052623; --sp-accent-soft: #10302d;
		--sp-surface: #172029; --sp-surface-2: #1e2933; --sp-text: #e8eef3; --sp-muted: #9fb0be; --sp-border: #2c3a46;
		--sp-good: #6fd39a; --sp-warn: #f0c36a; --sp-danger: #ff8f86;
	}
}
:root[data-theme="dark"] .sp-shop, :root[data-theme="dark"] .sp-docs, :root[data-theme="dark"] .sp-btn {
	--sp-accent: #3cc4b4; --sp-accent-ink: #052623; --sp-accent-soft: #10302d;
	--sp-surface: #172029; --sp-surface-2: #1e2933; --sp-text: #e8eef3; --sp-muted: #9fb0be; --sp-border: #2c3a46;
	--sp-good: #6fd39a; --sp-warn: #f0c36a; --sp-danger: #ff8f86;
}

.sp-shop { font-family: var(--sp-font); color: var(--sp-text); background: var(--sp-bg); line-height: 1.5; }
.sp-shop *, .sp-shop *::before, .sp-shop *::after { box-sizing: border-box; }
.sp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp-shop [hidden] { display: none !important; }

/* Buttons */
.sp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .4em;
	min-height: 44px; padding: .6em 1.15em; border-radius: var(--sp-btn-radius); border: 1.5px solid transparent;
	font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; line-height: 1.2;
	transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease;
}
.sp-btn--primary { background: var(--sp-accent); color: var(--sp-accent-ink); }
.sp-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px var(--sp-accent); }
.sp-btn--ghost { background: transparent; color: var(--sp-text); border-color: var(--sp-border); }
.sp-btn--ghost:hover { border-color: var(--sp-accent); color: var(--sp-accent); }
.sp-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.sp-btn:focus-visible, .sp-input:focus-visible, .sp-example:focus-visible, .sp-table-wrap:focus-visible, .sp-select select:focus-visible {
	outline: 3px solid var(--sp-accent); outline-offset: 2px;
}

/* Search form */
.sp-form { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; }
.sp-input {
	width: 100%; min-height: 52px; padding: .7em 1.1em; font: inherit; color: var(--sp-text);
	background: var(--sp-surface); border: 1.5px solid var(--sp-border); border-radius: var(--sp-input-radius);
}
.sp-input::placeholder { color: var(--sp-muted); }
.sp-form .sp-btn { min-height: 52px; padding-inline: 1.6em; }
.sp-form__opts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; color: var(--sp-muted); font-size: .9rem; }
.sp-select { display: inline-flex; align-items: center; gap: .5rem; }
.sp-select select { font: inherit; color: var(--sp-text); background: var(--sp-surface); border: 1.5px solid var(--sp-border); border-radius: 8px; padding: .3em .6em; min-height: 36px; }
.sp-check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .95rem; }
.sp-check input { width: 18px; height: 18px; accent-color: var(--sp-accent); }
.sp-examples { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .9rem 0 0; color: var(--sp-muted); font-size: .9rem; }
.sp-example {
	font: inherit; font-size: .9rem; padding: .35em .85em; border-radius: 999px; cursor: pointer;
	color: var(--sp-text); background: var(--sp-surface-2); border: 1px solid var(--sp-border);
}
.sp-example:hover { border-color: var(--sp-accent); color: var(--sp-accent); }
.sp-status { min-height: 1.5em; margin: 1rem 0 .25rem; color: var(--sp-muted); font-size: .95rem; }
.sp-shop.is-busy .sp-out { opacity: .55; transition: opacity .15s; }

/* Results */
.sp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: .5rem 0 1rem; }
.sp-head__title { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.sp-card {
	display: grid; grid-template-columns: 120px 1fr auto; gap: 1.1rem; align-items: start;
	padding: 1.1rem; margin: 0 0 .85rem; background: var(--sp-surface);
	border: 1px solid var(--sp-border); border-radius: var(--sp-radius);
}
.sp-card__img { width: 120px; height: 120px; object-fit: contain; border-radius: 10px; background: var(--sp-surface-2); }
.sp-card__img--empty { display: grid; place-items: center; font-size: 2.6rem; font-weight: 700; color: var(--sp-accent); background: var(--sp-accent-soft); }
.sp-card__title { margin: .25rem 0 .1rem; font-size: 1.05rem; line-height: 1.35; font-weight: 650; }
.sp-card__meta { margin: 0 0 .4rem; color: var(--sp-muted); font-size: .9rem; }
.sp-card__row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.sp-card__actions { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; min-width: 170px; }
.sp-card__actions .sp-check { justify-content: center; }
.sp-price { display: inline-flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.sp-price__now { font-size: 1.35rem; font-weight: 750; }
.sp-price__was { color: var(--sp-muted); font-size: .9rem; }
.sp-price__off { color: var(--sp-good); font-weight: 650; font-size: .9rem; }
.sp-price__none { color: var(--sp-muted); }
.sp-rating { font-size: .92rem; color: var(--sp-muted); }
.sp-rating__star { color: #d99a00; }
.sp-pill { font-size: .78rem; font-weight: 700; padding: .1em .6em; border-radius: 999px; background: var(--sp-accent-soft); color: var(--sp-accent); }
.sp-why { margin: .6rem 0 0; padding-left: 1.1rem; color: var(--sp-muted); font-size: .9rem; }
.sp-why li { margin: .1rem 0; }
.sp-demo { margin: .5rem 0 0; font-size: .82rem; color: var(--sp-warn); }
.sp-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.sp-badge { font-size: .75rem; font-weight: 700; padding: .15em .65em; border-radius: 6px; background: var(--sp-surface-2); color: var(--sp-text); border: 1px solid var(--sp-border); }
.sp-badge--best-overall { background: var(--sp-accent); color: var(--sp-accent-ink); border-color: var(--sp-accent); }
.sp-badge--best-value, .sp-badge--best-deal { background: var(--sp-accent-soft); color: var(--sp-accent); border-color: transparent; }

.sp-empty, .sp-alert, .sp-linkbox { padding: 1.1rem; border-radius: var(--sp-radius); border: 1px solid var(--sp-border); background: var(--sp-surface); }
.sp-alert { border-color: var(--sp-danger); color: var(--sp-danger); }
.sp-warn { color: var(--sp-warn); font-size: .9rem; margin: .6rem 0 0; }
.sp-linkbox .sp-card__actions { flex-direction: row; flex-wrap: wrap; margin-top: .9rem; }
.sp-linkbox__asin { margin: .1rem 0 .6rem; color: var(--sp-muted); font-size: .9rem; }
.sp-linkbox__url .sp-input { border-radius: 10px; min-height: 44px; font-size: .9rem; }

/* Compare tray + table */
.sp-tray {
	position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
	padding: .7rem .9rem; margin: 1rem 0 0; background: var(--sp-surface); border: 1.5px solid var(--sp-accent);
	border-radius: var(--sp-btn-radius); box-shadow: 0 10px 30px -12px rgba(0,0,0,.35);
}
.sp-tray__count { font-weight: 650; margin-right: auto; padding-left: .5rem; }
.sp-compare__summary { color: var(--sp-muted); margin: 0 0 .75rem; }
.sp-verdict { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .4rem; }
.sp-verdict li { padding: .6rem .85rem; background: var(--sp-accent-soft); border-radius: 10px; }
.sp-verdict__why { color: var(--sp-muted); font-size: .9rem; }
.sp-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--sp-border); border-radius: var(--sp-radius); margin-top: .6rem; background: var(--sp-surface); }
.sp-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .95rem; }
.sp-table th, .sp-table td { padding: .7rem .85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sp-border); }
.sp-table thead th { background: var(--sp-surface-2); }
.sp-table tbody th { font-weight: 600; color: var(--sp-muted); white-space: nowrap; width: 1%; }
.sp-table .is-best { font-weight: 700; color: var(--sp-good); background: color-mix(in srgb, var(--sp-good) 9%, transparent); }
.sp-table__name { display: block; margin-bottom: .35rem; font-weight: 650; }
.sp-table.only-diff tbody tr[data-differs="0"] { display: none; }
.sp-table__buy td { padding-top: 1rem; }
.sp-check--inline { margin: .4rem 0; }

.sp-notes { margin-top: 1.25rem; color: var(--sp-muted); font-size: .85rem; }
.sp-notes p { margin: .25rem 0; }
.sp-disclosure { font-size: .8rem; color: var(--sp-muted); }

.sp-shop { container-type: inline-size; container-name: spshop; }
@container spshop (max-width: 680px) {
	.sp-card { grid-template-columns: 84px 1fr; }
	.sp-card__img { width: 84px; height: 84px; }
	.sp-card__actions { grid-column: 1 / -1; flex-direction: row; align-items: center; min-width: 0; }
	.sp-card__actions .sp-btn { flex: 1; }
	.sp-tray { border-radius: var(--sp-radius); }
}
/* A search box and its button fit side by side far narrower than a result card does. */
@container spshop (max-width: 440px) {
	.sp-form { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sp-btn { transition: none; } .sp-btn--primary:hover { transform: none; } }

/* Docs */
.sp-docs { color: var(--sp-text); line-height: 1.65; max-width: 860px; }
.sp-docs h2 { margin-top: 2.2rem; scroll-margin-top: 90px; }
.sp-docs h3 { margin-top: 1.4rem; }
.sp-docs__toc { padding: 1rem 1.25rem; background: var(--sp-surface-2); border-radius: var(--sp-radius); }
.sp-docs__toc ul { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.sp-docs { overflow-wrap: break-word; }
.sp-docs code { overflow-wrap: anywhere; font-size: .92em; padding: .08em .35em; border-radius: 5px; background: var(--sp-surface-2); }
.sp-code { margin: .5rem 0 1rem; padding: 1rem 1.15rem; overflow-x: auto; border-radius: var(--sp-radius); background: #10181f; color: #e6edf3; font-size: .88rem; line-height: 1.55; }
.sp-code code { background: none; padding: 0; color: inherit; }
.sp-docs__table { overflow-x: auto; position: relative; }
.sp-docs table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.sp-docs th, .sp-docs td { padding: .55rem .7rem; border-bottom: 1px solid var(--sp-border); text-align: left; vertical-align: top; }
.sp-docs__tools dt { margin-top: .9rem; }
.sp-docs__tools dd { margin: .15rem 0 0; color: var(--sp-muted); }