/*
 * Label Cut shop.
 *
 * Only what this plugin puts on the page: the class-pack register box, the
 * trust row on the basket and checkout, the gallery, the order-tracking page
 * and the photographs on reviews.
 *
 * Colours are the brand's own, taken from the theme rather than picked again by
 * eye. Nothing here sets a width, a float or a grid on anything WooCommerce
 * drew - the theme's own comment explains why at length, and the short version
 * is that layout is WooCommerce's job and only the look is ours.
 */

.labelcut-pack,
.labelcut-option,
.labelcut-qty,
.labelcut-qty-total,
.labelcut-trust,
.labelcut-gallery,
.labelcut-tracking {
	/*
	 * Read the theme's tokens, with the old brand hex as the fallback.
	 *
	 * This is proof.css's pattern, adopted here on 12 September 2026 so the
	 * Midnight Bold rebuild reaches the shop components too - they were
	 * hard-coded, so they would have stayed pastel on a near-black page while
	 * everything around them changed.
	 *
	 * The fallback is not decoration: wp-admin never loads the theme's
	 * stylesheet, so wherever these components render inside admin the fallback
	 * is the only value there is.
	 */
	--lc-cream: var(--cream, #fff9f2);
	--lc-blush: var(--blush, #f7c9ce);
	--lc-mint: var(--mint, #bfe3d0);
	--lc-plum: var(--plum, #4a3b3b);
	--lc-rose: var(--rose, #e8848f);
	--lc-muted: var(--plum-muted, #8a7a7a);
	--lc-rule: var(--hairline, #eadfd6);
	--lc-paper: var(--paper, #ffffff);
}

/* ------------------------------------------------------- the class pack */

.labelcut-pack {
	margin: 0 0 1.5rem;
	padding: 1.15rem 1.25rem 1.25rem;
	background: var(--lc-cream);
	border: 1px solid var(--lc-rule);
	border-radius: .75rem;
}

.labelcut-pack-label {
	display: block;
	margin-bottom: .45rem;
	font-weight: 600;
	color: var(--lc-plum);
}

.labelcut-pack textarea {
	width: 100%;
	padding: .75rem .9rem;
	/* 16px or more, or iOS zooms the whole page the moment it is tapped -
	   the same reason the personalisation fields set it. */
	font-size: 16px;
	line-height: 1.55;
	color: var(--lc-plum);
	background: var(--lc-paper);
	border: 1px solid var(--lc-rule);
	border-radius: .5rem;
	resize: vertical;
}

.labelcut-pack textarea:focus-visible {
	outline: 2px solid var(--lc-rose);
	outline-offset: 1px;
}

.labelcut-pack-count {
	margin: .55rem 0 0;
	font-weight: 600;
	color: var(--lc-plum);
}

.labelcut-pack-note {
	margin: .35rem 0 .9rem;
	font-size: .8125rem;
	color: var(--lc-muted);
}

.labelcut-pack-tiers {
	margin: 0 0 .75rem;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.labelcut-pack-tiers li {
	padding: .3rem .6rem;
	font-size: .8125rem;
	color: var(--lc-plum);
	background: var(--lc-paper);
	border: 1px solid var(--lc-rule);
	border-radius: .4rem;
}

.labelcut-pack-tiers li span {
	font-weight: 600;
}

.labelcut-pack-total {
	margin: 0 0 .5rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--lc-plum);
}

.labelcut-pack-total:empty {
	margin: 0;
}

.labelcut-pack-reassure {
	margin: 0;
	font-size: .8125rem;
	color: var(--lc-muted);
}

.labelcut-pack-warning {
	padding: .75rem 1rem;
	/* A warning has to stay a warning. --hot exists only on Midnight Bold; on
	   the old palette both fall back to the pink pair they always were. */
	background: #fff4f5;
	background: color-mix(in srgb, var(--hot, #e8848f) 14%, transparent);
	border: 1px solid var(--hot, #e8848f);
	border-radius: .5rem;
	color: #9a3b48;
	color: var(--hot, #9a3b48);
}

/* --------------------------------------------------------- the trust row */

.labelcut-trust {
	margin: 2rem 0 0;
	padding: 1.25rem 1.35rem;
	background: var(--lc-cream);
	border: 1px solid var(--lc-rule);
	border-radius: .75rem;
}

.labelcut-trust ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.labelcut-trust li {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	/* A blush rule rather than a tick or a padlock. Badges on a small shop
	   read as decoration; a plain statement reads as a person meaning it. */
	padding-left: .8rem;
	border-left: 3px solid var(--lc-blush);
}

.labelcut-trust strong {
	color: var(--lc-plum);
	font-size: .95rem;
}

.labelcut-trust span {
	color: var(--lc-muted);
	font-size: .8125rem;
	line-height: 1.55;
}

/* ----------------------------------------------------------- the gallery */

.labelcut-gallery {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(var(--labelcut-gallery-columns, 3), minmax(0, 1fr));
	margin: 1.5rem 0;
}

@media (max-width: 780px) {
	.labelcut-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.labelcut-gallery {
		grid-template-columns: minmax(0, 1fr);
	}
}

.labelcut-gallery-item {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.labelcut-gallery-image {
	width: 100%;
	height: auto;
	max-width: 100%;
	display: block;
	border-radius: .6rem;
	background: var(--lc-cream);
}

.labelcut-gallery-item figcaption {
	font-size: .8125rem;
	color: var(--lc-muted);
	line-height: 1.5;
}

/* ---------------------------------------------------------- the tracking */

.labelcut-tracking {
	max-width: 34rem;
}

.labelcut-tracking-note {
	margin-top: 1rem;
	font-size: .8125rem;
	color: var(--lc-muted);
}

/* ---------------------------------------------------- reviews and uploads */

.labelcut-review-figure {
	margin: .75rem 0 0;
}

.labelcut-review-photo {
	max-width: 100%;
	height: auto;
	border-radius: .5rem;
}

.comment-form-labelcut-photo {
	margin: 0 0 1rem;
}

.comment-form-labelcut-photo label {
	display: block;
	margin-bottom: .35rem;
	font-size: .875rem;
	color: var(--lc-muted, #8a7a7a);
}

/* ------------------------------------------------- sold by the sticker */

/* ----------------------------------------------------------- the choice */

/*
 * The size, asked first because everything under it depends on the answer.
 *
 * Same card as the quantity panel below and the name box beside it: the three
 * questions the product page asks should read as three of one thing. It clears
 * WooCommerce's floated children for the same reason .labelcut-qty does.
 */
.labelcut-option {
	clear: both;
	background: var(--paper, #fff);
	border-radius: var(--radius-card, 1rem);
	box-shadow: var(--shadow-soft, 0 2px 10px rgba(74, 59, 59, .06));
	padding: 1.25rem;
	margin: 1.25rem 0;
}

.labelcut-option-heading {
	display: block;
	margin-bottom: .85rem;
	font-weight: 600;
	color: var(--lc-plum);
}

/*
 * Two to a row on a phone, three or more on a desktop.
 *
 * 13rem was the first try and it gave one card per row at 375px: five sizes then
 * ran to about 450px of screen and pushed Add to basket half a screen further
 * down a page that is already long. 9rem missed two columns by 2.6px, which is
 * the sort of number that is invisible in a stylesheet and obvious on a phone:
 * the column this sits in is 295px, and two 144px tracks with a 9.6px gap need
 * 297.6px. 8.5rem fits, and still holds "Rectangle, 60 x 40 mm" over two lines.
 */
.labelcut-option-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: .6rem;
}

.labelcut-option-item {
	display: block;
	cursor: pointer;
}

/* The radio itself is hidden from sight but not from the keyboard or a screen
   reader: the card it sits in is what gets the focus ring below. */
.labelcut-option-item input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.labelcut-option-body {
	display: block;
	height: 100%;
	padding: .7rem .85rem;
	border: 1px solid var(--lc-rule);
	border-radius: .65rem;
	background: var(--lc-cream);
	transition: border-color .15s ease, background-color .15s ease;
}

.labelcut-option-body strong {
	display: block;
	font-weight: 600;
	color: var(--lc-plum);
	font-size: .95rem;
}

.labelcut-option-note {
	display: block;
	margin-top: .15rem;
	font-size: .8125rem;
	color: var(--lc-muted);
}

.labelcut-option-from {
	display: block;
	margin-top: .35rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--lc-rose);
}

.labelcut-option-item:hover .labelcut-option-body {
	border-color: var(--lc-rose);
}

.labelcut-option-item input:focus-visible + .labelcut-option-body {
	outline: 2px solid var(--lc-rose);
	outline-offset: 2px;
}

.labelcut-option-item input:checked + .labelcut-option-body {
	border-color: var(--lc-rose);
	background: var(--lc-paper);
	box-shadow: inset 0 0 0 1px var(--lc-rose);
}

/*
 * The block that replaced the "Sheets" dropdown: a question, a row of bundles,
 * and the minimum said in words. It sits inside WooCommerce's own add-to-basket
 * form, whose children are floated, so it clears them - see the same note on
 * .labelcut-trust-inline in funnel.css, which is the identical bug.
 */
.labelcut-qty {
	clear: both;
	/*
	 * The same card the personalisation plugin's name box uses - white paper,
	 * 1rem corners, 20px of padding, the soft shadow - because they are the two
	 * questions the product page asks and a customer should not have to work
	 * out that they are the same kind of thing. Values are the theme's own
	 * variables with the measured fallbacks behind them, so this still looks
	 * right if the sheet ever loads somewhere the theme has not.
	 */
	background: var(--paper, #fff);
	border-radius: var(--radius-card, 1rem);
	box-shadow: var(--shadow-soft, 0 2px 10px rgba(74, 59, 59, .06));
	padding: 1.25rem;
	margin: 1.25rem 0;
}

.labelcut-qty-heading {
	display: block;
	margin-bottom: .85rem;
	font-weight: 600;
	color: var(--lc-plum);
}

.labelcut-qty-bundles {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-bottom: .9rem;
}

/*
 * A bundle is a price, so it is shown as one. The quantity is the big figure
 * because that is what the parent is choosing; the money is underneath it
 * because that is what they are checking.
 */
.labelcut-qty-bundle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2rem;
	min-width: 6rem;
	min-height: 44px;
	padding: .8rem 1.1rem;
	background: var(--lc-cream);
	border: 1px solid var(--lc-rule);
	border-radius: .75rem;
	color: var(--lc-plum);
	font: inherit;
	line-height: 1.25;
	cursor: pointer;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.labelcut-qty-bundle strong {
	font-size: 1.05rem;
	font-weight: 700;
}

.labelcut-qty-bundle span {
	font-size: .8125rem;
	color: var(--lc-muted);
}

/* The saving is the only thing on this page allowed to shout, and it whispers. */
.labelcut-qty-bundle em {
	font-size: .6875rem;
	font-style: normal;
	font-weight: 600;
	color: var(--lc-rose);
	letter-spacing: .02em;
}

.labelcut-qty-bundle:hover,
.labelcut-qty-bundle:focus-visible {
	border-color: var(--lc-blush);
	box-shadow: 0 2px 10px rgba(74, 59, 59, .08);
}

/*
 * The chosen one, said with a ring rather than a fill. A filled chip next to
 * the butter-coloured Add to basket button gives the page two things competing
 * to be pressed, and only one of them takes the money.
 */
.labelcut-qty-bundle.is-chosen {
	border-color: var(--lc-rose);
	box-shadow: 0 0 0 2px var(--lc-blush);
}

.labelcut-qty-bundle.is-chosen span {
	color: var(--lc-plum);
}

.labelcut-qty-min {
	margin: 0;
	font-size: .8125rem;
	color: var(--lc-muted);
}

/*
 * The running total, on the same line as the number box and the button.
 * Inline-block and floated to match what WooCommerce does to its own children
 * here; a block would push the button onto its own row.
 */
.labelcut-qty-total {
	float: left;
	display: flex;
	align-items: center;
	min-height: 44px;
	/* Sits between the number box and the button, with a clear gap either
	   side so the three do not read as one run-on control. */
	margin: 0 1.1rem .75rem .35rem;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--lc-plum);
}

@media print {
	.labelcut-trust,
	.labelcut-qty,
	.labelcut-pack-tiers {
		display: none;
	}
}