/* =========================================================================
   Voley PLT — single product page

   White from top to bottom: the product photography and the orange accents do
   the work, and nothing competes with them. Two columns at the top, then full
   width bands for tabs, testimonials, FAQ and related products.

   WooCommerce's own markup (cart form, variation table, tabs, reviews) is kept
   and restyled rather than rebuilt, so stock, variations and tax display all
   keep working.
   ========================================================================= */

.voley-single {
	padding-block: 34px 90px;
	background: var(--v-white);
}

.voley-single__crumb {
	margin-bottom: 26px;
}

/* Layout ------------------------------------------------------------------
   div.product stays plain block flow: the top two columns live in their own
   .voley-single__top wrapper (added by includes/single-product.php), and the
   tabs, testimonials, FAQ and related grids follow it as normal blocks.

   The wrapper is not cosmetic. It is what bounds the sticky gallery — without
   it, sticky has no containing block that ends, and the gallery follows the
   scroll over every section below it. */
.voley-single div.product {
	margin: 0;
}

.voley-single__top {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	gap: 20px 58px;
	align-items: start;
}

.voley-single__top > * {
	min-width: 0;
}

.voley-single div.product .summary {
	margin: 0;
}

/* Gallery -----------------------------------------------------------------
   Sticky is applied in the two-column media query further down, not here — it
   depends on there being a second column to scroll past. */
.voley-pgallery {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.voley-pgallery__main {
	position: relative;
	aspect-ratio: 1;
	/*
	 * `flex: none` is the point. As the only shrinkable child of the column
	 * this used to absorb every shortfall in the pinned strip, and since
	 * `object-fit: cover` fills whatever box it is given, the product was
	 * quietly delivered cropped instead of square. Nothing here gives way now;
	 * the sticky block further down bounds the gallery's width instead.
	 */
	flex: none;
	border-radius: var(--v-r-card);
	overflow: hidden;
	background: var(--v-grey-50);
}

.voley-root .voley-pgallery__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.voley-pgallery__thumbs {
	display: grid;
	/*
	 * One row, whatever the image count. Five fit; the rest scroll.
	 *
	 * `repeat(5, 1fr)` was right for a five-image product and turned hostile at
	 * twelve: the extra rows tripled the strip's height, and everything they
	 * took came out of the photo above. A single row keeps the gallery's height
	 * a known multiple of its width, which is what lets the sticky block below
	 * size it without ever touching the photo's shape.
	 */
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 40px) / 5);
	gap: 10px;
	flex: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.voley-pthumb {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 10px;
	overflow: hidden;
	background: var(--v-grey-50);
	/* Inset ring, so the selected state costs no layout shift. */
	box-shadow: inset 0 0 0 1px var(--v-line-soft);
	opacity: 0.62;
	transition: opacity 0.25s var(--v-ease), box-shadow 0.25s var(--v-ease);
}

.voley-root .voley-pthumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.voley-pthumb:hover {
	opacity: 1;
}

.voley-pthumb.is-active {
	opacity: 1;
	box-shadow: inset 0 0 0 2px var(--v-accent);
}

/* Summary ----------------------------------------------------------------- */
.voley-single__brand {
	display: block;
	margin-bottom: 12px;
	font-size: var(--v-fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--v-accent);
}

.voley-root.voley-root .voley-single__title {
	margin-bottom: 16px;
	font-family: var(--v-font-display);
	font-size: 34px;
	font-style: italic;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--v-ink);
}

.voley-single__rating {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.voley-single__reviews {
	font-size: var(--v-fs-sm);
	font-weight: 600;
	color: var(--v-grey-600);
	border-bottom: 1px solid var(--v-line);
	transition: color 0.2s var(--v-ease), border-color 0.2s var(--v-ease);
}

.voley-single__reviews:hover {
	color: var(--v-accent);
	border-color: var(--v-accent);
}

/* Price — WooCommerce's own markup, so ranges and sale prices still work. */
.voley-single div.product .summary p.price,
.voley-single div.product .summary span.price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: 0 0 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--v-line-soft);
	font-family: var(--v-font-display);
	font-size: 26px;
	font-style: italic;
	font-weight: 800;
	color: var(--v-ink);
}

.voley-single div.product .summary .price del {
	font-family: var(--v-font-body);
	font-size: var(--v-fs-body);
	font-style: normal;
	font-weight: 500;
	opacity: 1;
	color: var(--v-grey-500);
}

.voley-single div.product .summary .price ins {
	text-decoration: none;
}

.voley-single .woocommerce-product-details__short-description {
	margin-bottom: 24px;
	font-size: var(--v-fs-body);
	line-height: 1.7;
	color: var(--v-grey-600);
}

.voley-single .woocommerce-product-details__short-description p {
	margin: 0 0 10px;
}

.voley-single .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* Cart form --------------------------------------------------------------- */
.voley-single form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
}

.voley-single form.cart .quantity {
	display: flex;
	align-items: center;
	height: 52px;
	padding: 0 6px;
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-pill);
	background: var(--v-white);
}

.voley-single form.cart .quantity input.qty,
.voley-single form.cart input[type="number"] {
	width: 62px;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--v-fs-body);
	font-weight: 700;
	text-align: center;
	color: var(--v-ink);
	appearance: textfield;
}

.voley-single form.cart input[type="number"]:focus {
	outline: none;
}

/*
 * `div.product form.cart` for the same reason as the tabs — two rules outrank
 * the short form, and between them they made the button invisible.
 *
 * The background came from the theme:
 *
 *     .lqd-woo-single-layout-3 div.product form.cart button.button
 *         { background-color: var(--color-primary) }
 *
 * at (0,4,3). `--color-primary` is defined from the theme's own options, and on
 * an unactivated theme those never load, so it resolved to transparent — white
 * text on nothing. The button was there and clickable the whole time; it simply
 * could not be seen.
 *
 * The padding came from WooCommerce itself, whose `.disabled` / `:disabled`
 * branch sits at (0,3,1) and is answered separately below.
 *
 * `button.button` is carried as well as the long ancestor path so this lands at
 * (0,5,3) and beats the theme outright, rather than tying with it and winning
 * only because the theme's stylesheet happens to be dequeued.
 */
.voley-single div.product form.cart button.button.single_add_to_cart_button {
	flex: 1 1 220px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 52px;
	padding: 0 30px;
	border: 0;
	border-radius: var(--v-r-pill);
	background: var(--v-accent);
	color: var(--v-white);
	font-family: var(--v-font-display);
	font-size: var(--v-fs-sm);
	font-style: italic;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.25s var(--v-ease), transform 0.25s var(--v-ease);
}

.voley-single div.product form.cart button.button.single_add_to_cart_button:hover {
	background: var(--v-accent-ink);
	transform: translateY(-1px);
}

/* Restates padding and colour, because WooCommerce's disabled rule sets both. */
.voley-single div.product form.cart button.button.single_add_to_cart_button:disabled {
	padding: 0 30px;
	background: var(--v-grey-300);
	color: var(--v-white);
	transform: none;
	cursor: not-allowed;
}

/*
 * A variable product buries the quantity and the button two levels deeper than a
 * simple one — inside `.single_variation_wrap > .woocommerce-variation-add-to-cart`
 * — so `form.cart`'s flex layout never reached them and the row shrank to its
 * content: a 90px pill and a 160px button adrift in a 628px column. These two
 * rules hand that pair back to the same layout a simple product gets.
 *
 * `float: none` because woocommerce.css floats the button left, which collapsed
 * its container to zero height.
 */
.voley-single form.cart .single_variation_wrap {
	flex: 1 1 100%;
	width: 100%;
}

.voley-single form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.voley-single form.cart .woocommerce-variation-add-to-cart .quantity {
	margin: 0;
	float: none;
}

.voley-single div.product form.cart .woocommerce-variation-add-to-cart button.button.single_add_to_cart_button {
	float: none;
}

/* Variations -------------------------------------------------------------- */
.voley-single table.variations {
	width: 100%;
	margin: 0 0 10px;
	border: 0;
	border-collapse: collapse;
}

.voley-single table.variations th,
.voley-single table.variations td {
	padding: 0;
	border: 0;
	text-align: left;
	vertical-align: middle;
}

.voley-single table.variations td {
	position: relative;
}

.voley-single table.variations th {
	width: 132px;
	font-size: var(--v-fs-sm);
	font-weight: 600;
	color: var(--v-grey-600);
}

.voley-single table.variations select {
	width: 100%;
	height: 46px;
	padding: 0 38px 0 16px;
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-pill);
	background-color: var(--v-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111213' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	font-size: var(--v-fs-sm);
	font-weight: 600;
	color: var(--v-ink);
	appearance: none;
	cursor: pointer;
}

/*
 * Taken out of flow on purpose.
 *
 * WooCommerce shows and hides this link with `visibility`, never `display`, so
 * in normal flow it reserves its height whether or not anyone can see it. The
 * select above it is full width, so the link wrapped to a line of its own and
 * held 34px of blank space open under every colour picker, before a shopper had
 * chosen anything. Absolute keeps the link exactly where it reads — under the
 * select, left aligned — and costs the row nothing when it is invisible.
 */
.voley-single .reset_variations {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 4px;
	font-size: var(--v-fs-xs);
	line-height: 1;
	color: var(--v-grey-500);
}

.voley-single .woocommerce-variation-price {
	margin-bottom: 14px;
}

/* Stock and meta ---------------------------------------------------------- */
.voley-single .stock {
	margin: 0 0 16px;
	font-size: var(--v-fs-sm);
	font-weight: 600;
}

.voley-single .stock.in-stock {
	color: #1f7a45;
}

.voley-single .stock.out-of-stock {
	color: #b3261e;
}

.voley-single .product_meta {
	padding-top: 20px;
	border-top: 1px solid var(--v-line-soft);
	font-size: var(--v-fs-sm);
	color: var(--v-grey-600);
}

.voley-single .product_meta > span {
	display: block;
	margin-bottom: 6px;
}

.voley-single .product_meta a:hover {
	color: var(--v-accent);
}

/* Trust list -------------------------------------------------------------- */
.voley-single__trust {
	display: grid;
	gap: 14px;
	margin: 0 0 24px;
	padding: 20px 22px;
	border: 1px solid var(--v-line-soft);
	border-radius: var(--v-r-card);
	background: var(--v-grey-50);
}

.voley-single__trust li {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	font-size: var(--v-fs-sm);
	line-height: 1.5;
	color: var(--v-grey-600);
}

.voley-single__trust i {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--v-accent-soft);
	color: var(--v-accent);
}

.voley-single__trust b {
	display: block;
	font-weight: 600;
	color: var(--v-ink);
}

/* Tabs -------------------------------------------------------------------- */
.voley-single .woocommerce-tabs {
	margin-top: 76px;
	padding-top: 42px;
	border-top: 1px solid var(--v-line-soft);
}

.voley-single div.product .woocommerce-tabs ul.tabs.wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 30px;
	padding: 0;
	border: 0;
	/* WooCommerce clips this list to hide the tails of its folder tabs. */
	overflow: visible;
	list-style: none;
}

.voley-single div.product .woocommerce-tabs ul.tabs.wc-tabs::before,
.voley-single div.product .woocommerce-tabs ul.tabs.wc-tabs::after,
.voley-single div.product .woocommerce-tabs ul.tabs.wc-tabs li::before,
.voley-single div.product .woocommerce-tabs ul.tabs.wc-tabs li::after {
	content: none;
	display: none;
}

.voley-single div.product .woocommerce-tabs ul.tabs.wc-tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
}

/*
 * These three carry `div.product` and `.wc-tabs` for one reason: WooCommerce's
 * own stylesheet says
 *
 *     .woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: .5em 0 }
 *     .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: inherit }
 *
 * at (0,4,4) and (0,5,4). Written the short way these rules sit at (0,3,3) and
 * lose, which left the pill with no horizontal padding — so its rounded ends
 * closed over the first and last letters of the label. Nothing to do with the
 * theme; this was WooCommerce all along.
 *
 * The list and its items are qualified the same way, against
 *
 *     ul.tabs    { padding: 0 0 0 1em; margin: 0 0 1.618em; overflow: hidden }
 *     ul.tabs li { border: 1px solid #cfc8d8; border-radius: 4px 4px 0 0;
 *                  margin: 0 -5px; padding: 0 1em }
 *
 * which is WooCommerce's folder-tab look — the grey boxes behind the pills.
 */
.voley-single div.product .woocommerce-tabs ul.tabs.wc-tabs li a {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-pill);
	font-size: var(--v-fs-sm);
	font-weight: 600;
	color: var(--v-ink);
	transition: border-color 0.2s var(--v-ease), background-color 0.2s var(--v-ease), color 0.2s var(--v-ease);
}

.voley-single div.product .woocommerce-tabs ul.tabs.wc-tabs li a:hover {
	border-color: var(--v-ink);
}

.voley-single div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a {
	border-color: var(--v-accent);
	background: var(--v-accent);
	color: var(--v-white);
}

.voley-single .woocommerce-Tabs-panel {
	max-width: 74ch;
	font-size: var(--v-fs-body);
	line-height: 1.75;
	color: var(--v-grey-600);
}

.voley-single .woocommerce-Tabs-panel > h2 {
	display: none;
}

.voley-single .woocommerce-Tabs-panel p {
	margin: 0 0 14px;
}

/*
 * Description tab: shop-owner content, not our chrome.
 *
 * base.css strips list markers and indentation from every ul/ol under
 * .voley-root, which is right for a nav or a grid of tiles and wrong for a
 * description someone wrote in the editor — their numbered list arrived as
 * six unmarked lines flush against the margin. The reset is undone for the
 * tab panels only, so everything the plugin draws itself keeps it.
 */
.voley-single .woocommerce-Tabs-panel :where(ul, ol) {
	margin: 0 0 14px;
	padding-left: 22px;
}

.voley-single .woocommerce-Tabs-panel :where(ul) {
	list-style: disc;
}

.voley-single .woocommerce-Tabs-panel :where(ol) {
	list-style: decimal;
}

.voley-single .woocommerce-Tabs-panel :where(li) {
	margin-bottom: 4px;
}

.voley-single .shop_attributes {
	width: 100%;
	margin: 6px 0 0;
	border-collapse: collapse;
}

.voley-single .shop_attributes th {
	width: 190px;
	padding: 12px 0;
	border-bottom: 1px solid var(--v-line-soft);
	font-size: var(--v-fs-sm);
	font-weight: 600;
	text-align: left;
	color: var(--v-ink);
}

.voley-single .shop_attributes td {
	padding: 12px 0;
	border-bottom: 1px solid var(--v-line-soft);
	font-size: var(--v-fs-sm);
}

.voley-single .shop_attributes td p {
	margin: 0;
}

/* Testimonials ------------------------------------------------------------ */
.voley-ptesti {
	margin-top: 76px;
	padding-top: 54px;
	border-top: 1px solid var(--v-line-soft);
}

.voley-ptesti__head {
	max-width: 56ch;
	margin-bottom: 34px;
}

.voley-ptesti__head .voley-h2 {
	margin-bottom: 12px;
}

.voley-ptesti__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--v-gap);
}

.voley-quote {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px 26px 26px;
	border: 1px solid var(--v-line-soft);
	border-radius: var(--v-r-card);
	background: var(--v-white);
	transition: border-color 0.25s var(--v-ease), box-shadow 0.25s var(--v-ease);
}

.voley-quote:hover {
	border-color: var(--v-line);
	box-shadow: var(--v-shadow);
}

/* Oversized quote mark, cropped by the card — decoration, not content. */
.voley-quote::before {
	content: "\201C";
	position: absolute;
	right: 20px;
	top: 6px;
	font-family: var(--v-font-display);
	font-size: 78px;
	font-style: italic;
	font-weight: 800;
	line-height: 1;
	color: var(--v-accent-soft);
	pointer-events: none;
}

.voley-quote__stars {
	display: flex;
}

.voley-quote__text {
	position: relative;
	margin: 0;
	font-size: var(--v-fs-body);
	line-height: 1.7;
	color: var(--v-ink);
}

.voley-quote__by {
	margin-top: auto;
	padding-top: 6px;
	font-size: var(--v-fs-sm);
}

.voley-quote__by b {
	display: block;
	font-weight: 600;
	color: var(--v-ink);
}

.voley-quote__by span {
	color: var(--v-grey-500);
}

/* FAQ --------------------------------------------------------------------- */
.voley-pfaq {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 58px;
	align-items: start;
	margin-top: 76px;
	padding-top: 54px;
	border-top: 1px solid var(--v-line-soft);
}

.voley-pfaq__head .voley-h2 {
	margin-bottom: 12px;
}

.voley-pfaq__head .voley-sub {
	max-width: 38ch;
}

.voley-pfaq__cta {
	margin-top: 24px;
}

.voley-pfaq__list {
	display: grid;
	border-top: 1px solid var(--v-line-soft);
}

.voley-faq {
	border-bottom: 1px solid var(--v-line-soft);
}

.voley-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 20px 0;
	font-size: var(--v-fs-body);
	font-weight: 600;
	line-height: 1.45;
	text-align: left;
	color: var(--v-ink);
	transition: color 0.2s var(--v-ease);
}

.voley-faq__q:hover {
	color: var(--v-accent);
}

.voley-faq__q i {
	display: grid;
	place-items: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--v-line);
	color: var(--v-ink);
	transition: transform 0.3s var(--v-ease), background-color 0.25s var(--v-ease), border-color 0.25s var(--v-ease), color 0.25s var(--v-ease);
}

.voley-faq__q[aria-expanded="true"] i {
	transform: rotate(180deg);
	border-color: var(--v-accent);
	background: var(--v-accent);
	color: var(--v-white);
}

.voley-faq__a[hidden] {
	display: none;
}

.voley-faq__a p {
	max-width: 62ch;
	margin: 0;
	padding: 0 46px 22px 0;
	font-size: var(--v-fs-sm);
	line-height: 1.75;
	color: var(--v-grey-600);
}

/* Related and upsells ------------------------------------------------------ */
.voley-single .related,
.voley-single .upsells {
	margin-top: 76px;
	padding-top: 54px;
	border-top: 1px solid var(--v-line-soft);
}

.voley-root.voley-root .voley-single .related > h2,
.voley-root.voley-root .voley-single .upsells > h2 {
	margin-bottom: 30px;
	font-size: var(--v-fs-h2);
}

/* Reviews ----------------------------------------------------------------- */
.voley-single #reviews .commentlist {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.voley-single #reviews .comment_container {
	display: flex;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--v-line-soft);
}

.voley-root .voley-single #reviews .comment_container img.avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex: none;
}

.voley-single #reviews .comment-text p.meta {
	margin: 0 0 6px;
	font-size: var(--v-fs-sm);
	color: var(--v-grey-500);
}

.voley-single #reviews .comment-text strong {
	color: var(--v-ink);
}

.voley-single #review_form .comment-form input[type="text"],
.voley-single #review_form .comment-form input[type="email"],
.voley-single #review_form .comment-form textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--v-line);
	border-radius: var(--v-r-sm);
	background: var(--v-white);
	font-family: var(--v-font-body);
	font-size: var(--v-fs-sm);
	color: var(--v-ink);
}

.voley-single #review_form .comment-form textarea:focus,
.voley-single #review_form .comment-form input:focus {
	outline: none;
	border-color: var(--v-accent);
}

.voley-single #review_form .form-submit input[type="submit"] {
	height: 46px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--v-r-pill);
	background: var(--v-ink);
	color: var(--v-white);
	font-family: var(--v-font-display);
	font-size: var(--v-fs-sm);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
	cursor: pointer;
}

/* Sticky gallery ----------------------------------------------------------
   Only while there are two columns, and only when the window is tall enough to
   show the whole gallery at once. Pinning something taller than the viewport
   puts its lower half — here, the thumbnails — permanently out of reach.

   The max-height is the safety net: it caps the gallery to the visible strip so
   the thumbnails stay clickable however tall the photo wants to be. */
@media (min-width: 1001px) and (min-height: 680px) {
	.voley-pgallery {
		position: sticky;
		top: calc(var(--v-header-h) + 20px);
		/*
		 * Bound the width, not the height.
		 *
		 * Capping the height only decided which child would be sacrificed, and
		 * it was always the photo. Bounding the width scales the whole gallery
		 * down together, so a short window gets a smaller square rather than a
		 * cropped rectangle.
		 *
		 * 1.2 is the gallery's own height-to-width: a square photo, a 10px gap,
		 * and one row of five thumbs at (W - 40) / 5 — so 1.2W + 2 — solved for
		 * W against the height the pinned strip has to spend. A product with a
		 * single image renders no thumbnail row at all and is left a little
		 * smaller than it needed to be, which costs it nothing but size.
		 */
		width: min(100%, calc((100vh - var(--v-header-h) - 42px) / 1.2));
		margin-inline-end: auto;
	}

	/*
	 * Same idea for the FAQ heading: it holds still while the questions scroll
	 * past. Safe because .voley-pfaq is a grid containing only these two
	 * columns, so it is the heading's bound — the section it belongs to and
	 * nothing beyond it.
	 */
	.voley-pfaq__head {
		position: sticky;
		top: calc(var(--v-header-h) + 24px);
	}
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1000px) {
	.voley-single__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	.voley-pfaq {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.voley-ptesti__grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 560px;
	}
}

@media (max-width: 900px) {
	.voley-single {
		padding-block: 24px 60px;
	}

	.voley-root.voley-root .voley-single__title {
		font-size: 27px;
	}

	.voley-single .woocommerce-tabs,
	.voley-ptesti,
	.voley-pfaq,
	.voley-single .related,
	.voley-single .upsells {
		margin-top: 52px;
		padding-top: 36px;
	}
}

@media (max-width: 560px) {
	.voley-single form.cart {
		gap: 10px;
	}

	.voley-single button.single_add_to_cart_button {
		flex-basis: 100%;
	}

	.voley-pgallery__thumbs {
		grid-template-columns: repeat(4, 1fr);
	}

	.voley-faq__a p {
		padding-right: 0;
	}
}