/* Bang & Olufsen product type - front-end */

.bopt-product {
	margin: 0 0 1.5em;
}

.bopt-admin-hint {
	padding: 10px 14px;
	background: #fff8e5;
	border-left: 4px solid #dba617;
	font-size: 14px;
}

/* ---------- Attribute block ---------- */

.bopt-attribute {
	margin: 0 0 22px;
}

.bopt-attribute__head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 10px;
}

.bopt-attribute__title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #111;
}

.bopt-attribute__value {
	font-size: 13px;
	color: #6b6b6b;
}

/* ---------- Swatches (B&O look) ---------- */

.bopt-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var( --bopt-sw-gap, 10px );
	align-items: center;
}

.bopt-swatch {
	position: relative;
	padding: 0;
	margin: 0;
	background: none;
	border: var( --bopt-sw-ring-w, 2px ) solid transparent;
	border-radius: var( --bopt-sw-radius, 50% );
	cursor: pointer;
	line-height: 0;
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.bopt-swatch:focus { outline: none; }
.bopt-swatch:focus-visible { box-shadow: 0 0 0 3px rgba( 0, 0, 0, .15 ); }

/* Circle colour swatch */
.bopt-swatch--color {
	width: var( --bopt-sw-size, 42px );
	height: var( --bopt-sw-size, 42px );
	padding: 3px;
}

.bopt-swatch--color .bopt-swatch__dot {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var( --bopt-sw-radius, 50% );
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 1px var( --bopt-sw-inner, rgba( 0, 0, 0, .12 ) );
}

/* Selected ring - as in the reference screenshot */
.bopt-swatch--color.is-selected {
	border-color: var( --bopt-sw-ring, #111 );
}

.bopt-swatch--color:hover {
	border-color: rgba( 17, 17, 17, .35 );
}

/* Button style swatch */
.bopt-swatch--button {
	border-radius: 4px;
	border: 1px solid #c9c9c9;
	background: #fff;
	color: #111;
	padding: 10px 18px;
	font-size: 14px;
	line-height: 1.2;
	min-width: 64px;
}

.bopt-swatch--button:hover { border-color: #7a7a7a; }

.bopt-swatch--button.is-selected {
	border-color: #111;
	box-shadow: inset 0 0 0 1px #111;
	background: #fff;
}

/* Out of stock */
.bopt-swatch.is-oos {
	opacity: .4;
	cursor: not-allowed;
}
.bopt-swatch.is-oos::after {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	top: 50%;
	height: 1px;
	background: #b00;
	transform: rotate( -45deg );
}

/* ---------- Select / radio / text ---------- */

.bopt-select {
	width: 100%;
	max-width: var( --bopt-sel-width, 340px );
	padding: var( --bopt-sel-pad-y, 10px ) var( --bopt-sel-pad-x, 12px );
	border: var( --bopt-sel-border-w, 1px ) solid var( --bopt-sel-border, #c9c9c9 );
	border-radius: var( --bopt-sel-radius, 4px );
	background: var( --bopt-sel-bg, #fff );
	color: var( --bopt-sel-color, #111 );
	font-size: var( --bopt-sel-font-size, 15px );
	font-weight: var( --bopt-sel-font-weight, 400 );
}

.bopt-radios {
	display: flex;
	flex-direction: column;
	gap: var( --bopt-radio-gap, 8px );
}

.bopt-radio {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: var( --bopt-radio-pad-y, 12px ) var( --bopt-radio-pad-x, 14px );
	border: var( --bopt-radio-border-w, 1px ) solid var( --bopt-radio-border, #dcdcdc );
	border-radius: var( --bopt-radio-radius, 4px );
	background: var( --bopt-radio-bg, transparent );
	color: var( --bopt-radio-color, inherit );
	cursor: pointer;
	flex-wrap: wrap;
}

.bopt-radio:has( input:checked ) {
	background: var( --bopt-radio-sel-bg, #fff );
	color: var( --bopt-radio-sel-color, #111 );
	border-color: var( --bopt-radio-sel-border, #111 );
	box-shadow: inset 0 0 0 var( --bopt-radio-sel-w, 1px ) var( --bopt-radio-sel-border, #111 );
}

.bopt-radio__label {
	font-size: var( --bopt-radio-font-size, 15px );
	font-weight: var( --bopt-radio-font-weight, 400 );
}
.bopt-radio__desc {
	flex: 1 1 100%;
	color: #6b6b6b;
	font-size: 13px;
}

.bopt-text {
	width: 100%;
	max-width: 340px;
	padding: 10px 12px;
	border: 1px solid #c9c9c9;
	border-radius: 4px;
}

/* ---------- Summary bar ---------- */

.bopt-summary-bar {
	display: flex;
	align-items: baseline;
	gap: 20px;
	flex-wrap: wrap;
	margin: 22px 0 16px;
	padding-top: 16px;
	border-top: 1px solid #ececec;
}

.bopt-price-label {
	display: block;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #6b6b6b;
}

.bopt-price {
	font-size: 24px;
	font-weight: 600;
	color: #111;
}

.bopt-sku-box {
	font-size: 13px;
	color: #6b6b6b;
}

/* ---------- Offer button ---------- */

.bopt-offer-button {
	display: inline-block;
	background: #111;
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: 14px 32px;
	font-size: 15px;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background .15s ease;
}

.bopt-offer-button:hover { background: #333; color: #fff; }

/* ---------- Modal ---------- */

.bopt-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.bopt-modal[hidden] { display: none; }

.bopt-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, .55 );
}

.bopt-modal__box {
	position: relative;
	background: #fff;
	border-radius: 6px;
	width: 100%;
	max-width: 560px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 28px;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, .3 );
}

.bopt-modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: 0;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #777;
}

.bopt-modal__image {
	text-align: center;
	margin-bottom: 18px;
}

.bopt-modal__image img {
	max-width: 100%;
	max-height: 220px;
	width: auto;
	display: inline-block;
	object-fit: contain;
}

.bopt-modal__title {
	margin: 0 0 10px;
	text-align: center;
	font-size: 22px;
}

.bopt-modal__text {
	text-align: center;
	color: #555;
	font-size: 14px;
}

.bopt-modal__summary {
	background: #f7f7f7;
	border-radius: 4px;
	padding: 12px 14px;
	margin: 16px 0;
	font-size: 14px;
}

.bopt-modal__summary .bopt-sum-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
}

.bopt-modal__summary .bopt-sum-row strong { color: #111; }

.bopt-modal__summary .bopt-sum-total {
	border-top: 1px solid #e0e0e0;
	margin-top: 8px;
	padding-top: 8px;
	font-weight: 600;
}

/* ---------- Fields injected into forms ---------- */

.bopt-form-field {
	display: block;
	margin-bottom: 12px;
}

.bopt-form-field__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
}

.bopt-form-field select,
.bopt-form-field input[type="text"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #c9c9c9;
	border-radius: 4px;
	background: #fff;
}

.bopt-form-summary {
	background: #f7f7f7;
	border-radius: 4px;
	padding: 12px 14px;
	margin-bottom: 14px;
	font-size: 14px;
}

body.bopt-modal-open { overflow: hidden; }

@media ( max-width: 480px ) {
	.bopt-swatch--color { width: 38px; height: 38px; }
	.bopt-modal__box { padding: 20px; }
}

/* ---------- Smooth image / price transitions ---------- */

.woocommerce-product-gallery img,
.flex-viewport img,
.product .images img {
	transition: opacity .28s ease;
}

img.bopt-img-fading {
	opacity: .15 !important;
}

/* Main price gently fades when the total changes */
.summary p.price,
.entry-summary p.price {
	transition: opacity .18s ease;
}

.bopt-price-updating {
	opacity: .35;
}

/* Swatch selection feels smoother */
.bopt-swatch__dot {
	transition: transform .18s ease, box-shadow .18s ease;
}

.bopt-swatch--color.is-selected .bopt-swatch__dot {
	transform: scale( 1.02 );
}

/* SKU-only bar (the separate Total row was removed) */
.bopt-summary-bar:empty { display: none; }
.bopt-summary-bar { margin-top: 18px; }

@media ( prefers-reduced-motion: reduce ) {
	.woocommerce-product-gallery img,
	.flex-viewport img,
	.product .images img,
	.summary p.price,
	.bopt-swatch__dot {
		transition: none;
	}
}

/* ---------- Add to cart mode ---------- */

.bopt-cart-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.bopt-cart-actions .quantity input {
	padding: 12px 8px;
	border: 1px solid #c9c9c9;
	border-radius: 4px;
}

.bopt-add-to-cart {
	background: #111;
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: 14px 32px;
	font-size: 15px;
	cursor: pointer;
	transition: background .15s ease;
}

.bopt-add-to-cart:hover { background: #333; color: #fff; }

/* Selected options in cart / checkout */
.woocommerce-cart .bopt-cart-meta,
.variation p { margin-bottom: 0; }

/* ==========================================================================
   Theme override armour
   --------------------------------------------------------------------------
   Some themes style every <button> globally (border-radius: 0, a solid
   background, their own accent colour on :focus). That turned the round
   colour swatches into empty square boxes with a pink ring on live sites.
   These rules re-assert only the properties a theme is likely to hijack.
   The selectors are deliberately over-qualified so specificity wins even
   without !important where possible.
   ========================================================================== */

.bopt-product .bopt-swatches .bopt-swatch,
.bopt-shortcode-options .bopt-swatches .bopt-swatch {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: none !important;
	background-image: none !important;
	background-color: transparent !important;
	box-shadow: none;
	text-shadow: none;
	min-height: 0;
	min-width: 0;
	max-width: none;
	width: auto;
	height: auto;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	outline: none !important;
	filter: none;
	transform: none;
}

/* Round colour swatch - themes love "button { border-radius: 0 }". */
.bopt-product .bopt-swatches .bopt-swatch--color,
.bopt-shortcode-options .bopt-swatches .bopt-swatch--color {
	width: var( --bopt-sw-size, 42px ) !important;
	height: var( --bopt-sw-size, 42px ) !important;
	padding: 3px !important;
	border-radius: var( --bopt-sw-radius, 50% ) !important;
	border: var( --bopt-sw-ring-w, 2px ) solid transparent !important;
	overflow: visible;
	flex: 0 0 auto;
}

/* The colour itself lives on the inner span - keep its background. */
.bopt-product .bopt-swatches .bopt-swatch--color .bopt-swatch__dot,
.bopt-shortcode-options .bopt-swatches .bopt-swatch--color .bopt-swatch__dot {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	border-radius: var( --bopt-sw-radius, 50% ) !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	box-shadow: inset 0 0 0 1px var( --bopt-sw-inner, rgba( 0, 0, 0, .12 ) );
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
	content: normal;
}

/* Selected ring must stay black, not the theme's accent colour. */
.bopt-product .bopt-swatches .bopt-swatch--color.is-selected,
.bopt-shortcode-options .bopt-swatches .bopt-swatch--color.is-selected {
	border-color: var( --bopt-sw-ring, #111 ) !important;
}

.bopt-product .bopt-swatches .bopt-swatch--color:hover,
.bopt-shortcode-options .bopt-swatches .bopt-swatch--color:hover {
	border-color: var( --bopt-sw-ring-hover, rgba( 17, 17, 17, .35 ) ) !important;
}

/* Kill theme focus rings / pseudo elements on our swatches. */
.bopt-product .bopt-swatches .bopt-swatch:focus,
.bopt-shortcode-options .bopt-swatches .bopt-swatch:focus {
	outline: none !important;
	box-shadow: none !important;
	border-color: transparent;
}

.bopt-product .bopt-swatches .bopt-swatch--color:focus.is-selected,
.bopt-shortcode-options .bopt-swatches .bopt-swatch--color:focus.is-selected {
	border-color: #111 !important;
}

.bopt-product .bopt-swatches .bopt-swatch:focus-visible,
.bopt-shortcode-options .bopt-swatches .bopt-swatch:focus-visible {
	box-shadow: 0 0 0 3px rgba( 0, 0, 0, .15 ) !important;
}

/* Themes that add ::before / ::after decoration to buttons. */
.bopt-product .bopt-swatches .bopt-swatch--color::before,
.bopt-product .bopt-swatches .bopt-swatch--color::after,
.bopt-shortcode-options .bopt-swatches .bopt-swatch--color::before,
.bopt-shortcode-options .bopt-swatches .bopt-swatch--color::after {
	display: none;
}

/* Out of stock keeps its cross. */
.bopt-product .bopt-swatches .bopt-swatch.is-oos::after,
.bopt-shortcode-options .bopt-swatches .bopt-swatch.is-oos::after {
	display: block;
}

/* Button / text swatches: restore the pill look. */
.bopt-product .bopt-swatches .bopt-swatch--button.bopt-swatch--button,
.bopt-shortcode-options .bopt-swatches .bopt-swatch--button.bopt-swatch--button,
.woocommerce .bopt-product .bopt-swatches .bopt-swatch--button.bopt-swatch--button,
.bopt-product .bopt-swatches .bopt-swatch--button,
.bopt-shortcode-options .bopt-swatches .bopt-swatch--button {
	border: var( --bopt-btn-border-w, 1px ) solid var( --bopt-btn-border, #c9c9c9 ) !important;
	border-radius: var( --bopt-btn-radius, 4px ) !important;
	background: var( --bopt-btn-bg, #fff ) !important;
	color: var( --bopt-btn-color, #111 ) !important;
	padding: var( --bopt-btn-pad-y, 10px ) var( --bopt-btn-pad-x, 18px ) !important;
	font-size: var( --bopt-btn-font-size, 14px ) !important;
	font-weight: var( --bopt-btn-font-weight, 400 ) !important;
	line-height: 1.2 !important;
	width: auto !important;
	height: auto !important;
}

.bopt-product .bopt-swatches .bopt-swatch--button.is-selected.is-selected,
.bopt-shortcode-options .bopt-swatches .bopt-swatch--button.is-selected.is-selected,
.woocommerce .bopt-product .bopt-swatches .bopt-swatch--button.is-selected.is-selected,
.bopt-product .bopt-swatches .bopt-swatch--button.is-selected,
.bopt-shortcode-options .bopt-swatches .bopt-swatch--button.is-selected {
	background: var( --bopt-btn-sel-bg, #fff ) !important;
	color: var( --bopt-btn-sel-color, #111 ) !important;
	border-color: var( --bopt-btn-sel-border, #111 ) !important;
	box-shadow: inset 0 0 0 var( --bopt-btn-sel-w, 2px ) var( --bopt-btn-sel-border, #111 ) !important;
}

@media ( max-width: 480px ) {
	.bopt-product .bopt-swatches .bopt-swatch--color,
	.bopt-shortcode-options .bopt-swatches .bopt-swatch--color {
		width: calc( var( --bopt-sw-size, 42px ) * .9 ) !important;
		height: calc( var( --bopt-sw-size, 42px ) * .9 ) !important;
	}
}

/* Last-resort fallback: paint the swatch from the button's own custom
   property, in case a theme hides the inner span entirely. */
.bopt-product .bopt-swatches .bopt-swatch--color,
.bopt-shortcode-options .bopt-swatches .bopt-swatch--color {
	background-color: transparent !important;
}

.bopt-product .bopt-swatches .bopt-swatch--color:not(:has(.bopt-swatch__dot)),
.bopt-shortcode-options .bopt-swatches .bopt-swatch--color:not(:has(.bopt-swatch__dot)) {
	background-color: var( --bopt-color, #e5e5e5 ) !important;
	background-clip: content-box !important;
}


/* Styling-tab driven label + CTA colours. */
.bopt-product .bopt-attribute__title,
.bopt-shortcode-options .bopt-attribute__title {
	color: var( --bopt-label-color, #111 );
	font-size: var( --bopt-label-size, 12px );
}

.bopt-product .bopt-attribute__value,
.bopt-shortcode-options .bopt-attribute__value {
	color: var( --bopt-value-color, #777 );
}

.bopt-product .bopt-offer-button,
.bopt-shortcode-options .bopt-offer-button {
	background: var( --bopt-cta-bg, #111 );
	color: var( --bopt-cta-color, #fff );
	border-radius: var( --bopt-cta-radius, 2px );
}


/* ==========================================================================
   Styling-tab variables applied to the real template classes.
   The wrapper rendered by templates/product-options.php is .bopt-product
   (and .bopt-shortcode-options for the [bo_options] shortcode).
   ========================================================================== */

.bopt-product .bopt-attribute__title,
.bopt-shortcode-options .bopt-attribute__title {
	color: var( --bopt-label-color, #111 ) !important;
	font-size: var( --bopt-label-size, 12px ) !important;
}

.bopt-product .bopt-attribute__value,
.bopt-shortcode-options .bopt-attribute__value {
	color: var( --bopt-value-color, #777 ) !important;
}

/*
 * Doubling the class raises specificity above theme rules that also use
 * !important (where !important alone would not settle the contest).
 */
.bopt-product .bopt-offer-button.bopt-offer-button,
.bopt-product .bopt-add-to-cart.bopt-add-to-cart,
.bopt-shortcode-options .bopt-offer-button.bopt-offer-button,
.bopt-shortcode-options .bopt-add-to-cart.bopt-add-to-cart,
.woocommerce .bopt-product .bopt-offer-button.bopt-offer-button,
.woocommerce .bopt-product .bopt-add-to-cart.bopt-add-to-cart,
.bopt-product .bopt-offer-button,
.bopt-product .bopt-add-to-cart,
.bopt-shortcode-options .bopt-offer-button,
.bopt-shortcode-options .bopt-add-to-cart {
	background: var( --bopt-cta-bg, #111 ) !important;
	background-color: var( --bopt-cta-bg, #111 ) !important;
	color: var( --bopt-cta-color, #fff ) !important;
	border-radius: var( --bopt-cta-radius, 2px ) !important;
	border: 0 !important;
}

.bopt-product .bopt-offer-button:hover,
.bopt-product .bopt-add-to-cart:hover,
.bopt-shortcode-options .bopt-offer-button:hover,
.bopt-shortcode-options .bopt-add-to-cart:hover {
	filter: brightness( 1.12 );
	background: var( --bopt-cta-bg, #111 ) !important;
	color: var( --bopt-cta-color, #fff ) !important;
}

/* Radio / select also obey the Styling tab, with theme armour. */
.bopt-product .bopt-radio,
.bopt-shortcode-options .bopt-radio {
	border: var( --bopt-radio-border-w, 1px ) solid var( --bopt-radio-border, #dcdcdc ) !important;
	border-radius: var( --bopt-radio-radius, 4px ) !important;
	background: var( --bopt-radio-bg, #fff ) !important;
	color: var( --bopt-radio-color, #111 ) !important;
	padding: var( --bopt-radio-pad-y, 12px ) var( --bopt-radio-pad-x, 14px ) !important;
}

.bopt-product .bopt-radio:has( input:checked ),
.bopt-shortcode-options .bopt-radio:has( input:checked ) {
	background: var( --bopt-radio-sel-bg, #fff ) !important;
	color: var( --bopt-radio-sel-color, #111 ) !important;
	border-color: var( --bopt-radio-sel-border, #111 ) !important;
}

.bopt-product .bopt-select,
.bopt-shortcode-options .bopt-select {
	border: var( --bopt-sel-border-w, 1px ) solid var( --bopt-sel-border, #c9c9c9 ) !important;
	border-radius: var( --bopt-sel-radius, 4px ) !important;
	background-color: var( --bopt-sel-bg, #fff ) !important;
	color: var( --bopt-sel-color, #111 ) !important;
	font-size: var( --bopt-sel-font-size, 15px ) !important;
	font-weight: var( --bopt-sel-font-weight, 400 ) !important;
	padding: var( --bopt-sel-pad-y, 10px ) var( --bopt-sel-pad-x, 12px ) !important;
	max-width: var( --bopt-sel-width, 340px ) !important;
}

.bopt-product .bopt-select:focus,
.bopt-shortcode-options .bopt-select:focus {
	border-color: var( --bopt-sel-focus, #111 ) !important;
	outline: none !important;
}

/* Radio marker colour. */
.bopt-product .bopt-radio input[type="radio"],
.bopt-shortcode-options .bopt-radio input[type="radio"] {
	accent-color: var( --bopt-radio-dot, #111 );
	margin-top: 2px;
}

/* ------------------------------------------------------------------
 * [bo_attribute] / [bo_count] - attribute preview for product cards
 * ---------------------------------------------------------------- */

.bopt-attr-sc {
	display: inline-flex;
	align-items: center;
	gap: var( --bopt-sc-gap, 6px );
	flex-wrap: wrap;
	line-height: 1;
	vertical-align: middle;
	font-family: var( --bopt-font, inherit );
	font-size: var( --bopt-sc-font-size, 13px );
	font-weight: var( --bopt-sc-font-weight, 400 );
	color: var( --bopt-sc-color, #666 );
}

.bopt-attr-sc__label {
	font-size: var( --bopt-sc-font-size, 13px );
	color: var( --bopt-sc-label-color, #333 );
}

.bopt-attr-sc__items {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.bopt-attr-sc__dot {
	display: inline-block;
	width: var( --bopt-sc-size, 16px );
	height: var( --bopt-sc-size, 16px );
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	border: 1px solid var( --bopt-sc-dot-border, #d5d5d5 );
	box-sizing: border-box;
	flex: 0 0 auto;
}

.bopt-attr-sc__chip {
	display: inline-block;
	padding: 2px 8px;
	font-size: var( --bopt-sc-font-size, 12px );
	border-radius: var( --bopt-btn-radius, 3px );
	border: 1px solid var( --bopt-btn-border, #ccc );
	color: var( --bopt-btn-color, #333 );
	background: var( --bopt-btn-bg, transparent );
}

.bopt-attr-sc__word {
	font-size: var( --bopt-sc-font-size, 13px );
	color: var( --bopt-sc-color, #666 );
}

.bopt-attr-sc__count {
	font-size: var( --bopt-sc-font-size, 13px );
	color: var( --bopt-sc-count-color, #111 );
	font-weight: var( --bopt-sc-count-weight, 600 );
}

.bopt-attr-sc__more {
	font-size: var( --bopt-sc-font-size, 13px );
	color: var( --bopt-sc-color, #666 );
}

.bopt-attr-sc__link,
.bopt-attr-sc__link:hover {
	text-decoration: none;
}

/* ------------------------------------------------------------------
 * Manual / datasheet download buttons
 * ---------------------------------------------------------------- */

.bopt-downloads {
	display: inline-flex;
	gap: var( --bopt-doc-gap, 10px );
	flex-wrap: wrap;
}

/*
 * The markup carries class="button" so the buttons inherit the theme's shape,
 * but that also lets rules like `.woocommerce a.button` (specificity 21) beat
 * a plain `.bopt-doc-button` (20) and repaint them in the theme colours.
 * Doubling the class and adding the anchor lifts us above that, and the
 * !important flags cover themes that use !important themselves.
 */
a.bopt-doc-button.bopt-doc-button,
a.bopt-doc-button.bopt-doc-button:visited,
.woocommerce a.bopt-doc-button.bopt-doc-button,
.bopt-downloads a.bopt-doc-button.bopt-doc-button,
.bopt-product a.bopt-doc-button.bopt-doc-button {
	background: var( --bopt-doc-bg, #fff ) !important;
	background-color: var( --bopt-doc-bg, #fff ) !important;
	background-image: none !important;
	color: var( --bopt-doc-color, #111 ) !important;
	border: var( --bopt-doc-border-w, 1px ) solid var( --bopt-doc-border, #c9c9c9 ) !important;
	border-radius: var( --bopt-doc-radius, 4px ) !important;
	font-size: var( --bopt-doc-font-size, 14px ) !important;
	font-weight: var( --bopt-doc-font-weight, 400 ) !important;
	padding: var( --bopt-doc-pad-y, 10px ) var( --bopt-doc-pad-x, 18px ) !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	line-height: 1.2 !important;
	width: auto !important;
	height: auto !important;
}

a.bopt-doc-button.bopt-doc-button:hover,
a.bopt-doc-button.bopt-doc-button:focus,
.woocommerce a.bopt-doc-button.bopt-doc-button:hover,
.bopt-downloads a.bopt-doc-button.bopt-doc-button:hover,
.bopt-product a.bopt-doc-button.bopt-doc-button:hover {
	background: var( --bopt-doc-hover-bg, #111 ) !important;
	background-color: var( --bopt-doc-hover-bg, #111 ) !important;
	color: var( --bopt-doc-hover-color, #fff ) !important;
	border-color: var( --bopt-doc-hover-border, #111 ) !important;
}

.bopt-doc-button,
.bopt-doc-button:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var( --bopt-font, inherit );
	font-size: var( --bopt-doc-font-size, 14px );
	font-weight: var( --bopt-doc-font-weight, 400 );
	padding: var( --bopt-doc-pad-y, 10px ) var( --bopt-doc-pad-x, 18px );
	background: var( --bopt-doc-bg, #fff );
	color: var( --bopt-doc-color, #111 );
	border: var( --bopt-doc-border-w, 1px ) solid var( --bopt-doc-border, #c9c9c9 );
	border-radius: var( --bopt-doc-radius, 4px );
	text-decoration: none;
	line-height: 1.2;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.bopt-doc-button:hover,
.bopt-doc-button:focus {
	background: var( --bopt-doc-hover-bg, #111 );
	color: var( --bopt-doc-hover-color, #fff );
	border-color: var( --bopt-doc-hover-border, #111 );
}

.bopt-doc-button::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	/* Inline SVG download arrow - no external request. */
	background-image: url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.5v9'/%3E%3Cpath d='M4.5 7.5 8 11l3.5-3.5'/%3E%3Cpath d='M2 13.5h12'/%3E%3C/svg%3E" );
}


/* ------------------------------------------------------------------
 * Typography (Styling tab -> Schrift)
 * ---------------------------------------------------------------- */

.bopt-product,
.bopt-attr-sc,
.bopt-downloads,
.bopt-offer-modal {
	font-family: var( --bopt-font, inherit );
	font-weight: var( --bopt-font-weight, 400 );
}

/*
 * The per-type controls keep their own weight, so they must win over the
 * global one above.
 */
.bopt-product .bopt-swatch__text { font-weight: var( --bopt-btn-font-weight, 400 ); }
.bopt-product .bopt-radio        { font-weight: var( --bopt-radio-font-weight, 400 ); }
.bopt-product .bopt-select       { font-weight: var( --bopt-sel-font-weight, 400 ); }

.bopt-attr-sc__select {
	font-family: var( --bopt-font, inherit );
	font-size: var( --bopt-sel-font-size, 15px );
	font-weight: var( --bopt-sel-font-weight, 400 );
	background: var( --bopt-sel-bg, #fff );
	color: var( --bopt-sel-color, #111 );
	border: var( --bopt-sel-border-w, 1px ) solid var( --bopt-sel-border, #c9c9c9 );
	border-radius: var( --bopt-sel-radius, 4px );
	padding: var( --bopt-sel-pad-y, 10px ) var( --bopt-sel-pad-x, 12px );
	max-width: 100%;
}

.bopt-attr-sc__select:focus {
	border-color: var( --bopt-sel-focus, #111 );
	outline: none;
}