/**
 * Cartavera — single product page.
 * Loaded only where the add-to-cart form, product details or gallery render.
 */

/* ---------- Specifications table ----------
   Base styles first, so the more specific purchase-panel table rules follow. */

.woocommerce-product-attributes {
	width: 100%;
	max-width: 760px;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: start;
	vertical-align: top;
}

.woocommerce-product-attributes th {
	width: 34%;
	background: var(--wp--preset--color--subtle);
	font-weight: 650;
}

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

/* ---------- Three-column layout ---------- */

.cv-pdp__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--card);
}

.cv-pdp__top > * {
	margin: 0 !important;
	min-width: 0;
}

@media (min-width: 782px) {

	.cv-pdp__top {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		grid-template-areas:
			"media info"
			"media buy";
	}

	.cv-pdp__media {
		grid-area: media;
		position: sticky;
		top: 16px;
	}

	.cv-pdp__info {
		grid-area: info;
	}

	.cv-pdp__buy {
		grid-area: buy;
	}
}

@media (min-width: 1100px) {

	.cv-pdp__top {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 300px;
		grid-template-areas: "media info buy";
	}

	.cv-pdp__buy {
		position: sticky;
		top: 16px;
	}
}

/* ---------- Info column ---------- */

.cv-pdp__info > * {
	margin-block: 0 !important;
}

.cv-pdp__info > * + * {
	margin-block-start: 10px !important;
}

.cv-pdp__brand {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.cv-pdp__title {
	margin: 0;
	font-weight: 650;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.cv-pdp__rule {
	margin-block: 14px !important;
	border-color: var(--wp--preset--color--line);
}

.cv-pdp__price {
	font-size: var(--wp--preset--font-size--xx-large) !important;
	font-weight: 600 !important;
}

.cv-pdp__about {
	margin-top: 18px !important;
	font-weight: 750;
}

.cv-pdp__about:not(:has(+ .wp-block-woocommerce-product-summary)) {
	display: none;
}

.cv-pdp__info .wp-block-woocommerce-product-summary ul {
	margin: 0;
	padding-inline-start: 1.15em;
}

.cv-pdp__info .wp-block-woocommerce-product-summary li {
	margin-bottom: 6px;
}

.cv-pdp__info .wp-block-woocommerce-product-summary p {
	margin: 0 0 8px;
}

.cv-pdp__meta {
	padding-top: 12px;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.cv-pdp__meta .wp-block-group {
	gap: 4px 18px;
}

/* ---------- Purchase panel ---------- */

.cv-pdp__buy {
	padding: 18px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
}

.cv-pdp__buy > * {
	margin-block: 0 !important;
}

.cv-pdp__buy > * + * {
	margin-block-start: 12px !important;
}

.cv-buy__stock {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 650;
}

.cv-buy__form form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.cv-buy__form form.cart:not(.variations_form):not(.grouped_form) > * {
	margin: 0;
}

.cv-buy__form .single_add_to_cart_button,
.cv-buy__form .single_add_to_cart_button.button {
	flex: 1 1 100%;
	min-height: 46px;
	margin: 0 !important;
	padding: 10px 18px;
	border: 0;
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--wp--preset--shadow--sm);
}

.cv-buy__form .single_add_to_cart_button:hover {
	background: var(--wp--preset--color--accent-strong);
}

/*
 * "Select options first" state. WooCommerce keeps this button operable (it
 * explains what is missing when pressed), so it must keep text contrast:
 * muted solid colours instead of opacity.
 */
.cv-buy__form .single_add_to_cart_button.button.disabled,
.cv-buy__form .single_add_to_cart_button.button:disabled,
.cv-buy__form .single_add_to_cart_button.button.disabled:hover,
.cv-buy__form .single_add_to_cart_button.button:disabled:hover {
	opacity: 1;
	background: var(--wp--preset--color--subtle);
	color: var(--wp--preset--color--muted);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--muted);
	cursor: not-allowed;
}

/* The purchase panel already shows the stock indicator block above the form. */
.cv-buy__form > p.stock {
	display: none;
}

/* Quantity */
.cv-buy__form .quantity {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cv-buy__form .quantity .qty {
	width: 5.5em;
	min-height: 40px;
	padding: 6px 8px;
	border: 1px solid var(--wp--custom--control--border);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--subtle);
	font: inherit;
	text-align: center;
}

/* Variations */
.cv-buy__form table.variations {
	width: 100%;
	margin: 0 0 4px;
	border: 0;
	border-collapse: collapse;
}

.cv-buy__form table.variations tr {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 10px;
}

.cv-buy__form table.variations th,
.cv-buy__form table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: start;
}

.cv-buy__form table.variations label {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}

.cv-buy__form table.variations select {
	width: 100%;
	min-height: 42px;
	padding-block: 6px;
	padding-inline: 12px 32px;
	border: 1px solid var(--wp--custom--control--border);
	border-radius: var(--wp--custom--radius--control);
	background-color: var(--wp--preset--color--subtle);
	font: inherit;
}

.cv-buy__form .reset_variations {
	display: inline-block;
	margin-top: 6px;
	font-size: var(--wp--preset--font-size--small);
}

.cv-buy__form .single_variation_wrap {
	width: 100%;
}

.cv-buy__form .woocommerce-variation {
	margin-bottom: 10px;
}

.cv-buy__form .woocommerce-variation-price .price {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 750;
}

.cv-buy__form .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cv-buy__form .stock {
	margin: 4px 0 0;
	font-weight: 650;
}

.cv-buy__form .stock.in-stock {
	color: var(--wp--preset--color--success);
}

.cv-buy__form .stock.out-of-stock {
	color: var(--wp--preset--color--deal);
}

/* Grouped products */
.cv-buy__form table.group_product {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.cv-buy__form table.group_product td {
	padding: 8px 4px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	vertical-align: middle;
}

.cv-buy__form table.group_product .quantity .qty {
	width: 4em;
}

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

.cv-pdp__media .woocommerce-product-gallery {
	position: relative;
	margin: 0;
	width: 100% !important;
	float: none !important;

	/* WooCommerce hides the gallery (inline opacity: 0) until FlexSlider has run, which
	   delays the main image as the LCP. The rules below already give it its final layout. */
	opacity: 1 !important;
}

.cv-pdp__media .woocommerce-product-gallery__wrapper {
	margin: 0;
}

/* WooCommerce keeps the inline opacity: 0 until FlexSlider has finished. Until then the gallery
   is held in its final layout: the first image, with the thumbnail rows (5 per row, see
   .flex-control-thumbs) reserved below it. Without this, the page below moves several times
   while FlexSlider builds the slider (first all slides stacked, then one slide as wide as the
   whole track, then a zero-height viewport). The !important rules beat FlexSlider's inline styles. */
.cv-pdp__media .woocommerce-product-gallery[style*="opacity: 0"] .woocommerce-product-gallery__image {
	float: none !important;
}

.cv-pdp__media .woocommerce-product-gallery[style*="opacity: 0"] .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+2),
.cv-pdp__media .woocommerce-product-gallery[style*="opacity: 0"] .flex-control-nav {
	display: none !important;
}

.cv-pdp__media .woocommerce-product-gallery[style*="opacity: 0"] .woocommerce-product-gallery__wrapper {
	width: auto !important;
}

.cv-pdp__media .woocommerce-product-gallery[style*="opacity: 0"] .flex-viewport {
	height: auto !important;
}

.cv-pdp__media .woocommerce-product-gallery[style*="opacity: 0"]:has(.woocommerce-product-gallery__image:nth-child(2)) {
	padding-bottom: calc((100% - 32px) / 5);
}

.cv-pdp__media .woocommerce-product-gallery[style*="opacity: 0"]:has(.woocommerce-product-gallery__image:nth-child(6)) {
	padding-bottom: calc(8px + 2 * (100% - 32px) / 5);
}

.cv-pdp__media .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--subtle);
}

.cv-pdp__media .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.cv-pdp__media .flex-control-thumbs li {
	margin: 0;
	width: auto !important;
	float: none !important;
}

.cv-pdp__media .flex-control-thumbs img {
	display: block;
	width: 100%;

	/* FlexSlider adds the thumbnails without width and height; keep their square box while
	   they load, border included, so a row is exactly one column wide and tall. */
	box-sizing: border-box;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border: 2px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	opacity: 0.75;
	background: var(--wp--preset--color--subtle);
}

.cv-pdp__media .flex-control-thumbs img:hover,
.cv-pdp__media .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--wp--preset--color--accent);
}

/* The lightbox styles load in the footer (see cartavera_defer_lightbox_styles()); keep its
   closed dialog hidden until they arrive. */
.pswp:not(.pswp--open) {
	display: none;
}

.cv-pdp__media .woocommerce-product-gallery__trigger {
	position: absolute;
	z-index: 9;
	top: 12px;
	inset-inline-end: 12px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--md);
	font-size: 0;
}

.cv-pdp .cv-pdp__media .onsale,
.cv-pdp .cv-pdp__media span.onsale {
	position: absolute;
	z-index: 9;
	top: 12px;
	inset-inline-start: 12px;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 4px 10px;
	border-radius: var(--wp--preset--border-radius--sm);
	background: var(--wp--preset--color--deal);
	color: var(--wp--custom--on-deal, #fff);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 750;
	line-height: 1.4;
}

/* ---------- Details tabs, specifications and reviews ---------- */

.cv-pdp__details,
.wp-block-woocommerce-product-details {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--card);
}

/* WooCommerce shows every tab panel until its script picks the first tab, so the hidden
   panels' content (review avatars from Gravatar, the star icon font) downloads with the page.
   Until a tab is active, show only the first panel, or one opened by a #tab-… link. */
.wp-block-woocommerce-product-details .wc-tabs-wrapper:not(:has(.wc-tabs li.active)) .woocommerce-Tabs-panel ~ .woocommerce-Tabs-panel:not(:target) {
	display: none;
}

.wp-block-woocommerce-product-details .wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	margin: 0 0 var(--wp--preset--spacing--40) !important;
	padding: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--line);
	list-style: none;
}

.wp-block-woocommerce-product-details .wc-tabs::before,
.wp-block-woocommerce-product-details .wc-tabs li::before,
.wp-block-woocommerce-product-details .wc-tabs li::after {
	display: none !important;
}

.wp-block-woocommerce-product-details .wc-tabs li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

.wp-block-woocommerce-product-details .wc-tabs li a {
	display: block;
	padding: 10px 0 !important;
	border-bottom: 3px solid transparent;

	/* WooCommerce's classic tabs set #515151, too dark on dark palettes. */
	color: var(--wp--preset--color--muted) !important;
	font-weight: 650;
	text-decoration: none;
}

.wp-block-woocommerce-product-details .wc-tabs li.active a,
.wp-block-woocommerce-product-details .wc-tabs li a:hover {
	color: var(--wp--preset--color--contrast) !important;
	border-bottom-color: var(--wp--preset--color--accent);
}

.wp-block-woocommerce-product-details .woocommerce-Tabs-panel > h2:first-child {
	font-size: var(--wp--preset--font-size--large);
}

#reviews .commentlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

#reviews .commentlist li {
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

#reviews .comment_container {
	display: flex;
	gap: 12px;
}

#reviews .comment_container img.avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

#reviews .comment-text {
	flex: 1;
}

#reviews .comment-text .meta {
	margin: 4px 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

#reviews #respond {
	margin-top: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
}

#reviews .comment-form-rating label,
#reviews .comment-form label {
	display: block;
	margin-bottom: 4px;
	font-weight: 650;
}

#reviews .comment-form textarea,
#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"] {
	width: 100%;
}

#reviews .form-submit input[type="submit"],
#reviews .form-submit .submit {
	min-height: 44px;
	padding: 10px 22px;
	border: 0;
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* ---------- Mobile order ---------- */

@media (max-width: 781px) {

	.cv-pdp__top {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 12px;
	}

	.cv-pdp__info,
	.cv-pdp__buy {
		display: contents;
	}

	/* Anything without a place of its own below (markup that extensions print into the
	   columns, such as a currency switcher, or blocks added in the Site Editor) keeps its
	   reading position instead of jumping above the title: the info column's extras stay
	   with the product meta, the buy column's with the purchase notes. */
	.cv-pdp__info > * { order: 13; }

	.cv-pdp__buy > * { order: 10; }

	.cv-pdp__media { order: 0; }

	.cv-pdp__info .cv-badges { order: 1; }

	.cv-pdp__brand { order: 1; }

	.cv-pdp__title { order: 2; font-size: var(--wp--preset--font-size--large) !important; }

	.cv-pdp__info .cv-rating { order: 3; }

	.cv-pdp__rule { order: 4; margin-block: 4px !important; }

	.cv-pdp__info .cv-discount,
	.cv-pdp__info .cv-countdown { order: 5; }

	.cv-pdp__price { order: 6; }

	.cv-buy__price { display: none; }

	.cv-buy__stock { order: 8; }

	.cv-pdp__buy .cv-size-guide,
	.cv-buy__form { order: 9; }

	.cv-pdp__buy .cv-notes { order: 10; }

	.cv-pdp__about { order: 11; }

	.cv-pdp__info .wp-block-woocommerce-product-summary { order: 12; }

	.cv-pdp__meta { order: 13; }

	.cv-pdp__top > *,
	.cv-pdp__info > *,
	.cv-pdp__buy > * {
		margin: 0 !important;
	}

	.cv-pdp__details {
		padding: 14px;
	}

	.wp-block-woocommerce-product-details .wc-tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
	}

	.wp-block-woocommerce-product-details .wc-tabs li a {
		white-space: nowrap;
	}
}