/*
 * The parts the capture could not bring.
 *
 * assets/next.css is the original's own compiled stylesheet and is left
 * untouched, so it stays a faithful copy. But it only ever knew about the
 * original's markup. Two kinds of page produce markup it has never seen:
 *
 *   1. WordPress pages, whose body is whatever the editor stored.
 *   2. WooCommerce, which prints its own classes for the shop, product page,
 *      basket and checkout.
 *
 * Everything below dresses those in the same tokens the original used, so a
 * WooCommerce button and a Label Cut button are the same button. Colours come
 * from next.css's :root - none are re-picked by eye.
 */

/* --------------------------------------------------------------- the fonts */

/*
 * The two lines that make the whole site use its own typefaces.
 *
 * next.css asks for them correctly - `body { font-family: var(--font-sans) }`
 * and `.font-display { font-family: var(--font-quicksand), ... }` - but it
 * never DEFINES those variables. In the Next.js app they came from next/font,
 * which emits them on hashed CSS-module classes:
 *
 *     .quicksand_faa39d84-module__gljJ8W__variable { --font-quicksand: 'Quicksand' }
 *     .inter_bc220a90-module__m5YftW__variable     { --font-inter: 'Inter' }
 *
 * and Next puts those class names on <html>. The capture brought the rules but
 * not the classes, so both variables were undefined here. An undefined variable
 * inside another custom property poisons it, so --font-sans and Tailwind's
 * --default-font-family both collapsed to nothing, and every heading and every
 * paragraph on the site fell back to the browser's system stack - Segoe UI on
 * Windows, San Francisco on a Mac.
 *
 * It was invisible in the sense that nothing looked broken; it just was not
 * Label Cut. Worse, both webfonts were still being DOWNLOADED, because the logo
 * SVG names Quicksand directly - so the site paid for two typefaces and then
 * used them for the logo alone.
 *
 * Defining them here rather than adding those hashed class names to <body> is
 * deliberate: the hashes change whenever the original is rebuilt, and a rule
 * keyed on one would break silently the next time.
 */
:root {
	--font-quicksand: 'Quicksand';
	--font-inter: 'Inter';
}

/* ------------------------------------------------------------------- hero */

/*
 * Room for the fanned sheets at the bottom of the hero.
 *
 * The three artwork cards are absolutely positioned inside a stack that is
 * exactly 400px tall, and they are rotated and offset so the lowest one reaches
 * about 460px - sixty past its own container. Absolute children add no height,
 * so the section never grew to hold them, and the section is overflow-hidden:
 * the bottom of the third sheet was sliced off flat against the green promise
 * strip, mid-row through the labels.
 *
 * It only became visible when the real fonts started applying. The heading had
 * been setting in the system font, wrapping differently and making the text
 * column tall enough to carry the section past the artwork. Quicksand sets
 * shorter, the text column dropped to 314px, and the artwork became what
 * decides the height - with nothing to spare.
 *
 * Padding rather than a taller stack, so every card keeps the exact position
 * the capture gave it. overflow-hidden has to stay: it is what stops the
 * decorative blush circle at -right-32 from causing a sideways scrollbar.
 */
.bg-cream.relative.overflow-hidden > .max-w-6xl.grid {
	padding-bottom: 5rem;
}

@media (min-width: 640px) {
	.bg-cream.relative.overflow-hidden > .max-w-6xl.grid {
		padding-bottom: 6.5rem;
	}
}

/* ------------------------------------------------------------------ prose */

.lc-prose {
	color: var(--plum);
	font-size: 15px;
	line-height: 1.75;
}
.lc-prose > * + * { margin-top: 1.1em; }
.lc-prose h2,
.lc-prose h3,
.lc-prose h4 {
	font-family: var(--lc-display, Quicksand, "Trebuchet MS", sans-serif);
	font-weight: 700;
	color: var(--plum);
	letter-spacing: -0.01em;
	margin-top: 2em;
}
.lc-prose h2 { font-size: 1.4rem; }
.lc-prose h3 { font-size: 1.15rem; }
.lc-prose h4 { font-size: 1rem; }
.lc-prose p,
.lc-prose li { color: var(--plum-muted); }
.lc-prose a { color: var(--rose); text-decoration: underline; }
.lc-prose a:hover { color: var(--plum); }
.lc-prose ul,
.lc-prose ol { padding-left: 1.25rem; }
.lc-prose ul { list-style: disc; }
.lc-prose ol { list-style: decimal; }
.lc-prose li + li { margin-top: 0.4em; }
.lc-prose strong { color: var(--plum); font-weight: 600; }
.lc-prose hr { border: 0; border-top: 1px solid var(--hairline); margin: 2.5em 0; }
.lc-prose blockquote {
	border-left: 3px solid var(--blush);
	padding-left: 1rem;
	color: var(--plum-muted);
}
.lc-prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lc-prose th,
.lc-prose td { border-bottom: 1px solid var(--hairline); padding: 0.6rem 0.5rem; text-align: left; }
.lc-prose th { font-family: var(--lc-display, Quicksand, sans-serif); color: var(--plum); }

/* --------------------------------------------------------- shop furniture */

.woocommerce-breadcrumb {
	color: var(--plum-faint);
	font-size: 12px;
	margin-bottom: 1.5rem;
}
.woocommerce-breadcrumb a { color: var(--plum-muted); }
.woocommerce-breadcrumb a:hover { color: var(--rose); }

.woocommerce-products-header__title,
.woocommerce-products-header h1,
.page-title {
	font-family: var(--lc-display, Quicksand, "Trebuchet MS", sans-serif);
	font-weight: 700;
	color: var(--plum);
	letter-spacing: -0.01em;
	font-size: 2.4rem;
}

.woocommerce-result-count { color: var(--plum-faint); font-size: 13px; }
.woocommerce-ordering select,
.woocommerce select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce textarea {
	background: var(--paper);
	border: 1px solid var(--hairline);
	border-radius: 999px;
	padding: 0.65rem 1rem;
	color: var(--plum);
	font-size: 14px;
	font-family: inherit;
}
.woocommerce textarea { border-radius: var(--radius-card); }
.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
	outline: 2px solid var(--rose);
	outline-offset: 2px;
}

/* ------------------------------------------------------------ product grid */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 2rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
	text-align: center;
}
/*
 * The whole sheet, not a square cut out of the top of it.
 *
 * This used to be `object-fit: cover` at 3/4, which threw the bottom of every
 * design away - under "Related products" a customer saw two rows of a fourteen
 * row sheet and had to guess at the rest. On a shop where the artwork IS the
 * product, that is the product being hidden.
 *
 * `contain` is only half the fix and cannot be the whole of it: WooCommerce was
 * also SERVING a hard-cropped 300x300 file, so the crop had already happened
 * before this rule ever saw the picture. labelcut-shop's includes/images.php
 * turns that off. Both halves are needed; either alone leaves it wrong.
 *
 * 5/7 is the sheets' own shape (1414 by 2000 is 0.707, 5/7 is 0.714), so they
 * fill the card with no visible letterboxing, while a square photograph or a
 * future landscape design still sits inside it whole rather than being cut.
 */
.woocommerce ul.products li.product a img {
	background: var(--paper);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-soft);
	width: 100%;
	aspect-ratio: 5 / 7;
	object-fit: contain;
	object-position: center;
	margin-bottom: 0.9rem;
	transition: box-shadow 200ms ease, transform 200ms ease;
}
.woocommerce ul.products li.product a:hover img {
	box-shadow: var(--shadow-lift);
	transform: translateY(-2px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--lc-display, Quicksand, "Trebuchet MS", sans-serif);
	font-weight: 700;
	font-size: 15px;
	color: var(--plum);
	padding: 0;
	margin: 0;
}
.woocommerce ul.products li.product .price {
	color: var(--plum-muted);
	font-size: 13px;
	font-weight: 500;
	display: block;
	margin-top: 0.25rem;
}
.woocommerce ul.products li.product .price del { opacity: 0.5; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--plum); }

/* ---------------------------------------------------------------- buttons */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--blush);
	color: var(--plum);
	font-family: var(--lc-display, Quicksand, "Trebuchet MS", sans-serif);
	font-weight: 600;
	font-size: 13px;
	padding: 0.6rem 1.35rem;
	box-shadow: var(--shadow-soft);
	transition: all 200ms ease;
	white-space: nowrap;
	text-decoration: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--blush-hover, #f3b9c0);
	color: var(--plum);
	box-shadow: var(--shadow-lift);
}
.woocommerce a.button:active,
.woocommerce button.button:active { transform: translateY(1px); }

/*
 * Butter is the accent the guideline allows exactly once on a page, and this
 * is where it earns it: the button that takes the money.
 */
.woocommerce button.single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce #place_order,
.woocommerce button[name="woocommerce_checkout_place_order"] {
	background: var(--butter);
	color: var(--plum);
	font-size: 14px;
	padding: 0.8rem 1.9rem;
	box-shadow: var(--shadow-lift);
}
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover { background: var(--butter-hover, #f9d96a); box-shadow: var(--shadow-raise); }

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

.woocommerce div.product .product_title {
	font-family: var(--lc-display, Quicksand, "Trebuchet MS", sans-serif);
	font-weight: 700;
	color: var(--plum);
	letter-spacing: -0.01em;
	font-size: 2rem;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--lc-display, Quicksand, "Trebuchet MS", sans-serif);
	font-weight: 700;
	color: var(--plum);
	font-size: 1.4rem;
}
/*
 * "per sticker", said after the price wherever the price appears.
 *
 * The markup comes from labelcut-shop, but the rule lives here rather than in
 * that plugin's own sheet because shop.css does not load on the shop archive
 * and this suffix does - it is printed on every price the shop renders. A
 * plugin style that only styles two thirds of the pages it appears on is worse
 * than no style at all.
 */
.labelcut-qty-each {
	font-family: var(--lc-body, Inter, system-ui, sans-serif);
	font-weight: 500;
	font-size: 0.72em;
	color: var(--plum-muted);
	letter-spacing: 0;
	white-space: nowrap;
}

.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-Tabs-panel { color: var(--plum-muted); font-size: 15px; line-height: 1.75; }
.woocommerce div.product div.images img { border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }

/*
 * A whole A4 sheet is tall. WooCommerce's layout sheet already puts it beside
 * the summary; this stops it running past the fold on a laptop and leaving
 * the price and the basket button somewhere below.
 */
@media (min-width: 769px) {
	.woocommerce div.product div.images img { max-height: 78vh; width: auto; }
	.woocommerce div.product div.images { text-align: center; }
}

/*
 * Related products must clear the two floated columns themselves.
 *
 * WooCommerce's product page floats the gallery left and the summary right,
 * and the thing that used to drop everything below them was the TAB STRIP -
 * `.woocommerce-tabs` carries `clear: both` in WooCommerce's own sheet. The
 * tabs were removed from this shop, and `.related` has no clear of its own, so
 * the heading landed alongside the floats: its line box was pushed below them
 * while the box itself still started at the top, which rendered as a 724px tall
 * "Related products" heading with a large blank gap under it.
 *
 * It looked like the related products had failed to load. They had not - they
 * were sitting 1200px further down the page.
 */
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products {
	clear: both;
}

/*
 * The live design preview, standing where the product photograph used to.
 *
 * It keeps WooCommerce's `images` class so woocommerce-layout.css still floats
 * it into the left column; only what is inside changed. The SVG is given the
 * same corners, shadow and fold-height cap the photograph had, so swapping one
 * for the other changes what the customer can DO, not how the page looks.
 */
.woocommerce div.product .labelcut-preview svg {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-soft);
	background: var(--paper);
}

@media (min-width: 769px) {
	.woocommerce div.product .labelcut-preview {
		text-align: center;
	}

	.woocommerce div.product .labelcut-preview svg {
		max-height: 78vh;
		width: auto;
		margin: 0 auto;
	}
}

/* The photographs of the real labels, under the live sheet. */

.labelcut-photos {
	margin-top: 1.5rem;
	text-align: left;
}

.labelcut-photos__title {
	margin: 0 0 0.7rem;
	font-family: var(--lc-display, Quicksand, "Trebuchet MS", sans-serif);
	font-weight: 600;
	font-size: 13px;
	color: var(--plum);
}

.labelcut-photos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 0.7rem;
}

/*
 * A button rather than a link, because it opens a lightbox rather than going
 * anywhere. Reset the button chrome so it reads as a photograph.
 */
.labelcut-photo {
	display: block;
	padding: 0;
	border: 1px solid var(--hairline);
	border-radius: 0.75rem;
	background: var(--paper);
	overflow: hidden;
	cursor: zoom-in;
	transition: box-shadow 150ms ease, transform 150ms ease;
}

/*
 * Beat the gallery rule that still applies here.
 *
 * Further up this sheet, `div.images img` is given `width: auto; max-height:
 * 78vh` so a whole A4 sheet does not run past the fold. These photographs sit
 * inside the same `images` wrapper, so they inherited it: each one took its
 * natural 720px width inside a 120px cell and was sliced off by the button's
 * overflow. Two properties, said louder.
 */
.woocommerce div.product .labelcut-photo img,
.labelcut-photo img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
}

.labelcut-photo:hover,
.labelcut-photo:focus-visible {
	box-shadow: var(--shadow-lift);
	transform: translateY(-2px);
}

.labelcut-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999997; /* under the WhatsApp button and the cookie notice */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5vmin;
	background: rgba(74, 59, 59, 0.72);
	cursor: zoom-out;
}

.labelcut-lightbox[hidden] { display: none; }

.labelcut-lightbox img {
	max-width: 100%;
	max-height: 90vh;
	border-radius: var(--radius-card);
	background: var(--paper);
	box-shadow: 0 10px 40px rgba(74, 59, 59, 0.35);
}

.labelcut-lightbox__close {
	position: absolute;
	top: 2vmin;
	right: 2vmin;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 50%;
	background: var(--paper);
	color: var(--plum);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.woocommerce div.product form.cart .variations { border: 0; }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { padding: 0.35rem 0 0.35rem; border: 0; }
.woocommerce div.product form.cart .variations label {
	font-family: var(--lc-display, Quicksand, sans-serif);
	font-weight: 600;
	color: var(--plum);
	font-size: 14px;
}
/*
 * The number box is the control now, not an afterthought beside a dropdown.
 *
 * It used to render about 50px wide and 40px tall - fine for the "1" nobody
 * ever changed when the sheets dropdown was doing the real work, too small for
 * a box somebody is meant to type 48 into. 44px tall is the thumb target the
 * funnel sheet uses everywhere else, and it also makes this line up with the
 * Add to basket button beside it, which it never did before.
 */
.woocommerce .quantity input.qty {
	border-radius: 999px;
	border: 1px solid var(--hairline);
	background: var(--paper);
	padding: 0.5rem;
	color: var(--plum);
	width: 4.75rem;
	min-height: 44px;
	text-align: center;
	font-weight: 600;
	font-size: 15px;
}

/*
 * Air around the row that takes the money.
 *
 * Number box, running total and button used to sit flush against each other
 * and flush against the promises below, which made three separate things read
 * as one crowded strip. Margin only - the floats stay WooCommerce's.
 */
.woocommerce div.product form.cart .quantity {
	margin: 0 0.35rem 0.75rem 0;
}

.woocommerce div.product form.cart button.single_add_to_cart_button {
	margin-bottom: 0.75rem;
}

/*
 * The typed lines are the heart of the product page - a name, a level, a
 * subject - so they sit on paper with room to breathe rather than looking
 * like an afterthought bolted under the price.
 */
.labelcut-fields,
.labelcut-personalisation {
	background: var(--paper);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-soft);
	padding: 1.25rem;
	margin: 1.25rem 0;
}
.labelcut-fields label,
.labelcut-personalisation label {
	display: block;
	font-family: var(--lc-display, Quicksand, sans-serif);
	font-weight: 600;
	color: var(--plum);
	font-size: 13px;
	margin-bottom: 0.3rem;
}
.labelcut-fields input,
.labelcut-personalisation input {
	width: 100%;
	background: var(--cream);
	border: 1px solid var(--hairline);
	border-radius: 999px;
	padding: 0.65rem 1rem;
	color: var(--plum);
	font-size: 14px;
}

/* ------------------------------------------------------- basket, checkout */

.woocommerce table.shop_table {
	border: 0;
	border-radius: var(--radius-card);
	background: var(--paper);
	box-shadow: var(--shadow-soft);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.woocommerce table.shop_table th {
	font-family: var(--lc-display, Quicksand, sans-serif);
	font-weight: 600;
	color: var(--plum);
	font-size: 13px;
	border: 0;
	border-bottom: 1px solid var(--hairline);
	padding: 0.9rem 1rem;
}
.woocommerce table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--hairline);
	padding: 0.9rem 1rem;
	color: var(--plum-muted);
	font-size: 14px;
}
.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }
.woocommerce table.shop_table .product-name a { color: var(--plum); font-weight: 500; }
.woocommerce table.shop_table .product-name a:hover { color: var(--rose); }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-billing-fields h3,
.woocommerce-checkout-review-order h3,
#order_review_heading {
	font-family: var(--lc-display, Quicksand, "Trebuchet MS", sans-serif);
	font-weight: 700;
	color: var(--plum);
	font-size: 1.15rem;
	margin-bottom: 0.75rem;
}
.woocommerce-checkout #payment {
	background: var(--paper);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-soft);
}
.woocommerce-checkout #payment div.payment_box { background: var(--cream); color: var(--plum-muted); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--cream); }
.woocommerce form .form-row label { color: var(--plum); font-size: 13px; font-family: var(--lc-display, Quicksand, sans-serif); font-weight: 600; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select { width: 100%; }

/* ---------------------------------------------------------------- notices */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	border-top: 0;
	border-radius: var(--radius-card);
	background: var(--paper);
	box-shadow: var(--shadow-soft);
	color: var(--plum);
	font-size: 14px;
	padding: 1rem 1.25rem 1rem 3rem;
}
.woocommerce-message::before { color: var(--mint); }
.woocommerce-info::before { color: var(--blush); }
.woocommerce-error { background: var(--error-bg, #fdf2f3); }
.woocommerce-error::before { color: var(--rose); }

/* WooCommerce's own pagination, in the brand's shape. */
.woocommerce nav.woocommerce-pagination ul { border: 0; gap: 0.4rem; display: inline-flex; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border-radius: 999px;
	background: var(--paper);
	color: var(--plum);
	box-shadow: var(--shadow-soft);
	padding: 0.4rem 0.8rem;
	font-size: 13px;
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--blush); }

/* ------------------------------------------- WooCommerce Blocks: basket, checkout
 *
 * The basket and checkout on this shop are the BLOCK versions, not the classic
 * shortcode templates. Their markup is wc-block-* and shares nothing with the
 * .woocommerce selectors above, so everything they need lives here.
 *
 * The layout is WooCommerce's own two-column sidebar layout, kept: it is what
 * makes the checkout collapse properly on a phone, and it is what Mamo's card
 * fields are laid out inside. What changed is the WIDTH it gets - see
 * page-cart.php - and the look of everything inside it. The wording is
 * assets/basket-checkout.js, which also writes the .lc-* elements below.
 *
 * !important appears more than anywhere else in this file. The blocks ship
 * their own stylesheet with long compound selectors, and on the two pages
 * that take money "usually wins" is not good enough.
 */

/* ------------------------------------------------------------ the frame */

/*
 * The sidebar layout gives the main column 65% and the summary 35% with a
 * 4% gutter, from a 100% width. At 1152px that is a 403px summary, which is
 * room for "Black and White Minimalist" on one line with the price beside it.
 * The summary sticks under the header on tall screens so the total is always
 * in view while the address is being typed.
 */
.lc-shop-page .wc-block-components-sidebar-layout { margin: 0; }

@media (min-width: 1024px) {
	.lc-shop-page .wc-block-components-sidebar {
		position: sticky;
		top: 5.5rem;
		align-self: flex-start;
	}
}

/* Both sidebars are cards; the main column sits directly on the cream. */
.lc-shop-page .wc-block-cart__sidebar,
.lc-shop-page .wc-block-checkout__sidebar {
	background: var(--paper);
	border-radius: var(--radius-panel);
	box-shadow: var(--shadow-soft);
	padding: 1.25rem 1.5rem 1.5rem !important;
}

/* The blocks' own hairlines, in the brand's colour. */
.wc-block-components-totals-wrapper,
.wc-block-cart-items__row,
.wc-block-cart-items__header,
.wc-block-components-order-summary-item,
.wc-block-components-panel__button,
.wc-block-checkout__terms--with-separator {
	border-color: var(--hairline) !important;
}

/* ---------------------------------------------------------- the words */

.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-order-summary__title-text,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	font-family: var(--lc-display, Quicksand, "Trebuchet MS", sans-serif) !important;
	font-weight: 700 !important;
	color: var(--plum) !important;
	letter-spacing: 0;
}

/* "Your basket" is a card heading, not a table caption. */
.wc-block-cart__totals-title {
	border: 0 !important;
	padding: 0 0 0.75rem !important;
	text-align: left !important;
	text-transform: none !important;
	font-size: 1.15rem !important;
}

/* The checkout's step headings, on the cream, with room above each. */
.wc-block-components-checkout-step__title { font-size: 1.2rem !important; margin: 0 !important; }
.wc-block-components-checkout-step { margin-top: 1rem; }
.wc-block-components-checkout-step__heading { margin: 1.25rem 0 0.9rem !important; }
.wc-block-components-checkout-step__heading-content { display: none; }

/* Nobody has an account on this shop; there is nothing to sign in to. */
.wc-block-checkout__guest-checkout-notice { display: none !important; }

/* ------------------------------------------------------- a basket line */

.wc-block-cart-items__header { display: none !important; }

.wc-block-cart-items__row {
	padding: 1.1rem 0 !important;
}

.wc-block-cart-item__image img {
	border-radius: 0.75rem;
	box-shadow: var(--shadow-soft);
	background: var(--paper);
}

/* The design's name, then the name the customer typed, then the maths. */
.wc-block-components-product-name {
	font-family: var(--lc-display, Quicksand, "Trebuchet MS", sans-serif) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	color: var(--plum) !important;
	text-decoration: none !important;
	line-height: 1.3;
}
.wc-block-components-product-name:hover { color: var(--rose) !important; }

/*
 * The tier pricing is a sale under the hood, so every line carries a struck
 * unit price, a discounted one and a "Save AED 16.20" badge. One quiet maths
 * line replaces all three; basket-checkout.js writes it.
 */
.wc-block-cart-item__prices,
.wc-block-components-sale-badge,
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-product-metadata__description { display: none !important; }

.lc-maths {
	margin-top: 0.15rem;
	font-size: 13px;
	color: var(--plum-muted);
	font-variant-numeric: tabular-nums;
}

/* "Name: Mufid" - the label quiet, the name itself in plum. */
.wc-block-components-product-metadata { margin-top: 0.35rem !important; }
.wc-block-components-product-details,
.wc-block-components-product-details li,
.wc-block-components-product-details__name {
	font-size: 13px !important;
	color: var(--plum-muted) !important;
	font-weight: 400 !important;
	margin: 0 !important;
}
.wc-block-components-product-details__value {
	color: var(--plum) !important;
	font-weight: 500;
}

/* The line total, in the display face, so it reads as the one that matters. */
.wc-block-cart-item__total .wc-block-components-product-price__value,
.wc-block-components-order-summary-item__total-price {
	font-family: var(--lc-display, Quicksand, "Trebuchet MS", sans-serif);
	font-weight: 700;
	font-size: 15px;
	color: var(--plum) !important;
	font-variant-numeric: tabular-nums;
}

/* The stepper, as a pill. */
.wc-block-cart-item__quantity { margin-top: 0.75rem !important; }
.wc-block-components-quantity-selector {
	border-radius: 999px !important;
	border: 1px solid var(--hairline) !important;
	background: var(--paper);
	box-shadow: none !important;
	margin: 0 !important;
	width: auto !important;
	min-width: 7.5rem;
}
.wc-block-components-quantity-selector::after { display: none !important; }
.wc-block-components-quantity-selector__input {
	font-family: var(--lc-display, Quicksand, "Trebuchet MS", sans-serif) !important;
	font-weight: 700 !important;
	color: var(--plum) !important;
	font-size: 14px !important;
}
.wc-block-components-quantity-selector__button {
	color: var(--plum-muted) !important;
	font-size: 18px !important;
	min-width: 2.25rem !important;
}
.wc-block-components-quantity-selector__button:hover { color: var(--rose) !important; }
.wc-block-cart-item__remove-link {
	color: var(--plum-faint) !important;
	margin-left: 0.5rem !important;
}
.wc-block-cart-item__remove-link:hover { color: var(--rose) !important; }

/* -------------------------------------------------------- the totals */

.wc-block-components-totals-item {
	color: var(--plum);
	font-size: 14px;
	padding: 0.55rem 0 !important;
	font-variant-numeric: tabular-nums;
}
.wc-block-components-totals-item__label { color: var(--plum-muted); font-weight: 400 !important; }
.wc-block-components-totals-item__value { color: var(--plum); }
.wc-block-components-totals-item__description { color: var(--plum-faint); font-size: 12px; }

/* The sidebar's rows have no side padding: the card provides it. */
.wc-block-components-totals-wrapper { padding: 0.35rem 0 !important; }
.wc-block-components-totals-wrapper .wc-block-components-totals-item,
.wc-block-components-totals-coupon,
.wc-block-components-panel__button,
.wc-block-components-panel__content { padding-left: 0 !important; padding-right: 0 !important; }

/* Total: display face, bigger, the only bold row. */
.wc-block-components-totals-footer-item {
	padding: 0.9rem 0 0.35rem !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--lc-display, Quicksand, "Trebuchet MS", sans-serif) !important;
	font-weight: 700 !important;
	font-size: 1.25rem !important;
	color: var(--plum) !important;
}

/* The coupon: a quiet link, not a step. */
.wc-block-components-panel__button {
	font-size: 13px !important;
	color: var(--plum-muted) !important;
	font-weight: 400 !important;
	border-top: 0 !important;
}
.wc-block-components-panel__button:hover { color: var(--rose) !important; }
.wc-block-components-panel__button-icon { width: 16px; height: 16px; }

/*
 * The free-delivery note, once basket-checkout.js has moved it under the
 * delivery row. Before that it is the paper card above the basket, which is
 * what a visitor without JavaScript keeps.
 */
.lc-ship-note {
	background: var(--paper);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-soft);
	padding: 0.9rem 1.25rem;
	margin: 0 0 1.5rem;
	font-size: 14px;
	color: var(--plum);
}
.lc-ship-note strong { font-family: var(--lc-display, Quicksand, sans-serif); }
.lc-ship-note--inside {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0 0 0.5rem;
	margin: -0.15rem 0 0;
	font-size: 12px;
	color: var(--plum-muted);
}
.lc-ship-note--inside strong { font-weight: 500; font-family: inherit; }

/* ------------------------------------------------------- the buttons */

.wc-block-components-button,
.wc-block-components-button.wp-element-button {
	border-radius: 999px !important;
	background: var(--blush) !important;
	color: var(--plum) !important;
	font-family: var(--lc-display, Quicksand, "Trebuchet MS", sans-serif) !important;
	font-weight: 700 !important;
	box-shadow: var(--shadow-soft);
	border: 0 !important;
	transition: all 200ms ease;
}
.wc-block-components-button:hover { background: var(--blush-hover, #f3b9c0) !important; color: var(--plum) !important; box-shadow: var(--shadow-lift); }
.wc-block-components-button__text { color: inherit; }

/* Butter, once per page, on the button that moves the order on. Both class
   names are needed: the blush rule above names two classes, and with both
   marked !important the one with more classes wins regardless of order. */
.wc-block-components-button.wc-block-cart__submit-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button {
	background: var(--butter) !important;
	color: var(--plum) !important;
	box-shadow: var(--shadow-lift);
	font-size: 15px !important;
	padding: 0.95rem 1.5rem !important;
	min-height: 3rem;
	width: 100%;
}
.wc-block-components-button.wc-block-cart__submit-button:hover,
.wc-block-components-button.wc-block-components-checkout-place-order-button:hover { background: var(--butter-hover, #f9d96a) !important; box-shadow: var(--shadow-raise); }
.wc-block-cart__submit-container { padding: 0.75rem 0 0 !important; }
.wc-block-cart__submit-container::before { display: none !important; }

.wc-block-components-checkout-return-to-cart-button {
	color: var(--plum-muted) !important;
	font-size: 13px;
}

/* --------------------------------------------------------- the fields */

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container,
.wc-blocks-components-select__container,
.wc-blocks-components-select__select {
	border-radius: var(--radius-card) !important;
	background: var(--paper) !important;
	border-color: var(--hairline) !important;
	color: var(--plum) !important;
	box-shadow: var(--shadow-soft);
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select__select:focus { outline: 2px solid var(--rose); outline-offset: 2px; border-color: var(--hairline) !important; box-shadow: none !important; }
.wc-block-components-text-input label,
.wc-blocks-components-select__label,
.wc-block-components-checkbox__label { color: var(--plum-muted) !important; font-size: 14px; }
.wc-block-components-text-input.is-active label,
.wc-blocks-components-select.is-active .wc-blocks-components-select__label { color: var(--plum-faint) !important; }
.wc-block-components-address-form__address_2-toggle { color: var(--plum-muted) !important; font-size: 13px; }

/* The saved-address card, the same paper the fields sit on. */
.wc-block-components-address-card {
	background: var(--paper) !important;
	border: 1px solid var(--hairline) !important;
	border-radius: var(--radius-card) !important;
	box-shadow: var(--shadow-soft);
	color: var(--plum);
}
.wc-block-components-address-card__edit { color: var(--plum-muted) !important; }

.wc-block-components-checkbox .wc-block-components-checkbox__input:checked { background: var(--rose) !important; border-color: var(--rose) !important; }
.wc-block-components-checkbox .wc-block-components-checkbox__input:checked + .wc-block-components-checkbox__mark { color: var(--ink, #fff); }

/* The address form is a grid; without this the note takes the cell beside
   the phone field instead of the row under it. */
.lc-phone-note {
	grid-column: 1 / -1;
	flex-basis: 100%;
	width: 100%;
	clear: both;
	margin: -0.5rem 0 0.9rem !important;
	font-size: 12px;
	color: var(--plum-faint);
}

/* --------------------------------------------------------- delivery */

/*
 * One rate means no choice, and a radio with a single option is a question
 * with one answer. When the step holds exactly one rate it goes, and the
 * sentence basket-checkout.js writes stands where it was. If a second rate
 * is ever added the step comes back on its own.
 */
.wp-block-woocommerce-checkout-shipping-methods-block:has(.wc-block-components-radio-control__option:only-child) { display: none !important; }

.lc-delivery-line {
	margin: 1.25rem 0 0 !important;
	padding: 0.85rem 1.1rem;
	background: var(--mint);
	border-radius: var(--radius-card);
	font-size: 14px;
	color: var(--plum);
	line-height: 1.5;
}

/* --------------------------------------------------------- payment */

/*
 * WooCommerce draws its own frames here: an inset 1.5px plum ring on every
 * payment option, and a 1px box around the whole order summary. Both read as
 * stray lines inside the paper cards, so both go; the card and the blush
 * ring below are the only edges left.
 */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option,
#payment-method .wc-block-components-radio-control__option { box-shadow: none !important; outline: 0 !important; }

.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control--highlight-checked > .wc-block-components-radio-control__option {
	border-radius: var(--radius-card) !important;
	background: var(--paper);
	border: 1px solid var(--hairline) !important;
	box-shadow: var(--shadow-soft);
	margin-bottom: 0.6rem;
}
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked > .wc-block-components-radio-control__option--checked-option-highlighted {
	border-color: var(--blush) !important;
	box-shadow: 0 0 0 3px rgba(247, 201, 206, 0.45), var(--shadow-soft) !important;
}
.wc-block-components-radio-control__option { padding-left: 3rem !important; }
.wc-block-components-radio-control__input { border-color: var(--hairline, #eadfd6) !important; }
.wc-block-components-radio-control__input:checked { border-color: var(--rose) !important; }
.wc-block-components-radio-control__input:checked::before { background: var(--rose) !important; }

/* The gateway's name and the card icons, one line. */
.wc-block-components-radio-control__label-group {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: nowrap !important;
}
.wc-block-components-radio-control__label,
.wc-block-components-payment-method-label {
	font-family: var(--lc-display, Quicksand, "Trebuchet MS", sans-serif);
	font-weight: 700;
	font-size: 15px;
	color: var(--plum);
	white-space: nowrap;
}
.wc-block-components-payment-method-icons { margin: 0 !important; flex: none; }
.wc-block-components-payment-method-icon { height: 22px !important; }

.wc-block-components-radio-control-accordion-content {
	padding: 0 1.25rem 1.25rem !important;
	color: var(--plum-muted);
	font-size: 14px;
}
.wc-block-components-radio-control-accordion-content p { color: var(--plum-muted); }

/* ------------------------------------------------ terms, place order */

.wc-block-checkout__terms {
	color: var(--plum-faint) !important;
	font-size: 12px;
	padding-top: 1.25rem;
}
.wc-block-checkout__terms a { color: var(--plum-muted); }
.wc-block-checkout__actions_row { padding: 0.75rem 0 0 !important; }

.lc-place-note {
	margin: 0.9rem 0 0 !important;
	text-align: center;
	font-size: 13px;
	color: var(--plum-muted);
	line-height: 1.5;
}

/* -------------------------------------------------- checkout summary */

.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-checkout-order-summary { border: 0 !important; }

.wc-block-components-checkout-order-summary__title { padding: 0 0 0.75rem !important; }
.wc-block-components-checkout-order-summary__title-text { font-size: 1.15rem !important; margin: 0 !important; }
.wc-block-components-order-summary-item { padding: 0.9rem 0 !important; }
.wc-block-components-order-summary-item__image img {
	border-radius: 0.6rem;
	box-shadow: var(--shadow-soft);
	background: var(--paper);
}
.wc-block-components-order-summary-item__quantity {
	background: var(--plum) !important;
	color: var(--cream) !important;
	border: 2px solid var(--paper) !important;
	box-shadow: none !important;
	font-family: var(--lc-display, Quicksand, "Trebuchet MS", sans-serif);
	font-weight: 700;
}
.wc-block-components-order-summary-item__description { padding-left: 1rem !important; }
.wc-block-components-order-summary-item__description h3 { margin: 0 !important; }
.wc-block-components-order-summary-item__total-price { margin-left: 0.75rem; }

/* -------------------------------------------------------- the phone */

/*
 * The bar with the total and "Go to checkout", written by
 * basket-checkout.js and shown once the real button has left the screen.
 * It stands above the cookie notice when both are open - the notice writes
 * its own height into --labelcut-consent-height.
 */
.lc-sticky {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 1.25rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 249, 242, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid var(--hairline);
	transform: translateY(110%);
	transition: transform 220ms ease;
}
.lc-sticky.is-up:not(.is-empty) { transform: none; }
body.labelcut-consent-open .lc-sticky { bottom: var(--labelcut-consent-height, 0px); }
.lc-sticky__text { display: flex; flex-direction: column; line-height: 1.2; }
.lc-sticky__label { font-size: 11px; color: var(--plum-muted); text-transform: uppercase; letter-spacing: 1.5px; }
.lc-sticky__total { font-family: var(--lc-display, Quicksand, "Trebuchet MS", sans-serif); font-weight: 700; font-size: 1.1rem; color: var(--plum); font-variant-numeric: tabular-nums; }
.lc-sticky__button {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0 1.5rem;
	border-radius: 999px;
	background: var(--butter);
	color: var(--plum);
	font-family: var(--lc-display, Quicksand, "Trebuchet MS", sans-serif);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	box-shadow: var(--shadow-lift);
}
.lc-sticky__button:hover { background: var(--butter-hover, #f9d96a); color: var(--plum); }
.lc-sticky__button:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

@media (max-width: 767px) {
	.lc-sticky { display: flex; }
	.lc-shop-page .wc-block-cart__sidebar,
	.lc-shop-page .wc-block-checkout__sidebar { padding: 1rem 1.1rem 1.25rem !important; }
	.wc-block-cart-items__row { grid-template-columns: 72px 1fr !important; }
	.wc-block-components-checkout-step__title { font-size: 1.1rem !important; }
}

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

/*
 * The basket link in the header: a drawn basket with a handle, the word, and
 * the count. The icon is inline SVG so it takes the link's colour and turns
 * rose on hover with the word. Below the sm breakpoint the desktop link is
 * hidden by its own utilities, and the copy in the mobile menu shows instead.
 */
.lc-basket { display: inline-flex; align-items: center; gap: 0.4rem; }
.lc-basket-icon { flex: none; display: block; position: relative; top: -1px; width: 26px; height: 26px; }

/* In the top bar the icon stands alone; the word stays for screen readers
   through the link's aria-label. The mobile menu is a list of words, so the
   word stays visible there. */
header .lc-basket .lc-basket-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#lc-mobile-nav .lc-basket { display: flex; }
#lc-mobile-nav .lc-basket .lc-basket-word { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
#lc-mobile-nav .lc-basket-icon { width: 20px; height: 20px; }

/* The quiet header's way back, on the checkout form. */
.lc-back { display: inline-flex; align-items: center; gap: 0.4rem; }


/*
 * The three promises under the basket and the checkout, from labelcut-shop.
 * On the product page they are a card; here they are one quiet row, because
 * the page above them is the thing being decided and a card taller than the
 * basket itself was pulling the eye down from it.
 */
.lc-shop-page .labelcut-trust {
	margin: 1.5rem 0 0;
	padding: 0;
	background: transparent;
	border: 0;
}
.lc-shop-page .labelcut-trust ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.75rem;
}
.lc-shop-page .labelcut-trust li {
	flex-direction: row;
	align-items: baseline;
	gap: 0.4rem;
	padding-left: 0;
	border-left: 0;
}
.lc-shop-page .labelcut-trust li::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: var(--mint);
	position: relative;
	top: -1px;
}
.lc-shop-page .labelcut-trust strong { font-size: 13px; font-weight: 500; font-family: var(--lc-display, Quicksand, sans-serif); }
.lc-shop-page .labelcut-trust span { display: none; }

/* ------------------------------------------------------ the promise strip */

/*
 * next.css animates .marquee-track over 38 seconds and moves it half a track,
 * so the strip's speed depends on how long the track is. parts/home/marquee.php
 * prints the six promises several times over - one run is 1037px and a single
 * run left the right-hand third of a desktop screen empty - and publishes the
 * count as --lc-marquee-runs, so the duration can grow with it and the strip
 * still travels the original's 27 pixels a second.
 *
 * Two selectors deep so it beats next.css's .marquee-track shorthand on
 * specificity rather than on load order, and no !important, so the
 * reduced-motion rule that pins every animation to .001ms still wins.
 */
.lc-strip .marquee-track {
	animation-duration: calc(var(--lc-marquee-runs, 1) * 38s);
}

/* ------------------------------------------------------- social profiles */

/*
 * The Facebook and Instagram links in the footer: each platform's own colour
 * as a filled disc, with the mark knocked out of it in white.
 *
 * Written here rather than as Tailwind utilities in footer.php for the reason
 * the top of this file gives: next.css is COMPILED Tailwind output, so it only
 * contains the classes the original site happened to use. A size-9 or a gap-2
 * that the Next.js app never wrote does not exist in it, and would have been a
 * class that silently does nothing.
 *
 * The colours live here rather than on the SVG because the disc is what
 * carries them, and a disc is a background. That also keeps Instagram's
 * gradient out of the markup: an SVG gradient is referenced by id, and the day
 * the Contact page renders this row as well, two copies of the same id on one
 * page paint the second one from the first one's gradient or from nothing.
 */
.lc-social {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.lc-social li { margin: 0; }

.lc-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	color: var(--plum-muted, #8a7a7a);
	background: var(--paper, #ffffff);
	box-shadow: var(--shadow-soft);
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/*
 * THE PLATFORM COLOURS ARE DELIBERATELY GONE.
 *
 * These used to be Facebook's #1877f2 disc and Instagram's five-stop
 * yellow-to-blue sweep, both taken from those companies' brand guidance. That
 * is the conventional choice and it was wrong here: two saturated foreign
 * palettes in the corner of a near-black page, owned by somebody else, pulling
 * the eye away from the one accent this brand has.
 *
 * Monochrome at rest, accent on hover. The mark is still unmistakably theirs -
 * a shape reads as Instagram long before its gradient does - and the footer
 * now belongs to Label Cut. The glyph is painted in currentColor, so the two
 * rules here move it without touching the SVG.
 */
.lc-social a:hover,
.lc-social a:focus-visible {
	background: var(--rose, #e8848f);
	color: var(--ink, #ffffff);
	box-shadow: var(--shadow-lift);
	transform: translateY(-1px);
}

.lc-social a:focus-visible {
	outline: 2px solid var(--plum);
	outline-offset: 2px;
}

/*
 * Height as well as width. Without it the icon is laid out at the viewBox's
 * own aspect against an auto height and the disc's contents stretch on Safari,
 * which is the one browser that does not resolve it from the ratio.
 *
 * The two marks are sized apart on purpose. The "f" is a tall letterform on a
 * 320x512 grid, so at the camera's size it towers over it; three quarters of
 * the height is what makes the pair look like one set.
 */
.lc-social svg {
	display: block;
	width: 1.0625rem;
	height: 1.0625rem;
}

.lc-social .lc-social-facebook svg {
	width: 0.8125rem;
	height: 0.8125rem;
}

/* The transform is decoration; a visitor who has asked for less motion keeps
   the shadow and loses the lift. */
@media (prefers-reduced-motion: reduce) {
	.lc-social a { transition: box-shadow 0.2s ease; }
	.lc-social a:hover,
	.lc-social a:focus-visible { transform: none; }
}

/* --------------------------------------------------------- the Shop menu */

/*
 * The header's Shop dropdown, added 12 September 2026 with the four ranges.
 *
 * WHY IT IS WRITTEN HERE RATHER THAN IN TAILWIND CLASSES. assets/next.css is
 * the original project's compiled output and contains only the utilities that
 * project used. A dropdown was not one of them, so half the classes this needs
 * - the widths, the absolute panel, the hover reveal - were never compiled and
 * would land in the markup matching nothing. Anything genuinely new is written
 * here, against the same custom properties next.css already defines, so the
 * colours and shadows are the system's and not re-picked by eye.
 *
 * WHY NO JAVASCRIPT. :focus-within carries the keyboard, :hover the mouse, and
 * the panel does not exist below 768px at all - the hamburger lists the four
 * ranges outright instead. A touch device therefore never meets it. That is the
 * right trade for a shop where close to four orders in five are placed on a
 * phone: the desktop gets a convenience, the phone gets the whole list.
 *
 * visibility is animated alongside opacity on purpose. Opacity alone leaves an
 * invisible panel sitting over the page swallowing clicks on whatever is
 * underneath it.
 */
.lc-nav-group {
	position: relative;
}

.lc-nav-top {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.lc-nav-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 60;
	padding-top: 14px;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -4px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.lc-nav-group:hover .lc-nav-menu,
.lc-nav-group:focus-within .lc-nav-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.lc-nav-panel {
	min-width: 16rem;
	padding: 8px 0;
	border-radius: var(--radius-card);
	background: var(--paper);
	box-shadow: var(--shadow-raise);
}

.lc-nav-panel a {
	display: block;
	padding: 9px 20px;
	font-size: 14px;
	line-height: 1.25;
	color: var(--plum);
	text-decoration: none;
	transition: color .15s ease;
}

.lc-nav-panel a:hover,
.lc-nav-panel a:focus-visible {
	color: var(--rose);
}

.lc-nav-panel small {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	color: var(--plum-faint);
}

.lc-nav-panel .lc-nav-all {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--hairline);
	font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
	.lc-nav-menu {
		transition: none;
	}
}