/*
 * Funnel: the sticky basket bar, bigger thumb targets, and one product card
 * per row on a phone.
 *
 * Brand colours only, taken from the theme rather than picked again by eye.
 * Nothing here changes WooCommerce's own geometry on desktop - the theme's
 * comment explains at length why that is left alone - except the one mobile
 * column rule at the bottom, which is deliberate and explained there.
 */

.labelcut-sticky,
.labelcut-trust-inline,
.labelcut-delivery-hint {
	/* The theme's tokens, with the old brand hex as the fallback - wp-admin
	   never loads the theme stylesheet, so the fallback is what renders there. */
	--lc-cream: var(--cream, #fff9f2);
	--lc-blush: var(--blush, #f7c9ce);
	--lc-plum: var(--plum, #4a3b3b);
	--lc-rose: var(--rose, #e8848f);
	--lc-muted: var(--plum-muted, #8a7a7a);
	--lc-paper: var(--paper, #ffffff);
	--lc-on-accent: var(--ink, #fff9f2);
	--lc-rule: var(--hairline, #eadfd6);
}

/* ------------------------------------------------ the product page columns */

/*
 * Clear the two floated columns on a single product page.
 *
 * woocommerce-layout.css floats div.images left and div.summary right inside
 * div.product and never clears them itself. In a stock shop the float is closed
 * by whatever comes next inside the same container - the tabs, the upsells or
 * the related products - because layout.css gives each of those clear: both.
 * This theme prints no tabs and no upsells, so the ONLY thing closing the float
 * was the related products block.
 *
 * On 17 September the catalogue became one custom product alone in its
 * category. WooCommerce then renders no related products, nothing closes the
 * float, and div.product collapses to zero height: the email capture block and
 * the footer draw straight over the two columns. Every ?size= door leads to
 * that one product, so it took the whole custom range down with it.
 *
 * A clearfix rather than a grid on purpose. Geometry stays exactly WooCommerce's
 * own, which is what the theme's long comment about never touching it asks for,
 * and the ready-made products that still have related products are unaffected
 * because clearing a float twice changes nothing.
 *
 * Above 768px only, because that is where woocommerce-smallscreen.css stops
 * floating the two columns. On a phone there is no float to clear and the extra
 * box would only push the capture block down by the summary's last margin.
 */

@media (min-width: 769px) {
	.woocommerce div.product::after,
	.woocommerce-page div.product::after {
		content: "";
		display: block;
		clear: both;
	}
}

/* ------------------------------------------------ the sticky basket bar */

.labelcut-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900; /* under the consent bar, which must be answerable first */
	background: var(--lc-paper);
	border-top: 1px solid var(--lc-rule);
	box-shadow: 0 -6px 24px -12px rgba(74, 59, 59, .35);
	transform: translateY(100%);
	transition: transform .22s ease;
	/* Clears the home indicator on an iPhone, where the bottom of the screen
	   is not actually the bottom of the screen. */
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.labelcut-sticky.is-up {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.labelcut-sticky {
		transition: none;
	}
}

.labelcut-sticky-inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 60rem;
	margin: 0 auto;
	padding: .7rem 1rem;
}

.labelcut-sticky-text {
	display: flex;
	flex-direction: column;
	min-width: 0; /* lets the name ellipsis rather than shove the button off */
	flex: 1 1 auto;
}

.labelcut-sticky-name {
	font-size: .8125rem;
	color: var(--lc-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.labelcut-sticky-price {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--lc-plum);
	line-height: 1.25;
}

.labelcut-sticky-price del {
	font-weight: 400;
	opacity: .6;
	margin-right: .3rem;
}

.labelcut-sticky-button {
	flex: 0 0 auto;
	/* 48px. The measured page had a 32px button, which is under the 44px a
	   thumb reliably hits and this is the only button that takes money. */
	min-height: 48px;
	padding: 0 1.35rem;
	border: 0;
	border-radius: 999px;
	background: var(--lc-plum);
	color: var(--lc-on-accent);
	font-family: inherit;
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
}

.labelcut-sticky-button:hover {
	/* A lift off the button's own colour rather than a fixed darker plum,
	   which on a near-black page was darker than the page itself. */
	background: color-mix(in srgb, var(--lc-plum) 86%, var(--lc-cream));
}

.labelcut-sticky-button:focus-visible {
	outline: 2px solid var(--lc-rose);
	outline-offset: 2px;
}

/* The bar is a shortcut for a long phone page. On a desktop the real button
   is on the first screen beside the gallery, so the bar would be clutter. */
@media (min-width: 900px) {
	.labelcut-sticky {
		display: none;
	}
}

/* The field the bar sent them back to, said visibly rather than only through
   the focus ring. */
.labelcut-wants-you {
	box-shadow: 0 0 0 3px var(--lc-blush);
	border-color: var(--lc-rose) !important;
}

/* --------------------------------------------- product page reassurance */

.labelcut-trust-inline {
	margin-top: 1.25rem;
	/*
	 * Keeps the promises on their own line UNDER the button rather than
	 * squeezed alongside it.
	 *
	 * flex-basis was the original guess and it did nothing at all, because
	 * WooCommerce's form.cart is display:block on this shop, not flex. Its
	 * quantity box and its button are FLOATED, so this div - the next sibling -
	 * wrapped into the space beside them, and the three promises got the ~360px
	 * that were left. Measured on the live page: the trust block's top was
	 * 658.8px, the exact same top as the quantity box and the button.
	 *
	 * clear is the fix. flex-basis stays for the themes where the form really
	 * is a flex row; it costs nothing and is harmless here.
	 */
	clear: both;
	flex-basis: 100%;
	width: 100%;
}

.labelcut-trust-inline .labelcut-trust {
	margin-top: 0;
}

.labelcut-delivery-hint {
	margin: .35rem 0 .9rem;
	font-size: .875rem;
	color: var(--lc-muted);
}

/* ------------------------------------------------- thumbs, and the shop */

/* Primary calls to action, up to a size a thumb actually hits. Scoped to the
   shop's own buttons so nothing in the admin bar or the theme's header is
   caught by it. */
.woocommerce ul.products li.product a.button,
.woocommerce div.product form.cart .button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 480px) {
	/*
	 * One product per row on a phone.
	 *
	 * WooCommerce puts two across at this width, which delivered the artwork
	 * about 160px wide on the 375px screen this was measured on. For a shop
	 * selling a drawing with a child's name on it, the artwork is the product
	 * and the whole decision - shrinking it to a thumbnail to save vertical
	 * space on a page people are already scrolling is the wrong trade.
	 *
	 * Width and float only. Nothing else of WooCommerce's layout is touched.
	 */
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		width: 100%;
		float: none;
		margin-right: 0;
	}

	.woocommerce ul.products li.product a img {
		width: 100%;
		height: auto;
	}
}