/* Device buy-box (Fix 02): template-parts/woocommerce/device-buy-box.php
 * Inter, #232323 on white. Price first, swatches, grey note, black Add to bag,
 * small outlined buttons and a trust line under a thin rule. */

.device-buy-box {
	--dbb-muted: #55565a;
	--dbb-note: #efeeea;
	--dbb-rule: #e3e3e1;

	color: var(--color-secondary);

	> * + * {
		margin-top: 18px;
	}

	> .dbb-title {
		margin-top: 10px;
	}

	> .dbb-summary {
		margin-top: 12px;
	}

	p {
		margin-bottom: 0;
	}

	.dbb-breadcrumb #breadcrumbs {
		font-size: var(--text-size-sm);
		color: var(--dbb-muted);

		a {
			color: var(--dbb-muted);
			text-decoration: none;
		}
	}

	.dbb-summary,
	.dbb-summary p {
		font-size: var(--text-size);
		line-height: 1.5;
		color: var(--dbb-muted);
	}

	.dbb-price {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: 20px;
		row-gap: 4px;
		margin-top: 22px;
	}

	.dbb-price-amount {
		font-size: 40px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: -0.01em;

		del {
			font-size: var(--text-size-md);
			font-weight: 300;
			opacity: 0.6;
		}

		ins {
			text-decoration: none;
		}
	}

	.dbb-vat {
		font-size: var(--text-size);
		color: var(--dbb-muted);
	}

	.dbb-finance {
		font-size: var(--text-size);

		strong {
			font-weight: 500;
		}

		a {
			color: inherit;
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	.dbb-colour-label {
		font-size: var(--text-size);
		font-weight: 500;

		.dbb-colour-name {
			margin-left: 6px;
			font-weight: 300;
		}
	}

	.dbb-swatches {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		margin-top: 12px;
	}

	.dbb-swatch {
		width: 40px;
		height: 40px;
		padding: 0;
		border: 1px solid #cfcecb;
		border-radius: 50%;
		background-color: var(--swatch, transparent);
		box-shadow: inset 0 0 0 3px var(--color-white);
		cursor: pointer;
		transition: var(--transition-border);

		&[aria-pressed="true"] {
			border: 2px solid var(--color-secondary);
		}

		&:focus-visible {
			outline: 2px solid var(--color-secondary);
			outline-offset: 3px;
		}

		&.no-colour {
			width: auto;
			padding: 0 16px;
			border-radius: 50vh;
			box-shadow: none;
			font-size: var(--text-size-sm);
			color: var(--color-secondary);
		}
	}

	.dbb-note {
		padding: 14px 20px;
		border-radius: 12px;
		background-color: var(--dbb-note);
		font-size: var(--text-size-sm);
		line-height: 1.5;
		color: var(--dbb-muted);

		p {
			font-size: inherit;
			color: inherit;
		}

		p + p {
			margin-top: 6px;
		}

		strong {
			font-weight: 500;
			color: var(--color-secondary);
		}
	}

	/* The swatches stand in for WooCommerce's colour dropdown, and the price
	   line above for the variation price. */
	.dbb-cart {
		.variations .col:has(select[name="attribute_pa_color"]),
		.reset_variations,
		.woocommerce-variation-price,
		.quantity {
			display: none !important;
		}

		.variations:not(:has(.col:not(:has(select[name="attribute_pa_color"])))) {
			display: none;
		}

		/* mt-2 utilities from the shared add to cart templates */
		.single_variation_wrap,
		.add-to-bag-wrapper {
			margin-top: 0 !important;
		}
	}

	.dbb-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;

		/* The theme's small buttons keep 30px on the right for an arrow; these have none. */
		.button {
			min-height: 40px;
			padding-right: 20px;
			padding-left: 20px;
		}
	}

	.dbb-trust {
		display: flex;
		flex-wrap: wrap;
		column-gap: 14px;
		row-gap: 4px;
		margin: 20px 0 0;
		padding: 14px 0 0;
		border-top: 1px solid var(--dbb-rule);
		list-style: none;
		font-size: var(--text-size-sm);
		color: var(--dbb-muted);

		li {
			display: flex;
			align-items: center;
			gap: 6px;
		}

		/* 8px plus the 6px gap keeps the dot 14px from the next item. */
		li + li:before {
			content: '\00b7';
			margin-right: 8px;
		}

		.dbb-trust-icon {
			flex: none;
			width: 16px;
			height: 16px;
		}

		strong {
			font-weight: 500;
			color: var(--color-secondary);
		}
	}
}

@media (max-width: 575px) {
	.device-buy-box .dbb-price-amount {
		font-size: 34px;
	}
}