/*
 * Product page: summary column, variant buttons, stock, delivery line, specifications, videos and the phone
 * add-to-cart bar (inc/product.php, inc/variations.php, inc/product-video.php, assets/js/product.js).
 * Gallery, zoom and lightbox are Blocksy's (Customizer → WooCommerce → Single Product → Product Gallery).
 */

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

.single-product .entry-summary .product_title {
	font-size: var(--ca-text-h1);
	line-height: var(--ca-text-h1-line-height);
}

.single-product .entry-summary > .price,
.single-product .entry-summary .ct-product-price .price {
	color: var(--ca-text-primary);
	font-family: var(--ca-font-heading);
	font-size: var(--ca-text-h2);
	font-weight: 700;
	line-height: var(--ca-text-h2-line-height);
}

/* Sale prices: the old price is struck through and quieter; the new one is the price. (WooCommerce also
 * fades it to half opacity, which fails contrast.) */
.single-product :is(.entry-summary, .ca-sticky-buy) .price del {
	color: var(--ca-text-secondary);
	font-size: 0.7em;
	font-weight: 400;
	opacity: 1;
}

.single-product :is(.entry-summary, .ca-sticky-buy) .price ins {
	text-decoration: none;
}

/* WooCommerce repeats the chosen size's price under the buttons; product.js puts it in the main price
 * instead, so one price is shown. */
.single-product .woocommerce-variation-price {
	display: none;
}

/* Highlights: the short description, written as a bullet list, gets ticks. */
.woocommerce-product-details__short-description ul {
	display: grid;
	gap: var(--ca-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-product-details__short-description li {
	position: relative;
	padding-inline-start: calc(var(--ca-size-icon) + var(--ca-space-2));
}

.woocommerce-product-details__short-description li::before {
	position: absolute;
	inset-block-start: 0.2em;
	inset-inline-start: 0;
	width: var(--ca-size-icon);
	height: var(--ca-size-icon);
	background: var(--ca-status-success-icon);
	content: '';
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Delivery line, just under the price. */
.ca-delivery {
	display: flex;
	gap: var(--ca-space-2);
	align-items: flex-start;
	margin-block: calc(var(--ca-space-2) * -1) var(--ca-space-6);
	color: var(--ca-text-secondary);
	font-size: var(--ca-text-small);
	line-height: var(--ca-text-small-line-height);
}

.ca-delivery strong {
	color: var(--ca-text-primary);
}

.ca-delivery__icon {
	flex: none;
	width: var(--ca-size-icon-lg);
	height: var(--ca-size-icon-lg);
	color: var(--ca-text-link);
}

/* Stock: a coloured dot plus words, never colour alone. (.product raises these above Blocksy's own stock rules.) */
.single-product .product .entry-summary .stock {
	display: flex;
	gap: var(--ca-space-2);
	align-items: center;
	margin-block: 0 var(--ca-space-4);
	color: var(--ca-text-primary);
	font-weight: 600;
}

.single-product .product .entry-summary .stock::before {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: var(--ca-radius-full);
	background: var(--ca-status-success-icon);
	content: '';
}

.single-product .product .entry-summary .stock.available-on-backorder::before {
	background: var(--ca-status-warning-icon);
}

.single-product .product .entry-summary .stock.out-of-stock {
	color: var(--ca-status-error-text);
}

.single-product .product .entry-summary .stock.out-of-stock::before {
	background: var(--ca-status-error-icon);
}

/* Variant buttons ---------------------------------------------------------------------------------------- */

/* Each attribute is a row: its name above, the buttons below. */
.single-product form.variations_form table.variations,
.single-product form.variations_form table.variations :is(tbody, tr, th, td) {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
}

.single-product form.variations_form table.variations tr + tr {
	margin-block-start: var(--ca-space-4);
}

.single-product form.variations_form table.variations th.label {
	margin-block-end: var(--ca-space-2);
	font-weight: 600;
	text-align: start;
}

.ca-variation__options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ca-space-2);
}

/* .ca-variation raises this above Blocksy's "table.variations label { display: block }". */
.ca-variation .ca-variation__option {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	min-width: var(--ca-size-control);
	min-height: var(--ca-size-control);
	padding: var(--ca-space-2) var(--ca-space-4);
	border: var(--ca-border-width-control) solid var(--ca-border-strong);
	border-radius: var(--ca-radius-md);
	background: var(--ca-bg-surface);
	color: var(--ca-text-primary);
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}

/* The radio itself is invisible but still the thing that takes focus and clicks. */
.ca-variation__option input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: inherit;
}

.ca-variation__label {
	font-weight: 600;
}

.ca-variation__note,
.ca-variation__sub {
	color: var(--ca-text-secondary);
	font-size: var(--ca-text-caption);
}

/* Second size system ("EU 42" under "UK 8"). */
.ca-variation__sub {
	display: block;
	line-height: 1.2;
}

.ca-variation__option:hover {
	border-color: var(--ca-border-brand);
}

.ca-variation__option:has(input:checked) {
	border-color: var(--ca-border-brand);
	background: var(--ca-bg-brand);
	color: var(--ca-text-on-brand);
	box-shadow: inset 0 0 0 1px var(--ca-border-brand);
}

.ca-variation__option:has(input:checked) .ca-variation__note,
.ca-variation__option:has(input:checked) .ca-variation__sub {
	color: var(--ca-text-on-brand);
}

.ca-variation__option:has(input:focus-visible) {
	outline: var(--ca-border-width-focus) solid var(--ca-border-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--ca-border-focus-halo);
}

.ca-variation__option.is-out-of-stock .ca-variation__label {
	text-decoration: line-through;
}

.ca-variation__option:has(input:disabled) {
	border-style: dashed;
	color: var(--ca-text-secondary);
	cursor: not-allowed;
}

/* "Clear" link WooCommerce shows once a size is chosen. */
.single-product .reset_variations {
	display: inline-flex;
	align-items: center;
	min-height: var(--ca-size-control);
	color: var(--ca-text-link);
	font-size: var(--ca-text-small);
	text-decoration-line: underline;
}

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

/* Blocksy's single-product add-to-cart element sets 40px on phones; quantity and button are 48px everywhere. */
.single-product .entry-summary-items > .ct-product-add-to-cart > .cart {
	--theme-button-min-height: var(--ca-size-control);
	--quantity-height: var(--ca-size-control);
}

/* Before a size is chosen WooCommerce fades the button to half opacity, which fails contrast, yet it still
 * responds (with a "choose a size" message). Show it as the outlined secondary button instead. */
.single-product .entry-summary button.single_add_to_cart_button.disabled {
	border: var(--ca-border-width-control) solid var(--ca-action-secondary-border);
	background: var(--ca-action-secondary-bg);
	color: var(--ca-action-secondary-text);
	opacity: 1;
	cursor: pointer;
}

/* The gallery's zoom button. */
.single-product .woocommerce-product-gallery__trigger {
	width: var(--ca-size-control);
	height: var(--ca-size-control);
}

/* Sections below the summary --------------------------------------------------------------------------- */

/* Blocksy styles these headings like its small uppercase tab labels; here they're ordinary section headings. */
.single-product .woocommerce-tabs h2 {
	font-size: var(--ca-text-h3);
	font-weight: var(--ca-text-h3-weight);
	line-height: var(--ca-text-h3-line-height);
	letter-spacing: 0;
	text-transform: none;
}

/* Blocksy gives each block in these sections the page's content width, centred. The specs table and videos
 * are kept narrower but start at the same left edge as the text and headings. WordPress's layout rule centres
 * with "margin-left: auto !important", so only an !important start margin can move them. */
.single-product :is(.woocommerce-tabs .entry-content, .ca-callback-wrap) > :is(.woocommerce-product-attributes, .ca-video, .ca-callback) {
	--ca-section-width: min(var(--theme-container-width), var(--theme-block-max-width));
	width: min(var(--ca-container-narrow), var(--ca-section-width));
	max-width: none;
	margin-inline-start: calc((100% - var(--ca-section-width)) / 2) !important;
}

/* Specifications: label and value per row, striped so long tables are easy to follow. */
.woocommerce-product-attributes {
	width: 100%;
	max-width: var(--ca-container-narrow);
	border: var(--ca-border-width-thin) solid var(--ca-border-default);
	border-collapse: collapse;
}

.woocommerce-product-attributes :is(th, td) {
	padding: var(--ca-space-3) var(--ca-space-4);
	border: 0;
	border-block-end: var(--ca-border-width-thin) solid var(--ca-border-default);
	text-align: start;
	vertical-align: top;
}

.woocommerce-product-attributes th {
	width: 40%;
	font-weight: 600;
}

.woocommerce-product-attributes td p {
	margin: 0;
}

.woocommerce-product-attributes tr:nth-child(odd) :is(th, td) {
	background: var(--ca-bg-subtle);
}

/* Videos: the product photo with a play button until tapped, then the YouTube player. */
.ca-video {
	max-width: var(--ca-container-narrow);
	margin: 0 0 var(--ca-space-6);
}

.ca-video__play,
.ca-video__player {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 0;
	border-radius: var(--ca-radius-lg);
	background: var(--ca-bg-brand);
}

.ca-video__play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.8;
}

.ca-video__icon {
	position: absolute;
	inset: 50% auto auto 50%;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border: 3px solid var(--ca-neutral-0);
	border-radius: var(--ca-radius-full);
	background: var(--ca-bg-brand);
	color: var(--ca-text-on-brand);
	box-shadow: var(--ca-shadow-2);
	transform: translate(-50%, -50%);
}

.ca-video__icon svg {
	width: 32px;
	height: 32px;
	margin-inline-start: 4px;
}

.ca-video__play:hover .ca-video__icon {
	background: var(--ca-forest-700);
}

.ca-video__note {
	margin-block-start: var(--ca-space-2);
	color: var(--ca-text-secondary);
	font-size: var(--ca-text-small);
}

/* Call-only products, badges and brochures (inc/call-only.php) ----------------------------------------- */

/* Badges under the price: short tags such as "TAMS eligible". */
.ca-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ca-space-2);
	margin: calc(var(--ca-space-2) * -1) 0 var(--ca-space-6);
	padding: 0;
	list-style: none;
}

.ca-badges__item {
	padding: var(--ca-space-1) var(--ca-space-3);
	border: var(--ca-border-width-thin) solid var(--ca-border-brand);
	border-radius: var(--ca-radius-md);
	background: var(--ca-bg-brand-subtle);
	color: var(--ca-text-primary);
	font-size: var(--ca-text-small);
	font-weight: 600;
	line-height: var(--ca-text-small-line-height);
}

/* "Eligible for a TAMS grant: how TAMS grants work", under the badges. */
.ca-badges__note {
	margin-block: calc(var(--ca-space-3) * -1) var(--ca-space-6);
	font-size: var(--ca-text-small);
	line-height: var(--ca-text-small-line-height);
}

.ca-badges__note a {
	text-decoration: underline;
}

/* Call and callback buttons, where Add to cart would be. */
.ca-call-only {
	margin-block: var(--ca-space-6);
}

.ca-call-only > p {
	margin: 0;
}

.ca-call-only__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ca-space-3);
	margin-block: var(--ca-space-4) 0;
}

.ca-call-only__actions .button {
	display: inline-flex;
	flex: 1 1 14rem;
	align-items: center;
	justify-content: center;
	min-height: var(--ca-size-control);
}

.single-product .ca-call-only__actions .ca-call-only__callback {
	border: var(--ca-border-width-control) solid var(--ca-action-secondary-border);
	background: var(--ca-action-secondary-bg);
	color: var(--ca-action-secondary-text);
}

.single-product .ca-call-only__actions .ca-call-only__callback:hover {
	background: var(--ca-action-secondary-bg-hover);
}

.ca-call-only .ca-call-only__hours {
	margin-block-start: var(--ca-space-3);
	color: var(--ca-text-secondary);
	font-size: var(--ca-text-small);
	line-height: var(--ca-text-small-line-height);
}

/* The callback form, below the product's sections. */
.ca-callback-wrap {
	margin-block-start: var(--ca-space-12);
}

.ca-callback {
	padding: var(--ca-space-6);
	border-inline-start: var(--ca-border-width-accent) solid var(--ca-decor-gold);
	border-radius: var(--ca-radius-md);
	background: var(--ca-bg-brand-subtle);
	scroll-margin-block-start: var(--ca-space-6);
}

.ca-callback__title {
	margin-block: 0 var(--ca-space-2);
	font-size: var(--ca-text-h3);
	line-height: var(--ca-text-h3-line-height);
}

.ca-callback__lede {
	margin-block: 0 var(--ca-space-4);
}

.ca-callback__lede a {
	white-space: nowrap;
}

.ca-callback .wpforms-container {
	margin-block: 0;
}

/* Brochure link, at the end of Specifications. */
.ca-brochure {
	margin-block: var(--ca-space-4) 0;
}

.ca-brochure__link {
	display: inline-flex;
	gap: var(--ca-space-2);
	align-items: center;
	min-height: var(--ca-size-control);
	font-weight: 600;
}

.ca-brochure__link::before {
	flex: none;
	width: var(--ca-size-icon);
	height: var(--ca-size-icon);
	background: currentColor;
	content: '';
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v11m0 0-4.5-4.5M12 15l4.5-4.5M5 19h14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Phone add-to-cart bar ------------------------------------------------------------------------------- */

.ca-sticky-buy {
	position: fixed;
	inset: auto 0 var(--ca-cookie-notice-height, 0px);
	z-index: var(--ca-z-sticky);
	padding: var(--ca-space-3) var(--ca-space-4) calc(var(--ca-space-3) + env(safe-area-inset-bottom));
	border-block-start: var(--ca-border-width-thin) solid var(--ca-border-default);
	background: var(--ca-bg-surface);
	box-shadow: var(--ca-shadow-3);
}

.ca-sticky-buy[hidden] {
	display: none;
}

.ca-sticky-buy__inner {
	display: flex;
	gap: var(--ca-space-3);
	align-items: center;
}

.ca-sticky-buy__text {
	flex: 1;
	min-width: 0;
}

.ca-sticky-buy__text p {
	margin: 0;
}

.ca-sticky-buy__name {
	overflow: hidden;
	color: var(--ca-text-secondary);
	font-size: var(--ca-text-small);
	line-height: var(--ca-text-small-line-height);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ca-sticky-buy__price {
	color: var(--ca-text-primary);
	font-family: var(--ca-font-heading);
	font-weight: 700;
}

.ca-sticky-buy__price del {
	font-size: 0.8em;
}

.ca-sticky-buy__button {
	display: inline-flex;
	flex: none;
	align-items: center;
	min-height: var(--ca-size-control);
}

/* Gift cards ---------------------------------------------------------------------------------------------- */

/* The details sit above the quantity and Add to cart, across the full width (inc/gift-cards.php). */
.single-product .woocommerce-variation-add-to-cart:has(.ca-gift) {
	flex-wrap: wrap;
}

.ca-gift {
	flex-basis: 100%;
	margin-block-end: var(--ca-space-4);
}

.ca-gift__field {
	display: flex;
	flex-direction: column;
	gap: var(--ca-space-1);
	margin-block: 0 var(--ca-space-4);
}

.ca-gift__field label {
	font-weight: 600;
}

.ca-gift__field :is(input, textarea) {
	width: 100%;
}

.ca-gift__hint {
	color: var(--ca-text-secondary);
	font-size: var(--ca-text-small);
	line-height: var(--ca-text-small-line-height);
}

p.ca-gift__hint {
	margin-block: 0 var(--ca-space-4);
}