/* Art Set page -- mirrors the artwork pages' Size dropdown + Frame swatch row (smart-home-child/style.css). */

.tprs-set-field {
	margin: 0 0 16px;
}
.tprs-set-field__label {
	display: block;
	margin-bottom: 6px;
	font-weight: 400;
}
.tprs-set-form select {
	width: 100%;
	font-size: 16px;
}

.tprs-set-frames {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tprs-set-frames li {
	flex: 1 1 0;
	min-width: 0;
}
.tprs-set-frame {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: 4px 4px 6px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
	background: #fff;
	cursor: pointer;
}
.tprs-set-frame:hover {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.tprs-set-frame.is-selected {
	box-shadow: 0 0 0 2px #000;
}
.tprs-set-frame.is-disabled {
	opacity: 0.35;
	cursor: not-allowed;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.tprs-set-frame input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.tprs-set-frame input:focus-visible + .tprs-set-frame__image,
.tprs-set-frame input:focus-visible ~ .tprs-swatch-label {
	outline: 2px solid #000;
	outline-offset: 2px;
}
.tprs-set-frame__image {
	display: block;
	width: 100% !important;
	height: 60px !important;
	object-fit: cover;
}
.tprs-set-frame .tprs-swatch-label {
	display: block;
	width: 100%;
	margin-top: 4px;
	min-height: 2.6em;
	font-size: 13px;
	line-height: 1.3;
	text-align: center;
}


.tprs-set-actions {
	display: flex;
	gap: 8px;
	align-items: stretch;
}
.tprs-set-actions .single_add_to_cart_button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Artwork page: "This print is also available as a set: ..." line under the add-to-cart form. */
.tprs-set-crosslink {
	margin: 12px 0 0;
	font-size: 14px;
}
.tprs-set-crosslink a {
	text-decoration: underline;
}

/* Set price in the product page's price field: set price, then the full price struck
   through, then a "Save X%" badge -- laid out as a flex row so the (smaller) badge is
   centred vertically against the prices rather than sitting on the text baseline.
   Selectors are deliberately specific enough to beat the site's Simple CSS
   "Afterpay position" rule (.thb-product-detail .product-information .price>span
   { display: inherit }), which otherwise also applies to these spans. */
.thb-product-detail .product-information .price > span.price.tprs-set-price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 6px;
}
/* The Afterpay rule also overrides the theme's .screen-reader-text { display: none },
   which would show "Current price is: ..." on the page. Keep it for screen readers only. */
.thb-product-detail .product-information .price > span.price.tprs-set-price > span.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.tprs-set-price del {
	margin-left: 8px; /* the theme styles ins/del (no underline, faded strike-through); this just spaces them */
}
/* Selector specificity matters: the site's Simple CSS has an "Afterpay position" rule,
   .thb-product-detail .product-information .price>span { display: inherit }, which would
   otherwise make the badge inherit the price's display:block and stretch full width. */
.thb-product-detail .product-information .price > span.tprs-save-badge,
.tprs-save-badge {
	display: inline-block;
	width: auto;
	margin-left: 10px;
	padding: 3px 8px;
	border-radius: 2px;
	background: #c62828;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
	vertical-align: middle; /* fallback if the flex row above doesn't apply */
	white-space: nowrap;
}