/* Product page: WooCommerce's single product (S:1021-1126). Breakpoints S:42-47 (1100) and S:52-58 (720). */

.sv-product > *,
.sv-product-main > *,
.sv-product-buy > *,
.sv-product-lower > * { margin-block: 0; }

/* Breadcrumbs (S:1025): mono 12px. ink-600, the nearest AA shade to the prototype's ink-500 at 12px (Chris, 17 Oct). */
.sv-product .sv-crumbs {
	max-width: none;
	padding: 32px var(--pg) 0;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-600);
}
.sv-product .sv-crumbs a { color: inherit; text-decoration: none; }
.sv-product .sv-crumbs a:hover { text-decoration: underline; }
@media (max-width: 720px) { .sv-product .sv-crumbs a { display: inline-flex; align-items: center; min-height: 44px; } }   /* 44px targets, §4 */
.sv-product .sv-notices { max-width: none; padding: 0 var(--pg); }
.sv-product .sv-notices .woocommerce-notices-wrapper:not(:empty) { margin-top: 16px; }

/* Main grid (S:1028): 1fr 520px, gap 44px; one column at <=1100. */
.sv-product-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 520px;
	gap: 44px;
	align-items: start;
	padding: 28px var(--pg) 0;
}
@media (max-width: 1100px) { .sv-product-main { grid-template-columns: minmax(0, 1fr); } }

/* Gallery (S:1029-1040): a contain stage, min(600px, 41.7vw) tall, then 98x78 thumbnails 12px apart (thumbStyle S:3796). */
.sv-gallery.wc-block-product-gallery { gap: 12px; }
.sv-gallery .wc-block-product-gallery-large-image { height: min(600px, 41.7vw); }
@media (max-width: 1100px) { .sv-gallery .wc-block-product-gallery-large-image { height: min(520px, 72vw); } }
.sv-gallery .wc-block-product-gallery-large-image__container,
.sv-gallery .wc-block-product-gallery-large-image__wrapper { height: 100%; }
.sv-gallery .wc-block-product-gallery-large-image__wrapper { aspect-ratio: auto; }
.sv-gallery .wc-block-product-gallery-large-image img { box-sizing: border-box; padding: 22px; background: none; }
.sv-gallery .wc-block-next-previous-buttons__button {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid var(--sv-stroke-hair);
	background: rgba(255, 255, 255, .7);
	color: var(--wp--preset--color--ink-700);
}
.sv-gallery .wc-block-product-gallery-thumbnails.wc-block-product-gallery-thumbnails {
	height: auto;
	width: 100%;
	aspect-ratio: auto !important;   /* WooCommerce sets 5/1 !important at <=600px */
	order: 0;
	mask-image: none;
}
.sv-gallery .wc-block-product-gallery-thumbnails__scrollable { flex-wrap: wrap; gap: 12px; height: auto; overflow: visible; }
.sv-gallery .wc-block-product-gallery-thumbnails__thumbnail { flex: none; width: 98px; height: 78px; }
.sv-gallery .wc-block-product-gallery-thumbnails__thumbnail__image.wc-block-product-gallery-thumbnails__thumbnail__image {
	box-sizing: border-box;
	width: 98px;
	height: 78px;
	max-width: none;
	max-height: none;
	padding: 6px;
	object-fit: contain;
	border-radius: 16px;
	border: 1px solid rgba(114, 115, 116, .3);
	background: rgba(255, 255, 255, .26);
	filter: none;
	transition: background-color 320ms, border-color 320ms;
}
.sv-gallery .wc-block-product-gallery-thumbnails__thumbnail__image--is-active.wc-block-product-gallery-thumbnails__thumbnail__image--is-active {
	border: 1.5px solid #4DC5D5;
	background: rgba(255, 255, 255, .6);
}

/* Buy column (S:1042-1095). */
.sv-product .sv-product-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(26px, 3.1vw, 44px);
	line-height: 1.05;
	letter-spacing: -.025em;
	color: var(--wp--preset--color--ink-900);
}
.sv-product .sv-product-blurb { margin-top: 16px; }
.sv-product .sv-product-blurb > * { margin: 0; font-size: 17.5px; line-height: 1.62; color: var(--wp--preset--color--ink-700); }

.sv-product .sv-product-price { margin-top: 26px; }
.sv-product .sv-product-price .wc-block-components-product-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 16px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	font-size: clamp(30px, 3.9vw, 56px);
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--ink-900);
	font-variant-numeric: tabular-nums;
}
.sv-product .sv-product-price .woocommerce-price-suffix {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: 0;
	color: var(--wp--preset--color--ink-600);   /* AA shade for the prototype's ink-500 */
}

.sv-product .sv-choose { margin-top: 30px; }
.sv-product .sv-choose-label { margin: 0 0 12px; font-size: 12px; color: var(--wp--preset--color--ink-900); }

/* Add to cart (cyan pill, flex 1) and Request a quote (S:1076-1079). The quantity is not on the product page in the
   design (the cart has the stepper); the field stays in the form, hidden, at 1. */
.sv-product .sv-product-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 26px; }
.sv-product .sv-atc { flex: 1 1 220px; margin: 0; }
.sv-product .sv-atc form.cart { position: relative; display: flex; flex-wrap: wrap; gap: 12px 0; margin: 0; }   /* one visible item per row: the no-JS fieldset, then the button */
.sv-product .sv-atc form.cart .quantity,
.sv-product .sv-atc form.cart::before,
.sv-product .sv-atc form.cart::after { display: none; }
.sv-product .sv-atc .single_add_to_cart_button,
.sv-product .sv-quote-link .wp-block-button__link {
	box-sizing: border-box;
	min-height: 44px;
	padding: 17px;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12.5px;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.sv-product .sv-atc form.cart .single_add_to_cart_button {
	flex: 1;
	width: 100%;
	border: 1px solid #4DC5D5;
	background: #4DC5D5;
	color: #0c0d0e;
}
.sv-product .sv-quote { margin: 0; }
.sv-product .sv-quote-link .wp-block-button__link {
	display: block;
	padding: 17px 26px;
	border: 1px solid #727374;
	background: rgba(255, 255, 255, .6);
	color: #3d3e40;
}

/* Stock line (S:1080-1083): an 8px good dot that beats, still under reduced motion. */
.sv-product .sv-stock {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	font-size: 12px;
	color: var(--wp--preset--color--ink-600);
}
.sv-product .sv-stock::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 99px;
	background: #2fb37a;
	animation: sv-beat 1.2s ease-in-out infinite;
}
@keyframes sv-beat { 0%, 100% { transform: scale(1); opacity: .85; } 40% { transform: scale(1.06); opacity: 1; } }   /* svBeat S:24 */
@media (prefers-reduced-motion: reduce) { .sv-product .sv-stock::before { animation: none; } }

/* Panels: what's in the box (S:1085-1095), technical specification and delivery (S:1099-1122). */
.sv-product .sv-panel-label { margin: 0; font-family: var(--wp--preset--font-family--body); font-weight: 400; font-size: 13px; line-height: 1.4; color: var(--wp--preset--color--ink-900); }
.sv-product .sv-box { margin-top: 28px; padding: 26px 28px; }
.sv-product .sv-box .sv-panel-label { font-size: 12.5px; }
.sv-product .sv-box .sv-specs { margin-top: 16px; }

.sv-product-lower {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	padding: 56px var(--pg) 0;
}
@media (max-width: 1100px) { .sv-product-lower { grid-template-columns: minmax(0, 1fr); } }
.sv-product-lower .sv-glass { padding: 32px 34px; }
@media (max-width: 720px) {
	/* four thumbnails on one row (about 83px each, still >= 44); Add to cart then Request a quote, both full width */
	.sv-gallery .wc-block-product-gallery-thumbnails__scrollable { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sv-gallery .wc-block-product-gallery-thumbnails__thumbnail,
	.sv-gallery .wc-block-product-gallery-thumbnails__thumbnail__image.wc-block-product-gallery-thumbnails__thumbnail__image { width: 100%; }
	.sv-product .sv-product-actions { flex-direction: column; align-items: stretch; }
	.sv-product .sv-atc { flex: none; }
	.sv-product .sv-atc.sv-atc form.cart { margin-bottom: 0; }   /* WooCommerce's 32px would open a gap between the two buttons */
	.sv-product .sv-quote .sv-quote-link { flex: 1 1 100%; }
	.sv-product-lower .sv-glass { padding: 26px 18px; }   /* S:66-68 */
	.sv-product .sv-box { padding: 22px 18px; }
}
.sv-product .sv-tech .sv-specs { margin-top: 18px; }

.sv-delivery-rows { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.sv-delivery-row { display: flex; gap: 14px; align-items: baseline; }
.sv-delivery-row > * { margin: 0; }
.sv-delivery-tag { flex: none; min-width: 96px; font-size: 12px; white-space: nowrap; color: var(--wp--custom--contrast--accent-on-light); }
.sv-delivery-text { font-size: 16px; line-height: 1.5; color: var(--wp--preset--color--ink-700); }
.sv-product .sv-footnote, .sv-delivery-row .sv-footnote { margin: 6px 0 0; font-size: 12px; color: var(--wp--preset--color--ink-600); }

/* Colour field (the colour prompt's no-JS fallback, salvagente-commerce ColourField): a required radio group. */
.sv-colour { flex: 1 1 100%; min-width: 0; margin: 0; padding: 18px 20px; border: 1px solid rgba(114, 115, 116, .35); border-radius: 16px; }
.sv-colour legend { padding: 0 6px; font-size: 12.5px; color: var(--wp--preset--color--ink-900); }
.sv-colour > p { margin: 4px 0 12px; font-size: 15px; color: var(--wp--preset--color--ink-700); }
.sv-colour-opt { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 6px 0; cursor: pointer; }
.sv-colour-opt input { width: 20px; height: 20px; margin: 0; accent-color: #1d7a87; }
.sv-colour-thumb { width: 92px; height: 60px; border-radius: 10px; object-fit: cover; background: #0b0c0d; }
.sv-colour-name { font-size: 15px; color: var(--wp--preset--color--ink-800); }
/* With JS the dialog asks instead; the field stays in the form, required, but out of sight (colour-prompt.js). */
.sv-colour.is-prompted {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.sv-colour.is-prompted > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; }   /* a fieldset does not clip its rendered legend */

/* The five pastel dots (PANEL_COLOURS S:2728-2739), keyed by the radio value. */
.sv-colour-dot { flex: none; width: 16px; height: 16px; border-radius: 99px; border: 1px solid rgba(12, 26, 42, .18); }
.sv-colour-dot[data-colour="blue"] { background: #8fb5b3; }
.sv-colour-dot[data-colour="peach"] { background: #dbaf93; }   /* Pastel peach (decision 12; Ana exit F9), re-sampled from panel-peach.webp: viewport-check --case swatch */
.sv-colour-dot[data-colour="green"] { background: #82c37c; }
.sv-colour-dot[data-colour="white"] { background: #dcd8d3; }
.sv-colour-dot[data-colour="purple"] { background: #c0a8dc; }

/* Colour prompt (S:2387-2410): a native modal <dialog>. */
.sv-cp {
	box-sizing: border-box;
	width: min(680px, calc(100% - 48px));
	max-width: none;
	max-height: 86vh;
	padding: 0;
	border: 0;
	background: none;
	overflow: visible;
}
.sv-cp::backdrop {
	background: rgba(12, 26, 42, .45);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.sv-cp-panel {
	box-sizing: border-box;
	max-height: 86vh;
	overflow: auto;
	padding: 34px 36px;
	border-radius: 24px;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(24px) saturate(150%);
	backdrop-filter: blur(24px) saturate(150%);
	border: 1px solid rgba(255, 255, 255, .85);
	box-shadow: 0 30px 80px -20px rgba(12, 26, 42, .45);
}
@media (max-width: 720px) { .sv-cp-panel { padding: 26px 18px; } }
.sv-cp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.sv-cp-title { margin: 0; font-family: var(--wp--preset--font-family--body); font-weight: 400; font-size: 14px; line-height: 1.4; color: var(--wp--preset--color--ink-900); }
.sv-cp-sub { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--wp--preset--color--ink-700); }
.sv-cp-close {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 12px;
	border: 1px solid var(--sv-stroke-hair);
	background: rgba(255, 255, 255, .7);
	font-size: 16px;
	color: var(--wp--preset--color--ink-700);
	cursor: pointer;
}
.sv-cp-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.sv-cp-row {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	padding: 12px 16px;
	border-radius: 16px;
	border: 1px solid rgba(114, 115, 116, .35);
	background: rgba(255, 255, 255, .6);
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.sv-cp-row:hover,
.sv-cp-row:focus-visible {
	border: 1.5px solid #4DC5D5;
	padding: 11.5px 15.5px;   /* keeps the row's size with the thicker border */
	background: rgba(77, 197, 213, .08);
}
.sv-cp-thumb { flex: none; width: 92px; height: 60px; overflow: hidden; border-radius: 10px; background: #0b0c0d; }
.sv-cp-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-cp-name { flex: 1; font-size: 12.5px; color: var(--wp--preset--color--ink-900); }
.sv-cp-select { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--custom--contrast--accent-on-light); }
@media (max-width: 480px) { .sv-cp-thumb { width: 72px; height: 47px; } .sv-cp-row { gap: 12px; } }