/* ==========================================================================
   WooCommerce.

   The catalogue is the heart of the site, so the product card gets the most
   attention: a tall 3:4 frame, no visible card edge, and the glow doing the
   work on hover.

   The frame is INK, not a pale plinth. This is the single most consequential
   decision in this file and it follows from the photography: the GLASS LPS
   images are shot on black. Dropping a black-background photograph onto a
   warm-white plinth produces a hard rectangle of black floating in a pale
   box — the exact failure that makes a luxury catalogue look like a scraped
   marketplace listing. On an ink frame the background of the photograph and
   the frame resolve to the same darkness, the mount disappears, and the
   crystal reads as an object lit in a void.

   The page around it stays alabaster. That contrast — bright editorial page,
   dark object stages — is the design, rather than an accident of the source
   images.
   ========================================================================== */

/* Astra + Woo both try to own the shop wrapper width; settle it here. */
.woocommerce .site-content .ast-container {
	max-width: var(--lb-container);
}

/* ---------------------------------------------------------------------------
   Archive head.

   These two were hidden, on the stated grounds that "the archive header in
   woocommerce/archive-product.php replaces them". That template does not
   exist — there is no woocommerce/ directory in this theme at all — so
   nothing replaced them, and the shop has been shipping with no visible
   heading and no result count, with an `<h1>` present in the markup but set
   to display:none. Invisible headings are the worst of both worlds: search
   engines read them, customers cannot.

   So they are shown and styled instead. On a 627-product catalogue the count
   is genuinely load-bearing — it is how somebody knows whether a filter did
   anything.
   --------------------------------------------------------------------------- */
.woocommerce .woocommerce-products-header {
	margin-bottom: var(--lb-space-md);
}

.woocommerce .woocommerce-products-header__title {
	font-size: var(--lb-size-h1);
	margin: 0;
}

.woocommerce .woocommerce-result-count {
	margin: 0;
	font-size: var(--lb-size-small);
	color: var(--lb-on-surface-muted);
}

/* ---------------------------------------------------------------------------
   Product loop
   --------------------------------------------------------------------------- */
/* The gallery panel.

   Same rule as the homepage: photographs sit on ink, words sit on paper. The
   archive's heading, count, sorting and pagination are words and stay on the
   page's alabaster; the grid itself becomes an ink panel, so every product is
   a lit object floating in a dark field rather than a photograph in a box.

   A full-bleed band, not a floating panel. The panel version read as a black
   slab dropped onto the page: it had four hard corners in the middle of an
   alabaster field, and the eye saw the rectangle before it saw the products.
   Running the ink edge to edge makes it a band the page passes through, which
   is the same move the hero and showpiece make on the front page.

   The mechanics matter here. Full bleed normally means `width: 100vw` with a
   negative margin, and 100vw includes the scrollbar — measured at 1280 that
   pushed the document to 1273px against a 1265px viewport and gave every
   archive a horizontal scrollbar. Two things fix it: `overflow-x: clip` on
   .site-content (in layout.css) absorbs the overhang without creating a
   scroll container, and the margin/padding pair below are exact inverses, so
   the grid's contents land back on the container's own edge — measured, the
   first tile, the heading and the result count all start at the same pixel.

   The token flip is what makes the contents legible: titles, prices and
   hairlines inside the panel read as if they were in an .lb-on-ink section,
   because as far as they are concerned they are. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	--lb-surface:          var(--lb-ink);
	--lb-on-surface:       var(--lb-text-on-ink);
	--lb-on-surface-muted: var(--lb-text-on-ink-muted);
	--lb-rule:             var(--lb-ink-line);
	--lb-accent:           var(--lb-gold-bright);
	--ast-global-color-0:  var(--lb-gold-bright);
	--ast-global-color-2:  var(--lb-text-on-ink);
	--ast-global-color-3:  var(--lb-text-on-ink);
	--ast-border-color:    var(--lb-ink-line);
	color-scheme: dark;
	background-color: var(--lb-surface);
	color: var(--lb-on-surface);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: clamp(1.5rem, 3vw, 3rem) clamp(1.25rem, 2.5vw, 2.5rem);
	/* No `margin: 0; padding: 0` shorthands here: they used to close this rule
	   and would silently cancel the full-bleed longhands in the archive rule
	   below. */
	margin-block: 0;
	list-style: none;
}

/* The full bleed belongs to the archives only.

   Applied to every ul.products it also caught the homepage's Selecție grid,
   which sits inside an .lb-section that already carries its own vertical
   rhythm — so the band's padding stacked on the section's and left a band of
   empty ink under the last row, visible as a gap above "Se face la comandă".
   On the front page the grid is one element inside a composed section; only
   on an archive is it the page's whole subject. */
body.woocommerce-shop .woocommerce ul.products,
body.post-type-archive-product .woocommerce ul.products,
body.tax-product_cat .woocommerce ul.products,
body.tax-product_tag .woocommerce ul.products,
body.woocommerce-page.search-results .woocommerce ul.products {
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	padding-block: var(--lb-space-3xl);
}

/* Neutralise Woo's float/percentage grid, which fights CSS grid. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	text-align: left;
	position: relative;
	display: flex;
	flex-direction: column;
}

/* The plinth. Square, object centred with breathing room.

   Square rather than portrait for the same reason as the category tiles: the
   catalogue's images are square files and `contain` fits them to the narrower
   axis, so a 3:4 plinth added a band of dead black above and below every
   product without making any chandelier a pixel bigger. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product .lb-product-media {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--lb-radius);
	/* An ink plinth, on what is now a light page.

	   The previous note here argued for no fill: page and photograph were
	   both black, so the object "simply floated". That was the theory. In
	   practice it is why the catalogue read as nothing at all — a black
	   object on a black card on a black page has no edges anywhere, and a
	   customer scanning 627 products could not tell where one stopped and
	   the next began.

	   Filling the frame with ink under a light page gives every photograph
	   the same dark stage regardless of what its own background does, and
	   turns the grid into a row of lit objects. The feather mask above fades
	   each image into this fill rather than into the page, so the plinth's
	   edge stays crisp while the photograph's never appears. */
	background-color: var(--lb-ink);
	margin-bottom: var(--lb-space-md);
}

.woocommerce ul.products li.product img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Contain, not cover: cropping a chandelier cuts its silhouette, which is
	   the entire product. Padding keeps it off the edges. */
	padding: clamp(0.25rem, 1.5%, 0.9rem);
	margin: 0;
	box-shadow: none;
	transition: transform var(--lb-dur-slow) var(--lb-ease-out);
}

/* --- Titles: serif, generous, never truncated. A SKU-style name like
   "L14 003/12/1 SWAROVSKI ELEMENTS; F cut" needs room to wrap. ---------- */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--lb-font-display);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
	padding: 0;
	margin: 0 0 var(--lb-space-2xs);
	color: var(--lb-on-surface);
	text-wrap: pretty;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	color: var(--lb-accent);
}

/* Collection name above the title, set as an eyebrow. Output by the theme's
   loop template, not by Woo. */
.lb-product-collection,
.woocommerce ul.products li.product .ast-woo-product-category {
	display: block;
	font-size: var(--lb-size-micro);
	letter-spacing: var(--lb-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--lb-on-surface-muted);
	margin-bottom: var(--lb-space-xs);
}

/* --- Price ---------------------------------------------------------------- */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--lb-font-body);
	font-size: var(--lb-size-small);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--lb-on-surface);
	margin: 0;
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
	color: var(--lb-on-surface-muted);
	opacity: 1;
	margin-right: var(--lb-space-xs);
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
	text-decoration: none;
	color: var(--lb-accent);
	font-weight: 600;
}

/* "Preț la cerere" — the fallback when a product carries no price, which is
   how the GLASS LPS catalogue itself works. Styled as a quiet statement, not
   as a missing value. */
.lb-price-on-request {
	font-family: var(--lb-font-display);
	font-size: 1.0625rem;
	font-style: italic;
	color: var(--lb-accent);
}

/* --- The loop button. Hidden until hover on pointer devices: a wall of
   buttons cheapens the grid. Always present for touch and keyboard. ------ */
.woocommerce ul.products li.product .button {
	margin-top: var(--lb-space-sm);
	align-self: flex-start;
	padding: 0.9em 1.8em;
	font-size: var(--lb-size-micro);
}

@media (hover: hover) and (pointer: fine) {
	.woocommerce ul.products li.product .button {
		opacity: 0;
		transform: translateY(0.4rem);
		transition:
			opacity var(--lb-dur) var(--lb-ease),
			transform var(--lb-dur) var(--lb-ease),
			color var(--lb-dur) var(--lb-ease);
	}
	.woocommerce ul.products li.product:hover .button,
	.woocommerce ul.products li.product:focus-within .button {
		opacity: 1;
		transform: none;
	}
}

/* --- Sale badge: a small gold rule-and-caps mark, not a red circle. ----- */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: var(--lb-space-md);
	left: var(--lb-space-md);
	right: auto;
	z-index: 3;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	padding: 0.55em 1em;
	border-radius: var(--lb-radius-sm);
	/* On an ink stage an ink badge is invisible, so it becomes a hairline
	   mark: gold caps inside a gold rule, over the photograph. */
	background: rgba(11, 13, 18, 0.72);
	box-shadow: inset 0 0 0 1px rgba(199, 164, 97, 0.55);
	color: var(--lb-gold-bright);
	font-family: var(--lb-font-body);
	font-size: var(--lb-size-micro);
	font-weight: 500;
	letter-spacing: var(--lb-tracking-eyebrow);
	text-transform: uppercase;
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Sorting / toolbar
   --------------------------------------------------------------------------- */
/* A line, not a box. Astra sizes this control like a form field, so on the
   archive it arrived as a bordered slab several hundred pixels wide sitting
   opposite a result count set at 13px — the heaviest object on a page whose
   subject is chandeliers. A sort control is a preference, not an input the
   customer came here to fill in, so it gets a single hairline and the same
   small caps as the rest of the page's interface type. */
.woocommerce .woocommerce-ordering {
	margin-bottom: var(--lb-space-md);
}

.woocommerce .woocommerce-ordering select {
	width: auto;
	min-width: 11rem;
	max-width: 100%;
	border: 0;
	border-bottom: 1px solid var(--lb-rule);
	border-radius: 0;
	background-color: transparent;
	font-size: var(--lb-size-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.55em var(--lb-space-md) 0.55em 0;
}

.woocommerce .woocommerce-ordering select:focus {
	border-bottom-color: var(--lb-accent);
}

/* ---------------------------------------------------------------------------
   Single product
   --------------------------------------------------------------------------- */
.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

@media (min-width: 62rem) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}
	/* Tabs, related products and anything else spans the full width below. */
	.woocommerce div.product > .woocommerce-tabs,
	.woocommerce div.product > .related,
	.woocommerce div.product > .upsells,
	.woocommerce div.product > .lb-full { grid-column: 1 / -1; }
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.woocommerce div.product div.images {
	background: transparent;
	border-radius: var(--lb-radius);
	overflow: hidden;
	/* No padding. The photographs are square and already carry generous black
	   around the object, so insetting them produced a second, slightly
	   different black rectangle inside the stage — the join was visible as a
	   nested frame. Letting the image bleed to the stage edge makes the two
	   blacks meet only at the rounded corner, where nobody can see it. */
	padding: 0;
}

/* Woo paints its own white behind the gallery figure and the zoom target on
   some skins; clear it or a white rectangle reappears inside the ink stage. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images figure,
.woocommerce div.product div.images .flex-viewport {
	background: transparent;
}

/* Gallery thumbnails get the same stage treatment, at a smaller scale, so the
   strip under the main image does not turn into a row of pale tiles. */
.woocommerce div.product div.images .flex-control-thumbs li img {
	background-color: var(--lb-ink);
	border-radius: var(--lb-radius-sm);
	opacity: 0.55;
	transition: opacity var(--lb-dur) var(--lb-ease);
}

.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
	opacity: 1;
	box-shadow: 0 0 0 1px var(--lb-gold);
}

/* The summary is deliberately NOT sticky.
 *
 * It used to be, on the argument that losing the add-to-cart button while
 * scrolling a tall gallery costs conversions. That argument only holds if the
 * sticky element is confined to the row it belongs to, and here it was not:
 * the tabs and the related products are `grid-column: 1 / -1` children of the
 * same grid, so the summary's grid area runs the full height of the product
 * container. It stayed pinned all the way down and printed itself over the
 * related products.
 *
 * Confining it would mean wrapping the top row in its own element, which
 * means overriding content-single-product.php to change markup WooCommerce
 * owns. Not worth it for a page whose gallery is a single image today.
 */

/* Astra prints the collection above the title here too; make it the eyebrow. */
.woocommerce div.product .ast-woo-product-category {
	display: block;
	font-size: var(--lb-size-micro);
	font-weight: 500;
	letter-spacing: var(--lb-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--lb-accent);
	margin-bottom: var(--lb-space-sm);
}

/* The price needs air. Woo sets margin:0 and the short description lands
   directly underneath it, which reads as one run-on block. */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: block;
	font-size: 1.0625rem;
	margin-bottom: var(--lb-space-md);
}

.woocommerce div.product .product_title {
	font-size: clamp(1.85rem, 1.4rem + 2vw, 3rem);
	font-weight: 300;
	margin-bottom: var(--lb-space-md);
	text-wrap: pretty;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--lb-on-surface-muted);
	max-width: 46ch;
}

.woocommerce div.product form.cart { margin-block: var(--lb-space-lg); }

.woocommerce div.product form.cart .quantity input {
	text-align: center;
	border: 1px solid var(--lb-rule);
	padding: 0.9em;
	width: 5rem;
}

/* Product meta (SKU, category, tags) as a hairline block. */
.woocommerce div.product .product_meta {
	border-top: 1px solid var(--lb-rule);
	padding-top: var(--lb-space-md);
	margin-top: var(--lb-space-lg);
	font-size: var(--lb-size-small);
	color: var(--lb-on-surface-muted);
	display: grid;
	gap: var(--lb-space-xs);
}

.woocommerce div.product .product_meta > span { display: block; }
.woocommerce div.product .product_meta a { color: var(--lb-on-surface); }
.woocommerce div.product .product_meta a:hover { color: var(--lb-accent); }

/* --- Tabs: turned into flat sections with hairline headings. Accordions and
   tab strips hide specification detail that buyers of this ticket size read
   carefully. ------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 var(--lb-space-lg);
	border-bottom: 1px solid var(--lb-rule);
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-space-lg);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 0 0 var(--lb-space-sm);
	font-size: var(--lb-size-micro);
	font-weight: 500;
	letter-spacing: var(--lb-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--lb-on-surface-muted);
	border-bottom: 1px solid transparent;
	margin-bottom: -1px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--lb-on-surface);
	border-bottom-color: var(--lb-gold);
}

/* Woo's attribute table = the spec sheet. Match .lb-specs exactly. */
.woocommerce table.shop_attributes {
	border: 0;
	width: 100%;
	max-width: 40rem;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	border: 0;
	border-bottom: 1px solid var(--lb-rule);
	padding: var(--lb-space-sm) 0;
	font-style: normal;
	background: transparent;
	font-size: var(--lb-size-small);
}

.woocommerce table.shop_attributes th {
	width: 42%;
	font-weight: 500;
	font-size: var(--lb-size-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lb-on-surface-muted);
}

.woocommerce table.shop_attributes td p { margin: 0; }

/* --- Related products ---------------------------------------------------- */
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
	font-size: var(--lb-size-h3);
	padding-bottom: var(--lb-space-md);
	margin-bottom: var(--lb-space-xl);
	border-bottom: 1px solid var(--lb-rule);
}

/* --- Breadcrumb ---------------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb {
	font-size: var(--lb-size-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lb-on-surface-muted);
	margin-bottom: var(--lb-space-lg);
}

.woocommerce .woocommerce-breadcrumb a { color: var(--lb-on-surface-muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--lb-accent); }

/* ---------------------------------------------------------------------------
   Notices — Woo's defaults are bright green/red banners. Replaced with a
   hairline block that matches the rest of the site.
   --------------------------------------------------------------------------- */
/* Raised off whatever surface they land on, rather than always ink.

   These are the messages a customer reads at the exact moment something has
   happened — an item removed, an empty cart, a failed coupon — and they were
   painting --lb-ink-raised behind --lb-on-surface. Coherent while every page
   was ink; on the light cart that became #1a1d24 on #12151d, a contrast of
   1.08, so "Coșul tău este în prezent gol" was invisible on the one page
   where it is the only thing to read. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--lb-raised);
	border-top: 2px solid var(--lb-accent);
	border-radius: var(--lb-radius);
	color: var(--lb-on-surface);
	font-size: var(--lb-size-small);
	padding: var(--lb-space-md) var(--lb-space-lg);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { color: var(--lb-accent); }

.woocommerce-error { border-top-color: #a5432f; }

/* ---------------------------------------------------------------------------
   Cart & checkout — restrained, hairline-ruled.
   --------------------------------------------------------------------------- */
.woocommerce table.shop_table {
	border: 0;
	border-radius: 0;
}

.woocommerce table.shop_table th {
	font-size: var(--lb-size-micro);
	letter-spacing: var(--lb-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--lb-on-surface-muted);
	border-bottom: 1px solid var(--lb-rule);
	padding: var(--lb-space-md) var(--lb-space-sm);
}

.woocommerce table.shop_table td {
	border-top: 0;
	border-bottom: 1px solid var(--lb-rule);
	padding: var(--lb-space-md) var(--lb-space-sm);
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
	font-size: var(--lb-size-h3);
	padding-bottom: var(--lb-space-sm);
	border-bottom: 1px solid var(--lb-rule);
	margin-bottom: var(--lb-space-md);
}

/* Woo prints a plain "*" for required fields; make it gold so the form reads
   as designed rather than as a default. */
.woocommerce form .form-row .required {
	color: var(--lb-accent);
	text-decoration: none;
}

/* ==========================================================================
   Astra's product-card markup.

   Astra rebuilds the loop item into .astra-shop-thumbnail-wrap and
   .astra-shop-summary-wrap and renders the category, title, price and button
   from its own `shop-product-structure` option. Rather than fight that, the
   theme styles Astra's classes directly - which also means the Customizer
   keeps working for whoever maintains the site.
   ========================================================================== */

/* The wrapper is a plain block; .lb-product-media inside it is the plinth. */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
	position: relative;
	margin: 0;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0;
}

/* Astra wraps the title in its own anchor. */
.woocommerce ul.products li.product .ast-loop-product__link {
	display: block;
	width: 100%;
}

.woocommerce ul.products li.product .ast-loop-product__link h2 {
	margin: 0 0 var(--lb-space-xs);
}

/* Astra's floating "add to cart" bag icon over the image. The design uses the
   text button under the card instead; two buy affordances on one card is one
   too many, and the icon sits on top of the product photograph. */
.woocommerce ul.products li.product .ast-on-card-button {
	display: none;
}

/* Astra applies its own bottom padding/border to the card on some layouts. */
.woocommerce ul.products li.product.ast-article-post {
	border: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Loop image sizing — specificity note.

   Astra ships `.woocommerce-js ul.products li.product a img { height: auto }`
   in woocommerce-grid.min.css. That selector carries three classes and four
   elements (0,3,4); the rule earlier in this file carries three classes and
   three (0,3,3), so Astra won and every product image kept its natural aspect
   instead of filling the 3:4 stage. A square photograph then sat in the top
   280px of a 373px frame with a band of dead ink beneath it.

   Naming the stage class lifts this to (0,4,3), which outranks Astra without
   resorting to !important — and it documents *why* the selector is longer
   than it looks like it needs to be, so nobody "simplifies" it back.
   --------------------------------------------------------------------------- */
.woocommerce ul.products li.product a.lb-product-media img,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
	padding: clamp(0.25rem, 1.5%, 0.9rem);
}

/* Titles wrap to one or two lines depending on the model name, which left the
   prices in a row sitting at two different heights. The card is already a
   flex column, so pushing the price down with an auto margin lands every
   price in a row on the same baseline without fixing the title's height and
   truncating the longer names. */
.woocommerce ul.products li.product .price {
	margin-top: auto;
	padding-top: var(--lb-space-xs);
}

/* ---------------------------------------------------------------------------
   Reassurance block. Hairline rows, not badges: icon-and-pill trust strips
   are the visual language of discount retail, and this catalogue is not that.
   --------------------------------------------------------------------------- */
.lb-reassure {
	list-style: none;
	margin: var(--lb-space-lg) 0 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.lb-reassure li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lb-space-xs) var(--lb-space-md);
	padding-block: var(--lb-space-sm);
	border-top: 1px solid var(--lb-rule);
}

.lb-reassure li:last-child { border-bottom: 1px solid var(--lb-rule); }

.lb-reassure__term {
	font-size: var(--lb-size-small);
	font-weight: 500;
	color: var(--lb-on-surface);
}

.lb-reassure__note {
	font-size: var(--lb-size-micro);
	color: var(--lb-on-surface-muted);
	text-align: right;
}

.lb-reassure__note a {
	color: var(--lb-accent);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-color: var(--lb-ink-line);
}

.lb-reassure__note a:hover { text-decoration-color: var(--lb-gold); }

/* ---------------------------------------------------------------------------
   Making the photography's black disappear.

   The product shots are on black, the page is --lb-ink (#0b0d12). Those are
   close but not equal, so every image showed as a faint square against the
   page. Matching them by hand is not possible: the source images come from a
   third-party feed and their black is not guaranteed to be one value.

   `mix-blend-mode: lighten` settles it arithmetically — the result is the
   lighter of image and backdrop per channel, so any pixel darker than the
   page resolves to exactly the page, and the crystal, which is lighter than
   everything, passes through untouched. It needs no isolating ancestor,
   which is why .lb-glow drops its `isolation` below.
   --------------------------------------------------------------------------- */
.woocommerce ul.products li.product a.lb-product-media img,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img,
.woocommerce div.product div.images img,
.lb-type__frame img {
	mix-blend-mode: lighten;
}

/* ---------------------------------------------------------------------------
   Form controls on a dark page.

   Browsers paint their own white on inputs and selects, and Woo/Astra both
   set backgrounds of their own, so these need stating explicitly or the
   quantity box and the sort dropdown come out as bright rectangles in the
   middle of the summary. `color-scheme: dark` is the part that also fixes the
   native dropdown list and the number spinners, which no amount of CSS on the
   element itself can reach.
   --------------------------------------------------------------------------- */
.woocommerce div.product form.cart .quantity input,
.woocommerce .quantity input.qty,
.woocommerce .woocommerce-ordering select,
.woocommerce select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce textarea {
	/* Ground-aware, not hard-coded dark.

	   These were `background: var(--lb-ink-raised)` with `color:
	   var(--lb-on-surface)`, which was coherent while every surface was ink.
	   On a light page --lb-on-surface resolves to near-black, so the sort
	   dropdown on the shop archive was #1a1d24 text on a #12151d fill —
	   invisible. Asking for the surface tokens means a control is legible in
	   whichever mood it lands in, and color-scheme now comes from the mood
	   class rather than being pinned dark here. */
	background-color: var(--lb-raised);
	color: var(--lb-on-surface);
	border: 1px solid var(--lb-ink-line);
	border-radius: var(--lb-radius-sm);
}

.woocommerce div.product form.cart .quantity input:focus,
.woocommerce .woocommerce-ordering select:focus,
.woocommerce select:focus,
.woocommerce input:focus,
.woocommerce textarea:focus {
	border-color: var(--lb-gold);
	outline: none;
}

/* The sort control sits alone above the grid and reads as a stray form field
   without a little room around its text. */
.woocommerce .woocommerce-ordering select {
	padding: 0.7em 2.2em 0.7em 0.9em;
}

/* ---------------------------------------------------------------------------
   The homepage selection: three equal tiles in one row.

   This was an asymmetric grid, one dominant piece beside two stacked ones. It
   did not balance. The dominant tile came out 875px tall against a 1493px
   column beside it, which left roughly 600px of empty black under it and took
   the section to 1798px, the tallest on the page.

   A row of three is also simply the honest shape for the content: these are
   three products of equal standing pulled by a shortcode, and making one of
   them twice the size implied an editorial judgement nothing in the data
   supports. The emphasis the page needs is already carried by the showpiece
   above, which is one genuinely chosen object.

   Note the ancestor order if this ever needs overriding again: the [products]
   shortcode prints its own .woocommerce wrapper INSIDE this section, so
   .woocommerce cannot be the outer selector here.
   --------------------------------------------------------------------------- */
@media (min-width: 52rem) {
	.lb-front .lb-selection ul.products.columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: start;
	}
}

/* ---------------------------------------------------------------------------
   Feathered edges, because the photography is not consistent.

   Measuring the border band of a random sample of 30 catalogue images: 13 sit
   on true black, 17 do not. Several are vignetted, a few were shot in a room.
   With `lighten` alone the black ones vanish into the page and the other
   seventeen show as pale rectangles of assorted sizes, which is precisely the
   scattered look a luxury catalogue cannot have.

   A soft mask fixes it without needing to know anything about the individual
   image: the outer edge of every frame fades to transparent, so no photograph
   can end in a hard line whatever its background. `contain` plus the small
   inset keeps the object itself well inside the solid part of the mask, so
   nothing of the product is faded.
   --------------------------------------------------------------------------- */
.woocommerce ul.products li.product a.lb-product-media img,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img,
.lb-type__frame img,
.lb-showpiece__img,
.lb-hero__media img {
	-webkit-mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 58%, rgba(0, 0, 0, 0) 100%);
	mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 58%, rgba(0, 0, 0, 0) 100%);
}

/* Tiles need a harder feather than the two big set pieces.

   The value above was tuned when the frames were 3:4 and the image element was
   therefore taller than the photograph painted inside it: the fade band fell in
   the letterbox, outside the picture, and did nothing. Square frames put the
   photograph's own edge under the mask, and at 74%/58% the near-black borders
   still read as six grey rectangles sitting on the page.

   Pulled in to 62%/42%, they stop reading as boxes and the objects float. The
   cost is that a chandelier's outermost tips soften, which is why the hero and
   the showpiece keep the gentler value: those are single large objects that
   fill their frame, and there the softening would be visible as loss. */
.woocommerce ul.products li.product a.lb-product-media img,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img,
.lb-type__frame img {
	-webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 42%, rgba(0, 0, 0, 0) 88%);
	mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 42%, rgba(0, 0, 0, 0) 88%);
}

/* The single product gallery is looked at closely and zoomed, so it keeps its
   full frame: fading the edge of an image somebody is inspecting would read
   as a defect rather than as a treatment. It gets a stage instead. */
.woocommerce div.product div.images {
	background: var(--lb-ink-raised);
	box-shadow: inset 0 0 0 1px rgba(236, 233, 226, 0.05);
}

.woocommerce div.product div.images img { mix-blend-mode: normal; }

/* On a phone the selection goes to one column. Astra's mobile-columns-2 put
   three chandeliers into two 160px tracks, which is smaller than a thumbnail
   and defeats the point of the section. One at a time, full width, is the
   only way an object this detailed reads on a small screen. */
@media (max-width: 52rem) {
	.lb-front .lb-selection ul.products.columns-3 {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Checkout fields: one look for every control.

   The billing form was assembled from three stylesheets that never agreed.
   Text inputs took the theme rule above, which used the page surface, so on
   a bone page they were bone. The country and county fields are not <select>
   elements by the time the customer sees them: WooCommerce replaces them
   with selectWoo, which paints its own white box with its own grey border.
   And WooCommerce's validation added a red or green border on blur — green
   even on an empty optional field such as "Apartament", which reads as
   "this is filled in correctly" when nothing is in it.

   Every control now sits on --lb-raised, which on a light page is the
   brand's soft white, with the same hairline and the same gold focus edge.
   On ink, --lb-raised resolves to ink-raised, so the quantity field on the
   dark product pages is unaffected.
   --------------------------------------------------------------------------- */
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce-page .select2-container--default .select2-selection--single {
	background-color: var(--lb-raised);
	border: 1px solid var(--lb-ink-line);
	border-radius: var(--lb-radius-sm);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--lb-on-surface);
}

.woocommerce .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--lb-gold);
}

/* The opened list is appended to <body>, outside .woocommerce, so these
   carry no .woocommerce ancestor or they would never match. */
.select2-container--default .select2-dropdown {
	background-color: var(--lb-raised);
	border-color: var(--lb-ink-line);
	color: var(--lb-on-surface);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	background-color: var(--lb-surface);
	border: 1px solid var(--lb-ink-line);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var(--lb-ink);
	color: var(--lb-text-on-ink);
}

/* Validation. A filled or optional field keeps the normal hairline — there is
   no "valid" colour, because an empty optional field is not an achievement.
   A required field left empty turns the brand's error red, the same value
   the newsletter uses, rather than WooCommerce's own red. */
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select,
.woocommerce form .form-row.woocommerce-validated .select2-container--default .select2-selection--single {
	border-color: var(--lb-ink-line);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .select2-container--default .select2-selection--single {
	border-color: #a3402f;
}

.woocommerce form .form-row.woocommerce-invalid label { color: #a3402f; }

/* ---------------------------------------------------------------------------
   Product page: the price and the button carry the sale.

   Both were set like secondary interface text. The price was 17px in the
   body face, a size shared with the reassurance notes underneath it, so a
   285.604 lei chandelier announced its price no louder than "Garanția legală
   de conformitate". The add-to-cart button was the site-wide 13px button at
   about 45px tall, beside a quantity field that did not share its height.

   The price moves to the display face at heading size, which is how every
   other number that matters on this site is set (the phone numbers on the
   contact page, the figures on Proiecte). The button and the quantity field
   share one height, and the button grows to fill the row, so on the page
   where the decision is made the next step is the largest control on it.
   --------------------------------------------------------------------------- */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--lb-font-display);
	font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.6rem);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.1;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--lb-on-surface);
	margin: var(--lb-space-sm) 0 var(--lb-space-lg);
}

.woocommerce div.product p.price del {
	font-size: 0.6em;
	vertical-align: middle;
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--lb-space-sm);
}

.woocommerce div.product form.cart .quantity {
	margin: 0;
	float: none;
}

.woocommerce div.product form.cart .quantity input.qty {
	width: 5.5rem;
	height: 3.5rem;
	padding: 0 0.5em;
	font-size: 1.0625rem;
	font-variant-numeric: lining-nums tabular-nums;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button {
	flex: 1 1 14rem;
	min-height: 3.5rem;
	padding: 1em 2.4em;
	font-size: 0.875rem;
	letter-spacing: 0.18em;
	float: none;
}

@media (max-width: 34rem) {
	.woocommerce div.product form.cart .button.single_add_to_cart_button {
		flex-basis: 100%;
	}
}