/* Utilities theme.json cannot express. Keep this file small. */

.voluma-eyebrow {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1.8;
}

.voluma-arrow:not(.wp-block-button)::after {
	content: "\2192";
	margin-left: 0.4em;
}

.wp-block-button.voluma-arrow .wp-block-button__link::after {
	content: "\2192";
	margin-left: 0.4em;
}

/* Keep hero and brand band photos landscape whatever the asset.
   SVG marks inside the band keep their own size. */
.voluma-hero img:not([src$=".svg"]),
.voluma-band img:not([src$=".svg"]) {
	aspect-ratio: 4 / 3;
	width: 100%;
	object-fit: cover;
	display: block;
}

/* On desktop the brand band is a low, wide strip, as in the mockup. */
@media (min-width: 782px) {
	.voluma-band img:not([src$=".svg"]) {
		aspect-ratio: 21 / 9;
	}
}

/* Plain lists: no bullets in the eyebrow and footer lists. */
.voluma-eyebrow.wp-block-list,
.voluma-footer .wp-block-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.voluma-footer .wp-block-list li {
	margin-bottom: 0.35rem;
}

.voluma-logo img {
	height: 28px;
	width: auto;
	display: block;
}

@media (min-width: 782px) {
	.voluma-logo img {
		height: 36px;
	}
}

/* Product grids: square image, title, price, nothing else. */
.voluma-grid .wc-block-components-product-image img,
.voluma-grid .wp-block-post-featured-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--wp--preset--color--white);
}

.voluma-grid .wp-block-post-title {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	margin-top: 0.75rem;
}

.voluma-grid .wc-block-components-product-price,
.wp-block-woocommerce-product-results-count {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

/* Sale badge and ratings do not match the brand; hide them in grids and on the product page only. */
.voluma-grid .wc-block-components-product-sale-badge,
.voluma-grid .wc-block-components-product-rating,
.voluma-product .wc-block-components-product-rating {
	display: none;
}

/* Category tiles on the home page. */
.voluma-category {
	display: block;
	text-decoration: none;
}

.voluma-category img {
	aspect-ratio: 1 / 1;
	width: 100%;
	object-fit: cover;
	background: var(--wp--preset--color--cream);
	display: block;
}

.voluma-category span {
	display: block;
	margin-top: 0.75rem;
}

@media (max-width: 781px) {
	/* Core forces nowrap on non-stacking columns with !important. */
	.wp-block-columns.voluma-categories {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.voluma-categories > .wp-block-column {
		flex-basis: calc(50% - 0.75rem) !important;
	}
}

/* Single product. */
.voluma-product .wp-block-post-title {
	margin-top: 0.5rem;
}

.voluma-product .wc-block-components-product-price {
	display: block;
	margin: 0.5rem 0 1rem;
}

.voluma-stock {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

.voluma-product .single_add_to_cart_button {
	width: 100%;
	margin-top: 1rem;
}

/* WooCommerce sets a grid on the form that makes it narrower than the column.
   Use block flow so the swatches and the button align with the tech sheet. */
.voluma-product .wp-block-woocommerce-add-to-cart-form form.cart,
.voluma-product .wp-block-woocommerce-add-to-cart-form .variations_button {
	display: block;
}

.voluma-product .wp-block-woocommerce-add-to-cart-form form.cart .quantity,
.voluma-product .wp-block-woocommerce-add-to-cart-form .variations_button .quantity {
	display: none !important; /* WooCommerce scripts set inline display on variation change. */
}

/* Hide WooCommerce leftovers next to the color swatches. */
.voluma-product .variations tr:has(.voluma-swatches) th.label,
.voluma-product .reset_variations {
	display: none !important; /* WooCommerce scripts set inline display on variation change. */
}

.voluma-tech-sheet {
	margin-top: 2rem;
	border-top: 1px solid var(--wp--preset--color--cream-deep);
	padding-top: 1rem;
}

.voluma-tech-sheet summary {
	cursor: pointer;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	list-style: none;
}

.voluma-tech-sheet summary::after {
	content: "+";
	float: right;
}

.voluma-tech-sheet[open] summary::after {
	content: "\2212";
}

.voluma-tech-sheet table {
	width: 100%;
	margin-top: 1rem;
	font-size: var(--wp--preset--font-size--small);
	border-collapse: collapse;
}

.voluma-tech-sheet th {
	text-align: left;
	font-weight: 400;
	color: var(--wp--preset--color--ink-soft);
	padding: 0.4rem 0;
	width: 35%;
}

.voluma-tech-sheet td {
	padding: 0.4rem 0;
}

.wp-block-woocommerce-product-image-gallery img {
	background: var(--wp--preset--color--white);
}

.voluma-soldout {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	margin-top: 0.25rem;
}

/* WhatsApp sales mode: hide buy controls, cart and account icons. */
.voluma-mode-whatsapp .single_add_to_cart_button,
.voluma-mode-whatsapp .wp-block-woocommerce-mini-cart,
.voluma-mode-whatsapp .wp-block-woocommerce-customer-account {
	display: none !important;
}

.voluma-whatsapp {
	margin-top: 1rem;
}

.voluma-whatsapp .wp-block-button__link {
	display: block;
	text-align: center;
	text-decoration: none;
}

.voluma-whatsapp__note {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink-soft);
	margin: 0.5rem 0 0;
}

/* Footer social links as plain text, no icons. */
.voluma-footer .voluma-social a {
	margin-right: 1.25rem;
}