/*
 * sg-core — affiliate box
 *
 * Colours and proportions are taken from the existing soundandgo.com design.
 * Loaded only on pages that actually render a shortcode. No external fonts,
 * no external assets, no JavaScript (CLAUDE.md §8.3, §10).
 *
 * Everything adjustable is a custom property on .sg-box, so the design can be
 * changed from Bricks with a single declaration and without fighting
 * specificity. All selectors here are single-class on purpose.
 *
 *   .sg-box {
 *       --sg-max-width: 32rem;
 *       --sg-button-size: 1.25rem;
 *   }
 *
 * There is no prefers-color-scheme switch on purpose: how the box looks is
 * decided by the site's design, not by the visitor's operating system.
 */

.sg-box {
	/* Layout */
	--sg-max-width: 28rem;
	--sg-offer-gap: 1.35rem;
	--sg-block-margin: 2rem;

	/* Product image: scaled to fit, never cropped, capped in height like the
	 * boxes beside it. */
	--sg-image-max-height: 12.5rem;

	/* Typography — override these from Bricks.
	 *
	 * The sizes follow the AAWP boxes this site already uses, so a page can
	 * carry both while the changeover lasts without looking like two designs.
	 * Measured from their vertical template: price 20px, button 14px,
	 * footnote 11px. */
	--sg-title-size: 1.2rem;
	--sg-price-size: 1.25rem;
	--sg-button-size: 0.875rem;
	--sg-button-weight: 400;
	--sg-stamp-size: 0.6875rem;

	/* Buttons — the geometry of the Elementor button this site already uses:
	 * full width, 12px/24px inside, at least 40px tall. */
	--sg-radius: 3px;
	--sg-border-width: 1px;
	--sg-button-padding: 0.75rem 1.5rem;
	--sg-button-min-height: 2.5rem;

	/* Colours */
	--sg-text: #111;
	--sg-muted: #6b7280;

	/* Typography inherits from the theme. Nothing is loaded from outside. */
	max-width: var(--sg-max-width);
	margin: var(--sg-block-margin) auto;
	color: var(--sg-text);
	font-family: inherit;
	line-height: 1.6;
	/* Centred, borderless, on the page's own background — the shape the
	 * existing product boxes have on this site. */
	text-align: center;
}

.sg-box__title {
	margin: 0 0 1rem;
	font-size: var(--sg-title-size);
	line-height: 1.3;
}

/*
 * The photo is centred inside a fixed square and scaled to fit. A portrait and
 * a landscape shot therefore occupy exactly the same space, and nothing is
 * cropped away.
 */
.sg-box__media {
	margin: 0 0 0.95rem;
}

.sg-box__image {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: var(--sg-image-max-height);
	height: auto;
	margin: 0 auto;
	object-fit: contain;
}

.sg-box__offers {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sg-box__offer + .sg-box__offer {
	margin-top: var(--sg-offer-gap);
}

/* Price and timestamp sit right-aligned above the full-width button, so both
 * end flush with its right edge. The rest of the box stays centred. */
.sg-box__price {
	margin: 0 0 0.3rem;
	font-size: var(--sg-price-size);
	font-weight: 700;
	line-height: 1.1;
	text-align: right;
}

/*
 * Required next to every price (CLAUDE.md §7) and mandatory under Amazon's
 * licence (§6.3 ix). Kept small so it does not compete with the price.
 */
.sg-box__stamp {
	margin: 0 0 0.45rem;
	font-size: var(--sg-stamp-size);
	line-height: 1.3;
	color: var(--sg-muted);
	text-align: right;
}

/*
 * An offer without a price keeps its button but loses the price block. The
 * spacing below replaces it so the button does not slide into the gap (§7).
 */
.sg-box__offer--no-price {
	margin-top: var(--sg-offer-gap);
}

/*
 * Full width, like the buttons the operator built in Elementor — that is the
 * shape this site's readers already know. Measured off the live page rather
 * than guessed: 12px/24px inside, at least 40px tall, 3px corners, one pixel
 * of border in a darker shade of the merchant colour.
 */
.sg-box__button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--sg-button-min-height);
	padding: var(--sg-button-padding);
	line-height: 1.2;
	border: var(--sg-border-width) solid var(--sg-merchant-border, #111);
	border-radius: var(--sg-radius);
	background-color: var(--sg-merchant-color, #333);
	color: var(--sg-merchant-text, #111);
	font-size: var(--sg-button-size);
	font-weight: var(--sg-button-weight);
	text-align: center;
	text-decoration: none;
}

/* Amazon's button carries a soft vertical gradient in the current design. */
.sg-box__button--amazon {
	background-image: linear-gradient( 180deg, #f7dfa5 0%, var(--sg-merchant-color, #f0c14b) 100% );
}

.sg-box__button:hover,
.sg-box__button:focus {
	color: var(--sg-merchant-text, #111);
	text-decoration: none;
	filter: brightness(0.95);
}

.sg-box__button:focus-visible {
	outline: 3px solid var(--sg-merchant-border, #111);
	outline-offset: 2px;
}

/*
 * Off by default — the affiliate disclosure lives at the end of the article.
 * Switch it back on per box with the sg_core_box_disclaimer filter.
 */
.sg-box__disclaimer {
	margin: 1.25rem 0 0;
	font-size: 0.72rem;
	line-height: 1.45;
	color: var(--sg-muted);
}

/*
 * Factsheet — [sg_facts]
 *
 * Same idea as the box: only custom properties are meant to be overridden
 * from Bricks, and every selector is single-class.
 */

.sg-facts {
	--sg-facts-max-width: 44rem;
	--sg-facts-size: 0.95rem;
	--sg-facts-label-width: 45%;
	--sg-facts-border: #e2e5e9;
	--sg-facts-zebra: rgba(0, 0, 0, 0.025);
	--sg-facts-pro: #2f7a3f;
	--sg-facts-contra: #b23b3b;

	max-width: var(--sg-facts-max-width);
	margin: 2rem 0;
	font-family: inherit;
	font-size: var(--sg-facts-size);
	line-height: 1.5;
}

.sg-facts__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.sg-facts__table th,
.sg-facts__table td {
	padding: 0.55rem 0.7rem;
	border-bottom: 1px solid var(--sg-facts-border);
	text-align: left;
	vertical-align: top;
}

.sg-facts__table th {
	width: var(--sg-facts-label-width);
	font-weight: 600;
}

.sg-facts__table tr:nth-child(odd) {
	background: var(--sg-facts-zebra);
}

.sg-facts__verdict {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.sg-facts__col {
	flex: 1 1 14rem;
	min-width: 0;
}

.sg-facts__head {
	margin: 0 0 0.4rem;
	font-size: 1.05rem;
}

.sg-facts__col--pro .sg-facts__head {
	color: var(--sg-facts-pro);
}

.sg-facts__col--contra .sg-facts__head {
	color: var(--sg-facts-contra);
}

.sg-facts__col ul {
	margin: 0;
	padding-left: 1.1rem;
}

.sg-facts__col li {
	margin-bottom: 0.3rem;
}

/* Two blocks, two headings: manufacturer data and own judgement. */
.sg-facts__section {
	margin: 2rem 0 0.15rem;
	font-size: 1.15rem;
}

.sg-facts__section:first-child {
	margin-top: 0;
}

.sg-facts__origin {
	margin: 0 0 0.8rem;
	font-size: 0.8rem;
	color: #6b7280;
}

/* ---------------------------------------------------------------------------
 * Comparison table (§8.1)
 *
 * Four columns do not fit on a phone, and hiding a specification would hide
 * the one the reader came for. The table therefore keeps its width and scrolls
 * sideways inside its own container; the label column stays put, so a value is
 * never orphaned from what it means.
 * ------------------------------------------------------------------------ */

.sg-compare {
	--sg-compare-min-column: 11rem;
	--sg-compare-label-width: 12rem;
	--sg-compare-border: #e5e7eb;
	--sg-compare-stripe: #fafafa;
	--sg-compare-muted: #6b7280;
	--sg-compare-image: 6rem;

	margin: var(--sg-block-margin, 2rem) 0;
}

.sg-compare__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sg-compare__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.sg-compare__table th,
.sg-compare__table td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--sg-compare-border);
	text-align: left;
	vertical-align: top;
}

.sg-compare__table tbody tr:nth-child(odd) td,
.sg-compare__table tbody tr:nth-child(odd) th {
	background: var(--sg-compare-stripe);
}

/* The label column stays visible while the values scroll past it. */
.sg-compare__corner,
.sg-compare__label {
	position: sticky;
	left: 0;
	z-index: 1;
	width: var(--sg-compare-label-width);
	min-width: var(--sg-compare-label-width);
	background: #fff;
	font-weight: 600;
}

.sg-compare__table tbody tr:nth-child(odd) .sg-compare__label {
	background: var(--sg-compare-stripe);
}

.sg-compare__product {
	min-width: var(--sg-compare-min-column);
	text-align: center;
	vertical-align: bottom;
}

.sg-compare__image {
	display: block;
	max-width: var(--sg-compare-image);
	height: auto;
	margin: 0 auto 0.5rem;
}

.sg-compare__name {
	display: block;
	font-size: 1rem;
	line-height: 1.3;
}

.sg-compare__value {
	min-width: var(--sg-compare-min-column);
}

.sg-compare__empty {
	color: var(--sg-compare-muted);
}

.sg-compare__prices .sg-compare__value {
	text-align: center;
}

.sg-compare__price {
	display: block;
	font-size: var(--sg-price-size, 1.35rem);
	font-weight: 600;
}

.sg-compare__stamp {
	display: block;
	margin-bottom: 0.45rem;
	font-size: var(--sg-stamp-size, 0.75rem);
	color: var(--sg-compare-muted);
}

/* Same button as in the box: full width of its column, same size and weight.
   A comparison that ends in a smaller button than the box beside it looks
   like a different kind of link, and it is not. */
.sg-compare__button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 1rem;
	border: var(--sg-border-width, 1px) solid var(--sg-merchant-border, #333);
	border-radius: var(--sg-radius, 5px);
	background: var(--sg-merchant-color, #f3f4f6);
	color: var(--sg-merchant-text, #111);
	font-size: var(--sg-button-size, 1.15rem);
	font-weight: var(--sg-button-weight, 500);
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
}

.sg-compare__disclaimer {
	margin: 0.6rem 0 0;
	font-size: 0.8rem;
	color: var(--sg-compare-muted);
}