/*
 * Layout fixes for theme rules. Loaded on every public page (includes/layout-fixes.php).
 */

/*
 * Lead paragraph under the page title (/contact/, /size-guide/, /blog/).
 * The theme (style.css 0.2.6) limits the text to 46rem with
 * padding-right: max(0px, calc(100% - 46rem)). There 100% is the parent block (window minus 100px),
 * but the paragraph itself is capped at the wide size (1240px), so the wider the window, the narrower
 * the text: 736px at 1280px, 156px at 1920px, 0 (one word per line) from about 2080px.
 * Here 100% is capped at the wide size too, so the text stays 46rem (736px) wide on large screens and
 * fills the paragraph on small ones.
 * "body" is on purpose: this file loads before the theme's style.css, so the theme rule would win
 * without the extra specificity.
 */
body p.dn-lead.alignwide {
	padding-right: max(0px, min(100%, var(--wp--style--global--wide-size)) - 46rem);
}

/*
 * Product page trust block under Add to cart / Buy now (includes/product-trust.php):
 * four short lines in a thin rounded frame, icons in the accent colour.
 * "body" again for specificity over the theme's list rules.
 */
body ul.dn-trust {
	display: grid;
	gap: 0.45rem;
	max-width: 30rem;
	margin: 1.1rem 0 0;
	padding: 0.85rem 1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1, #a84462) 22%, transparent);
	border-radius: 12px;
	list-style: none;
}
body ul.dn-trust li {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
	margin: 0;
	padding: 0;
}
.dn-trust__icon {
	flex: 0 0 1.1rem;
	color: var(--wp--preset--color--accent-1, #a84462);
	text-align: center;
}

/*
 * Phone header on the cart page (below 600px).
 * The cart page has no bottom bar, so assets/mobile-bottom-bar.css is not loaded there.
 * WooCommerce keeps an invisible mini-cart in the header on this page (visibility: hidden), which still
 * takes 40px. It is removed, so the logo gets the space (34px wide before at 375px), up to 110px as on
 * the other pages.
 * The expanded search field covers the header row instead of pushing the icons off screen.
 */
@media (max-width: 599.98px) {
	body.woocommerce-cart header .wc-block-mini-cart[aria-hidden="true"] {
		display: none;
	}
	body.woocommerce-cart header .wp-block-site-logo img {
		width: 110px;
	}
	body.woocommerce-cart header .wp-block-group:has(> .wp-block-site-logo) {
		position: relative;
	}
	body.woocommerce-cart header .wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) {
		position: absolute;
		inset: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		background: var(--wp--preset--color--base, #faf3ea);
	}
	body.woocommerce-cart header .wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
		width: 100% !important;
	}
	body.woocommerce-cart header .wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		flex: 1 1 auto;
		width: auto !important;
	}
}