/**
 * Advanced Product Fields image swatches styled like Woodmart's single
 * product swatches (round, large, ringed: Woodmart "style 2"). The swatch
 * name shows in a tooltip on hover; assets/js/product-options.js puts the
 * chosen name beside the field label.
 *
 * Every selector starts with APF's .wapf wrapper: APF prints its own
 * stylesheet later (priority 5000) with rules of equal weight, such as
 * width: 100% on each swatch, which would otherwise win.
 */
.wapf .wapf-field-image-swatch {
	--eux-rq-swatch: 45px;
}

.wapf .wapf-field-image-swatch .wapf-image-swatch-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
}

.wapf .wapf-field-image-swatch .wapf-swatch--image {
	flex: 0 0 auto;
	width: var(--eux-rq-swatch);
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: visible;
}

/* APF's frame for that class, which would draw a square round the selected swatch. */
.wapf .wapf-field-image-swatch .wapf-swatch--image.apf-pick-box,
.wapf .wapf-field-image-swatch .wapf-swatch--image.apf-pick-box.wapf-checked {
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* The tooltip is centred on this box, so it must be exactly the swatch's size. */
.wapf .wapf-field-image-swatch .wapf-swatch--image label {
	position: relative;
	display: block;
	width: var(--eux-rq-swatch);
	height: var(--eux-rq-swatch);
}

/*
 * The ringed box round the image. Matched by position rather than by APF's
 * apf-pick-box class: some fields (e.g. the MLE colours) carry that class on
 * the outer swatch instead, which left their swatches square.
 */
.wapf .wapf-field-image-swatch .wapf-swatch--image label > div:not(.wapf-swatch-label) {
	width: var(--eux-rq-swatch);
	height: var(--eux-rq-swatch);
	box-sizing: border-box;
	padding: 4px;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: 0 0 0 1px var(--brdcolor-gray-200, rgba(0, 0, 0, .105)) inset;
	transition: box-shadow .25s ease;
}

.wapf .wapf-field-image-swatch .wapf-swatch--image label > div:not(.wapf-swatch-label) img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

@media (hover: hover) {
	.wapf .wapf-field-image-swatch .wapf-swatch--image:hover label > div:not(.wapf-swatch-label) {
		box-shadow: 0 0 0 1px var(--color-gray-900, #242424) inset;
	}
}

.wapf .wapf-field-image-swatch .wapf-swatch--image.wapf-checked label > div:not(.wapf-swatch-label) {
	box-shadow: 0 0 0 2px var(--color-gray-900, #242424) inset;
}

.wapf .wapf-field-image-swatch .wapf-swatch--image input:focus-visible + div {
	outline: 2px solid var(--color-gray-900, #242424);
	outline-offset: 2px;
}

/* Name tooltip above the swatch. */
.wapf .wapf-field-image-swatch .wapf-swatch--image .wapf-swatch-label {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 5;
	padding: 6px 10px;
	background: var(--color-gray-900, #242424);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, 4px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.wapf .wapf-field-image-swatch .wapf-swatch--image .wapf-swatch-label:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border: 5px solid transparent;
	border-top-color: var(--color-gray-900, #242424);
}

@media (hover: hover) {
	.wapf .wapf-field-image-swatch .wapf-swatch--image:hover .wapf-swatch-label {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
	}
}

/* Chosen value beside the field label, as Woodmart does for attributes. */
.wapf .wapf-field-label .eux-rq-swatch-value:not(:empty):before {
	content: ": ";
}

.wapf .wapf-field-label .eux-rq-swatch-value {
	font-weight: 400;
}

/* Specs in a field's description (fabric material, weight and so on): a
   compact two-column list under the swatches instead of loose bullets. */
.wapf .wapf-field-description {
	margin-top: 14px;
}

.wapf .wapf-field-description ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 24px;
	margin: 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--brdcolor-gray-200, rgba(0, 0, 0, .105));
	list-style: none;
}

.wapf .wapf-field-description li {
	margin: 0;
	color: var(--color-gray-500, #767676);
	font-size: 13px;
	line-height: 1.5;
}

.wapf .wapf-field-description li b,
.wapf .wapf-field-description li strong {
	color: var(--color-gray-900, #242424);
	font-weight: 500;
}

@media (max-width: 575px) {
	.wapf .wapf-field-description ul {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Totals: label left, amount right, grand total ruled off. When the chosen
   options add nothing, only the grand total shows (see product-options.js). */
.wapf .wapf-product-totals .wapf--inner > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 3px 0;
	color: var(--color-gray-500, #767676);
	font-size: 14px;
}

.wapf .wapf-product-totals .wapf--inner > div:last-child {
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--brdcolor-gray-200, rgba(0, 0, 0, .105));
	color: var(--color-gray-900, #242424);
	font-size: 16px;
	font-weight: 600;
}

.wapf .wapf-product-totals.eux-rq-no-option-cost .wapf--inner > div:not(:last-child) {
	display: none;
}

.wapf .wapf-product-totals.eux-rq-no-option-cost .wapf--inner > div:last-child {
	margin-top: 0;
}

/* Colours accordion (includes/product-options.php): ruled rows like Woodmart's
   accordions, with a chevron that turns when open. */
.eux-rq-colours {
	margin-bottom: 20px;
	border-top: 1px solid var(--brdcolor-gray-200, rgba(0, 0, 0, .105));
	border-bottom: 1px solid var(--brdcolor-gray-200, rgba(0, 0, 0, .105));
}

.eux-rq-colours > .eux-rq-colours-title {
	position: relative;
	display: block;
	padding: 15px 30px 15px 0;
	color: var(--color-gray-900, #242424);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}

.eux-rq-colours > .eux-rq-colours-title::-webkit-details-marker {
	display: none;
}

.eux-rq-colours > .eux-rq-colours-title::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 4px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform .4s cubic-bezier(.4, 0, .2, 1), margin-top .4s cubic-bezier(.4, 0, .2, 1);
}

.eux-rq-colours[open] > .eux-rq-colours-title::after {
	margin-top: -2px;
	transform: rotate(-135deg);
}

/* While the content slides shut (product-options.js), the chevron turns back straight away. */
.eux-rq-colours[open].eux-rq-closing > .eux-rq-colours-title::after {
	margin-top: -6px;
	transform: rotate(45deg);
}

.eux-rq-colours > .eux-rq-colours-title:focus-visible {
	outline: 2px solid var(--wd-primary-color, #323438);
	outline-offset: 2px;
}

.eux-rq-colours-content {
	padding-bottom: 10px;
}

/* Short description Show more / Show less: a plain underlined text button. */
.eux-rq-excerpt .eux-rq-excerpt-short p,
.eux-rq-excerpt .eux-rq-excerpt-full > :last-child {
	margin-bottom: 8px;
}

button.eux-rq-excerpt-toggle {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--color-gray-900, #242424);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
	text-transform: none;
	text-underline-offset: 3px;
}

button.eux-rq-excerpt-toggle:hover,
button.eux-rq-excerpt-toggle:focus {
	background: none;
	color: var(--wd-primary-color, #323438);
	text-decoration: underline;
}

/* Gallery: no "Click to enlarge" button; clicking an image opens it full screen. */
.woocommerce-product-gallery .product-additional-galleries .wd-show-product-gallery-wrap {
	display: none;
}

/* Full screen (PhotoSwipe): cut-out PNGs sit on white, not the black screen. */
.single-product .pswp__img {
	background: #fff;
}

/* Description and Additional information: Woodmart's product tabs shown as an
   accordion in the summary (theme options), styled like the Colours accordion. */
.summary .woocommerce-tabs.wd-accordion.wd-style-default > .wd-accordion-item {
	border-top: 0;
	border-bottom: 1px solid var(--brdcolor-gray-200, rgba(0, 0, 0, .105));
}

.summary .woocommerce-tabs.wd-accordion.wd-style-default > .wd-accordion-item:first-child {
	border-top: 1px solid var(--brdcolor-gray-200, rgba(0, 0, 0, .105));
}

.summary .woocommerce-tabs.wd-accordion .wd-accordion-title-text {
	color: var(--color-gray-900, #242424);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
}

.summary .woocommerce-tabs.wd-accordion .wd-accordion-opener {
	color: var(--color-gray-900, #242424);
	font-size: 12px;
}

/* The accordions run straight on into Colours as one ruled list. */
.summary:has(.eux-rq-colours) .woocommerce-tabs.tabs-layout-accordion {
	margin-bottom: 0;
}

.summary .woocommerce-tabs.tabs-layout-accordion ~ form.cart .eux-rq-colours,
form.cart > .woocommerce-tabs.tabs-layout-accordion + .eux-rq-colours {
	border-top: 0;
}

/* The summary's sections inside the add-to-cart form (product-options.php)
   take the full width; the accordions still run on into Colours. */
form.cart:has(> .eux-rq-quote-bar) > * {
	flex: 1 1 100%;
}

form.cart > .woocommerce-tabs.tabs-layout-accordion + .eux-rq-colours {
	margin-top: -10px;
}

form.cart > .eux-ts {
	margin-bottom: 10px;
}

form.cart > .product_meta {
	margin-bottom: 0;
}

/* Additional information: a label sits level with the first line of a value
   that wraps, rather than centred against it. */
.shop_attributes .woocommerce-product-attributes-item {
	align-items: baseline;
}

/* Product summary with Woodmart's sticky details on: kept in view beside the
   gallery and capped to the window, it scrolls on its own, so long option
   lists are reached without scrolling the whole gallery. Woodmart's sticky
   kit stops sticking a column taller than the window, so the cap and the
   sticking don't depend on it. The scrollbar sits in the column gap. */
@media (min-width: 1025px) {
	.single-product-page.wd-sticky-on .entry-summary .summary-inner {
		position: sticky;
		top: var(--eux-rq-summary-top, 150px);
		max-height: calc(100vh - var(--eux-rq-summary-top, 150px) - 20px);
		margin-inline-end: -14px;
		padding-inline-end: 14px;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: rgba(0, 0, 0, .15) transparent;
	}

	/* Safari, which doesn't take scrollbar-color. */
	.single-product-page.wd-sticky-on .entry-summary .summary-inner::-webkit-scrollbar {
		width: 6px;
	}

	.single-product-page.wd-sticky-on .entry-summary .summary-inner::-webkit-scrollbar-thumb {
		border-radius: 3px;
		background: rgba(0, 0, 0, .15);
	}

	/* Grand total, quantity and Add to Quote held at the bottom of the column
	   while the content above them scrolls (logged-in customers), with the
	   content fading out above (product-options.js marks it pinned). The bar
	   ends the form, which holds the summary's sections, so it can stick. */
	body:not(.eux-rq-no-prices) .single-product-page.wd-sticky-on .entry-summary .summary-inner .eux-rq-quote-bar {
		position: sticky;
		bottom: 0;
		z-index: 6;
		padding: 16px 0;
		background: var(--bgcolor-white, #fff);
	}

	body:not(.eux-rq-no-prices) .single-product-page.wd-sticky-on .entry-summary .summary-inner .eux-rq-quote-bar.eux-rq-pinned::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 40px;
		background: linear-gradient(to top, var(--bgcolor-white, #fff), rgba(255, 255, 255, 0));
		pointer-events: none;
	}
}

/* The descriptions open to their full length: Woodmart caps each accordion
   panel at 250px with a scroll of its own. */
.summary .woocommerce-tabs.wd-accordion .wd-scroll-content {
	max-height: none;
	overflow: visible;
}

/* Headings in the description (Design Notes, Features, Dimensions). */
.summary .woocommerce-Tabs-panel--description h3 {
	font-size: 20px;
}

/* Quantity and Add to Quote (includes/product-options.php): a tall,
   full-width button with the quantity box beside it. */
form.cart .eux-rq-quote-bar {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

/* The totals head the bar. */
form.cart .eux-rq-quote-bar > .wapf-product-totals {
	flex: 1 1 100%;
}

form.cart .eux-rq-quote-bar .quantity {
	flex: 0 0 auto;
	height: 56px;
	margin: 0;
}

form.cart .eux-rq-quote-bar .quantity input {
	height: 100%;
}

form.cart .eux-rq-quote-bar .single_add_to_cart_button {
	flex: 1 1 auto;
	min-height: 56px;
	margin: 0;
	letter-spacing: 2px;
}