/**
 * PhotoCab single product page.
 *
 * Covers the pieces of the product summary that the prototype
 * ("PhotoCab Product (offline).html") styles differently from Blocksy:
 * the quantity stepper, the payment-methods panel, and the variation
 * swatches in the summary.
 *
 * The related-products carousel is NOT here - its cards reuse
 * assets/css/product-card.css, which covers the slider layout too.
 *
 * Numbers come from the prototype; see assets/css/tokens.css.
 */

/* ------------------------------------------------------------ Quantity -- */

/*
 * Blocksy's "type-2" stepper: a bordered <input> with two absolutely
 * positioned .ct-increase / .ct-decrease spans laid over it. That shape
 * already matches the prototype, so only the skin is restated - the
 * geometry of the two buttons is left to Blocksy.
 */
.quantity {
	background: var(--pc-surface);
	border-radius: var(--pc-radius-ctl);
}

.quantity input.qty {
	background: transparent;
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	font-weight: var(--pc-fw-regular);
	color: var(--pc-ink-900);
	text-align: center;
}

.ct-product-add-to-cart .quantity input.qty {
	height: 48px;
	font-size: var(--pc-fs-price);
}

.quantity input.qty:focus {
	border-color: var(--pc-accent-500);
	outline: none;
}

.quantity :is(.ct-increase, .ct-decrease) {
	color: var(--pc-ink-600);
	cursor: pointer;
	transition: color var(--pc-dur-base) ease;
}

.quantity :is(.ct-increase, .ct-decrease):hover {
	color: var(--pc-accent-500);
}

/* ------------------------------------------------------------- Payment -- */

/*
 * Icon sizes are deliberately untouched: the prototype draws them at 42px
 * and the site renders 64px containers, but that was called out as
 * intentional, so only the panel around them is restyled.
 */
fieldset.ct-payment-methods {
	gap: var(--pc-space-3);
	padding: var(--pc-space-4) var(--pc-space-5);
	background: var(--pc-surface);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-card);
}

fieldset.ct-payment-methods legend {
	padding: 0;
	font-size: 11px;
	font-weight: var(--pc-fw-regular);
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pc-ink-400);
}

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

/*
 * `.wpclv-attributes-single` is what WPC Linked Variation puts on the
 * summary block; the archive/slider cards carry `-archive` instead. That
 * suffix is the only thing separating the two, and it keeps these larger
 * swatches from leaking into the card styles and vice versa.
 *
 * The prototype uses much bigger controls here than on a card: a 62px
 * tile for a colour and a 48x38 chip for a paper option.
 *
 * SPECIFICITY: two other stylesheets already style these terms -
 * the plugin's own frontend.css (`.wpclv-attributes .wpclv-terms
 * .wpclv-term...`, up to 4 classes) and phc-frontend.css from the
 * photocab-settings plugin (`.summary .wpclv-attributes .wpclv-terms
 * .wpclv-term.wpclv-term-image`, 5 classes, which is what currently sets
 * the 80px tile and the green active border). The doubled-up
 * `.wpclv-attributes.wpclv-attributes-single` prefix below simply outruns
 * both without reaching for !important. If the swatch rules in
 * photocab-settings are ever removed, this prefix can be shortened.
 */

.sale-price {
	align-items: flex-end;
	line-height: 1.375em;
	gap: 8px;
}

.sale-price del {
	font-size: calc(16/28 * 100%);
	opacity: 0.6;
	font-weight: 400;
	line-height: 1.75em;
}

.product .entry-summary-items .ct-module-title {
	font-size: var(--pc-fs-label);
	font-weight: 500;
	margin-bottom: 8px;
}

.summary .wpclv-attributes.wpclv-attributes-single {
	display: flex;
	flex-direction: column;
	gap: calc(var(--pc-space-4) * 1.5);
	margin: 0 0 calc(var(--pc-space-4) * 1.5);
}

.summary .wpclv-attributes.wpclv-attributes-single .wpclv-attribute {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-2);
	margin: 0;
}

.summary .wpclv-attributes.wpclv-attributes-single .wpclv-attribute-label {
	font-size: var(--pc-fs-label);
	line-height: 1.3;
	letter-spacing: var(--pc-ls-label);
	color: var(--pc-ink-600);
}

.summary .wpclv-attributes.wpclv-attributes-single .wpclv-terms {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.summary .wpclv-attributes.wpclv-attributes-single .wpclv-terms .wpclv-term {
	flex: 0 0 auto;
	margin: 0;
	background: var(--pc-surface);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	cursor: pointer;
	transition: border-color var(--pc-dur-base) ease, color var(--pc-dur-base) ease;
}

/* ---- Colour tiles ---- */

.summary .wpclv-attributes.wpclv-attributes-single .wpclv-terms .wpclv-term.wpclv-term-image {
	width: 62px;
	height: 62px;
	padding: 4px;
	/*overflow: hidden;*/
	line-height: 0;
}

/* Both wrappers, spelled out. A relative selector like `> span` is invalid
   inside :is(), and the list is forgiving - the branch was dropped without a
   word, so only linked swatches were sized. The active one is wrapped in a
   plain <span>, kept the plugin's `height: auto`, and grew past its tile. */
.summary .wpclv-attributes.wpclv-attributes-single .wpclv-term-image a,
.summary .wpclv-attributes.wpclv-attributes-single .wpclv-term-image span {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
	background-color: var(--pc-surface);
}

.summary .wpclv-attributes.wpclv-attributes-single .wpclv-term-image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: 0;
	object-fit: contain;
	opacity: 0.7;
	transition: opacity var(--pc-dur-base) ease, transform var(--pc-dur-base) ease;
}

.summary .wpclv-attributes.wpclv-attributes-single .wpclv-term-image:hover img,
.summary .wpclv-attributes.wpclv-attributes-single .wpclv-term-image.active img {
	opacity: 1;
}

.summary .wpclv-attributes.wpclv-attributes-single .wpclv-term-image:hover img {
	transform: scale(1.06);
}

body :is(.product:has([data-gallery]),.ct-quick-view-card) .product_meta>span:not(:last-child) {
	margin-bottom: 8px;
	display: flex;
	gap: 8px;
}

body :is(.product:has([data-gallery]),.ct-quick-view-card) .product_meta>span {
	font-size: var(--pc-fs-old);
	letter-spacing: 0.04em;
	font-weight: 500;
}

body :is(.product:has([data-gallery]),.ct-quick-view-card) .product_meta>span>* {
	opacity: 1;
	font-weight: 400;
	--theme-link-initial-color: var(--pc-ink-400);
}

/* Hover gets a lighter amber than the selected state, so the two read
   differently when the pointer is over an unselected tile. */
.summary .wpclv-attributes.wpclv-attributes-single .wpclv-terms .wpclv-term.wpclv-term-image:hover {
	border: 1.5px solid var(--pc-accent-500);
}

.summary .wpclv-attributes.wpclv-attributes-single .wpclv-terms .wpclv-term.wpclv-term-image.active {
	border: 1.5px solid var(--pc-accent-500);
}

/* ---- Text chips (photo paper) ---- */

.summary .wpclv-attributes.wpclv-attributes-single .wpclv-terms .wpclv-term:not(.wpclv-term-image) {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 38px;
	padding: 0;
	font-size: var(--pc-fs-card);
	font-weight: var(--pc-fw-regular);
	letter-spacing: var(--pc-ls-label);
	line-height: 1;
	color: var(--pc-ink-600);
}

.summary .wpclv-attributes.wpclv-attributes-single .wpclv-terms .wpclv-term:not(.wpclv-term-image) a,
.summary .wpclv-attributes.wpclv-attributes-single .wpclv-terms .wpclv-term:not(.wpclv-term-image) span {
	background: unset;
	padding: 0 12px;
}

.summary .wpclv-attributes.wpclv-attributes-single .wpclv-term:not(.wpclv-term-image) a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: inherit;
}

.summary .wpclv-attributes.wpclv-attributes-single .wpclv-terms .wpclv-term:not(.wpclv-term-image):hover {
	border-color: var(--pc-accent-500);
	color: var(--pc-accent-500);
}

.summary .wpclv-attributes.wpclv-attributes-single .wpclv-terms .wpclv-term:not(.wpclv-term-image).active {
	border: 1.5px solid var(--pc-accent-500);
	color: var(--pc-accent-500);
	font-weight: var(--pc-fw-medium);
}

/* ---- Overflow counter ---- */

.summary .wpclv-attributes.wpclv-attributes-single .wpclv-more {
	display: flex;
	align-items: center;
	height: auto;
	margin: 0;
	float: none;
	padding: 0;
	font-size: var(--pc-fs-label);
	line-height: 1.3;
	letter-spacing: var(--pc-ls-label);
	color: var(--pc-ink-600);
	white-space: nowrap;
}

.summary .wpclv-attributes.wpclv-attributes-single .wpclv-more a {
	color: inherit;
}

.summary .wpclv-attributes.wpclv-attributes-single .wpclv-more a:hover {
	color: var(--pc-accent-500);
}

@media (prefers-reduced-motion: reduce) {
	.summary .wpclv-attributes.wpclv-attributes-single .wpclv-term-image img,
	.summary .wpclv-attributes.wpclv-attributes-single .wpclv-terms .wpclv-term,
	.quantity :is(.ct-increase, .ct-decrease) {
		transition: none;
	}

	.summary .wpclv-attributes.wpclv-attributes-single .wpclv-term-image:hover img {
		transform: none;
	}
}

/* ----------------------------------------------------------- Share box -- */

/*
 * Swap Blocksy's share icons for the prototype's set.
 *
 * Blocksy hardcodes this icon markup in inc/components/social-box.php -
 * `blocksy_get_social_metadata()` returns a plain array and is not passed
 * through any filter, and `blocksy:social-box:dynamic-social-networks`
 * only *adds* networks rather than overriding the built-in ones. So the
 * swap is done in CSS: the original <svg> is hidden and the prototype
 * glyph is painted as a mask on .ct-icon-container.
 *
 * A mask (rather than a background-image) is what keeps `currentColor`
 * in play, so Blocksy's own idle/hover colouring still drives the icons
 * and nothing here has to restate them.
 *
 * Hooked on [data-network], which Blocksy prints on every share link -
 * stable and language-independent, unlike aria-label.
 *
 * Icon sizes follow the prototype, which varies them per glyph (18px for
 * Facebook and WhatsApp, 17px for X, Threads and the copy-link icon) so
 * they read as optically equal despite different viewBoxes.
 */

.ct-share-box a[data-network] .ct-icon-container > svg {
	display: none;
}

.ct-share-box a[data-network] .ct-icon-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ct-share-box a[data-network] .ct-icon-container::after {
	content: "";
	display: block;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.ct-share-box a[data-network="facebook"] .ct-icon-container::after {
	width: 18px;
	height: 18px;
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='black'><path d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='black'><path d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/></svg>");
}

.ct-share-box a[data-network="twitter"] .ct-icon-container::after {
	width: 17px;
	height: 17px;
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='black'><path d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='black'><path d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/></svg>");
}

.ct-share-box a[data-network="whatsapp"] .ct-icon-container::after {
	width: 18px;
	height: 18px;
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='black'><path d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-65.9-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.7z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='black'><path d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-65.9-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.7z'/></svg>");
}

.ct-share-box a[data-network="threads"] .ct-icon-container::after {
	width: 17px;
	height: 17px;
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='black'><path d='M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 13.7 50.6 34.5 61.8 60.3c15.7 35.8 17.1 94.1-30.4 141.5C333 476.7 288.9 493 231.4 493.4h-.3c-64.7-.4-114.4-22.1-147.8-64.3C53 391.1 37.3 338.2 36.7 271.6v-.1-.4C37.3 204.4 53 151.6 83.3 113.7c33.4-42.2 83.2-63.9 147.8-64.3h.3c64.8 .4 115.1 22 148.9 64.1 16.6 20.7 28.5 45.8 35.6 74.9l-38.9 9.7c-5.8-23.3-15-43.2-27.4-58.6-26.2-32.6-66.1-49.3-118.4-49.7-52 .4-91.3 17.1-116.7 49.4-23.8 30.3-36.1 74.1-36.6 130.2 .5 56.1 12.8 99.9 36.6 130.2 25.4 32.3 64.7 49 116.7 49.4 46.9-.4 77.9-11.4 103.7-36.7 29.4-28.9 28.9-64.4 19.5-86-5.5-12.7-15.6-23.3-29.1-31.4-3.4 24.2-11 43.8-22.9 58.6-15.8 19.7-38.3 30.5-66.8 32.1-21.6 1.2-42.4-3.9-58.6-14.4-19.1-12.5-30.3-31.6-31.5-53.8-1.2-21.6 7.4-41.5 24.1-56 16-13.8 38.5-21.9 65.1-23.4 19.6-1.1 37.9-.2 54.8 2.6-2.2-13.5-6.7-24.2-13.4-31.9-9.2-10.6-23.4-16-42.2-16.1h-.5c-15.1 0-35.6 4.2-48.7 23.7l-33.1-22.2c17.5-26.1 46-40.4 81.8-40.4h.8c59.9 .4 95.6 37 99.2 100.8zM185.9 320.6c1 18.7 21.3 27.4 40.9 26.3 19.2-1 40.9-8.5 44.6-53.9-12.2-2.7-25.7-4.1-40.1-4.1-4.1 0-8.1 .1-12.2 .4-29.4 1.6-33.9 15.9-33.2 31.3z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='black'><path d='M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 13.7 50.6 34.5 61.8 60.3c15.7 35.8 17.1 94.1-30.4 141.5C333 476.7 288.9 493 231.4 493.4h-.3c-64.7-.4-114.4-22.1-147.8-64.3C53 391.1 37.3 338.2 36.7 271.6v-.1-.4C37.3 204.4 53 151.6 83.3 113.7c33.4-42.2 83.2-63.9 147.8-64.3h.3c64.8 .4 115.1 22 148.9 64.1 16.6 20.7 28.5 45.8 35.6 74.9l-38.9 9.7c-5.8-23.3-15-43.2-27.4-58.6-26.2-32.6-66.1-49.3-118.4-49.7-52 .4-91.3 17.1-116.7 49.4-23.8 30.3-36.1 74.1-36.6 130.2 .5 56.1 12.8 99.9 36.6 130.2 25.4 32.3 64.7 49 116.7 49.4 46.9-.4 77.9-11.4 103.7-36.7 29.4-28.9 28.9-64.4 19.5-86-5.5-12.7-15.6-23.3-29.1-31.4-3.4 24.2-11 43.8-22.9 58.6-15.8 19.7-38.3 30.5-66.8 32.1-21.6 1.2-42.4-3.9-58.6-14.4-19.1-12.5-30.3-31.6-31.5-53.8-1.2-21.6 7.4-41.5 24.1-56 16-13.8 38.5-21.9 65.1-23.4 19.6-1.1 37.9-.2 54.8 2.6-2.2-13.5-6.7-24.2-13.4-31.9-9.2-10.6-23.4-16-42.2-16.1h-.5c-15.1 0-35.6 4.2-48.7 23.7l-33.1-22.2c17.5-26.1 46-40.4 81.8-40.4h.8c59.9 .4 95.6 37 99.2 100.8zM185.9 320.6c1 18.7 21.3 27.4 40.9 26.3 19.2-1 40.9-8.5 44.6-53.9-12.2-2.7-25.7-4.1-40.1-4.1-4.1 0-8.1 .1-12.2 .4-29.4 1.6-33.9 15.9-33.2 31.3z'/></svg>");
}

.ct-share-box a[data-network="clipboard"] .ct-icon-container::after {
	width: 17px;
	height: 17px;
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4'><rect x='6.2' y='6.2' width='9' height='9' rx='2'/><path d='M11.8 3.8H4.8a2 2 0 0 0-2 2v7' stroke-linecap='round'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.4'><rect x='6.2' y='6.2' width='9' height='9' rx='2'/><path d='M11.8 3.8H4.8a2 2 0 0 0-2 2v7' stroke-linecap='round'/></svg>");
}

/* ------------------------------------------------------------- Gallery -- */

/*
 * Thumbnail strip. Blocksy narrows the strip on phones - `--thumbs-width`
 * is 25% between 480px and 689.98px and 33.333% below 480px (see
 * woocommerce.min.css), i.e. four and three thumbs per row. The design
 * keeps the desktop count of five all the way down, so the theme's default
 * 20% is restored across both of those breakpoints.
 */
@media (max-width: 689.98px) {
	body .woocommerce-product-gallery li {
		--thumbs-width: 20%;
	}
}

/* -------------------------------------------------- Section spacing ----- */

/*
 * Blocksy spaces the blocks below the summary with its own generic
 * content rhythm, which reads tighter than the prototype. The tabs and
 * the related / up-sells carousels are pulled onto the shared 80px
 * scale token instead (64px on tablet, 48px on phones - see
 * assets/css/tokens.css).
 *
 * `:where()` keeps the two carousel selectors at zero specificity, so the
 * rule stays as easy to override as the child-theme default it replaces.
 */
.single-product article > :where(.related, .up-sells) {
	margin-top: var(--pc-space-20);
}

/* The tabs block carries its gap as padding, not margin. */
.product > .woocommerce-tabs {
	padding-top: var(--pc-space-20);
}