/* ==========================================================================
   Layout — containers, header, footer, section rhythm.
   Selectors are Astra's; comments say which part of Astra each one is.
   ========================================================================== */

.ast-container,
.lb-container {
	width: 100%;
	max-width: var(--lb-container);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 3.5rem);
}

/* Absorbs the full-bleed bands. Sections that run edge to edge do it with
   `width: 100vw`, and 100vw counts the scrollbar, so without this every page
   carrying one gains a horizontal scrollbar of exactly the scrollbar's width.

   `clip` rather than `hidden` on purpose: `hidden` makes this a scroll
   container, which would break `position: sticky` for anything inside it.
   The sticky header is a sibling of .site-content rather than a descendant,
   so it is unaffected either way, but the distinction matters the moment
   something inside the content area needs to stick. */
.site-content { overflow-x: clip; }

.lb-container--narrow { max-width: 900px; }
.lb-measure { max-width: var(--lb-container-text); }

/* Vertical rhythm between page sections. Generous by default: whitespace is
   most of what separates a luxury storefront from a marketplace listing. */
.lb-section { padding-block: var(--lb-space-3xl); }
.lb-section--tight { padding-block: var(--lb-space-2xl); }

/* ---------------------------------------------------------------------------
   Header

   One state, not three. The previous header floated transparently over the
   hero and swapped to a blurred light bar on scroll, which meant the menu sat
   on whatever the photograph happened to be doing — and a lit chandelier
   reaches the top of the frame, so the links disappeared into it. Two rounds
   of scrims and colour tuning did not fix it, because the problem was the
   idea rather than the values.

   Now it is one solid ink bar in every state. It sits directly above the ink
   hero, so the two read as a single dark mass at the top of a light page —
   which is what gives the alabaster below it somewhere to start. It also
   removes the fixed/sticky/absolute switching that used to make inner pages
   jump by 81px.

   The bar stays ink even though the page is light: a light header over light
   sections would need a border to exist at all, and the dark cap is what
   stops the storefront reading as a generic white template.
   --------------------------------------------------------------------------- */
.site-header,
.ast-main-header-wrap,
.main-header-bar,
.ast-primary-header-bar,
.ast-mobile-header-wrap {
	background-color: var(--lb-ink);
	color: var(--lb-text-on-ink);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 99;
	border-bottom: 1px solid var(--lb-ink-line);
}

.site-header a,
.site-title a,
.ast-button-wrap .menu-toggle {
	color: var(--lb-text-on-ink);
}

/* On scroll the bar only gains a little weight — no colour change, no blur,
   no animation. The header should stop being interesting once you are
   reading the page. */
body.is-scrolled .site-header {
	border-bottom-color: var(--lb-ink-line);
	box-shadow: 0 1px 24px rgba(0, 0, 0, 0.55);
}

.ast-button-wrap .menu-toggle,
.ast-mobile-menu-trigger-minimal {
	background-color: transparent;
}

/* Site title, when no logo image is set. */
.site-title,
.site-title a {
	font-family: var(--lb-font-display);
	font-weight: 700;
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
	letter-spacing: 0.02em;
	line-height: 1;
}

/* --- Navigation ------------------------------------------------------------
   Uppercase, small, wide-tracked. The gold underline wipes in from the left. */
.main-header-menu > .menu-item > .menu-link,
.ast-builder-menu .main-header-menu > .menu-item > .menu-link {
	position: relative;
	font-size: var(--lb-size-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.main-header-menu > .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0.35em;
	width: 100%;
	height: 1px;
	background: var(--lb-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--lb-dur) var(--lb-ease-out);
}

.main-header-menu > .menu-item:hover > .menu-link::after,
.main-header-menu > .menu-item.current-menu-item > .menu-link::after {
	transform: scaleX(1);
}

/* Astra's dropdowns: strip the default card look. */
.main-header-menu .sub-menu {
	border: 1px solid var(--lb-rule);
	border-radius: var(--lb-radius);
	box-shadow: var(--lb-shadow-md);
	padding-block: var(--lb-space-xs);
	background: var(--lb-ink-raised);
}

.main-header-menu .sub-menu .menu-link {
	font-size: var(--lb-size-small);
	letter-spacing: 0.04em;
	text-transform: none;
}

/* ---------------------------------------------------------------------------
   Hero.

   Third attempt, and the first one that stops fighting the photograph.

   Attempt one laid the type over a full-bleed image: unreadable, because a
   lit chandelier has its brightest mass in the middle of the frame. Attempt
   two split the hero into a copy panel and an image panel: readable, but it
   read as two boxes with a rule between them, and the object was still
   cropped by `cover`.

   This one has no panels and no crop. The section is one continuous field of
   ink; the chandelier is CONTAINED rather than covered, so the whole
   silhouette is visible, and it blends with `lighten` so it has no edge at
   all. What is left on the page is the object, lit, floating, with the type
   beside it. The silhouette is the product, and this is the only version
   that shows all of it.
   --------------------------------------------------------------------------- */
.lb-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	align-items: center;
	/* Header plus hero fill exactly one screen.

	   The 40rem cap that used to be here meant the hero stopped at 640px on
	   any taller display and the next section showed underneath. That was
	   described as "a sliver to invite the scroll", and it was tolerable while
	   the following section was also ink. Against alabaster it is a band of
	   white cutting off the bottom of the opening image — 78px at 800px tall,
	   and far more on a large monitor.

	   Stated as an explicit subtraction rather than a vh percentage: the
	   header is 5.125rem, measured, so this lands the hero's bottom edge on
	   the fold instead of near it. svh rather than vh so mobile browser
	   chrome is accounted for instead of guessed at. */
	min-height: max(28rem, calc(100svh - 5.125rem));
	background-color: var(--lb-ink);
	color: var(--lb-text-on-ink);
	overflow: hidden;
}

.lb-hero__media {
	position: relative;
	grid-column: 2;
	grid-row: 1;
	align-self: stretch;
	overflow: hidden;
	display: grid;
	place-items: center;
}

/* The light the fixture would cast. It is what makes the object read as lit
   rather than as a cut-out, and it is the only thing standing in for the
   room the photograph does not have. */
.lb-hero__glow {
	position: absolute;
	width: min(78%, 34rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(230, 207, 155, 0.17) 0%,
		rgba(220, 230, 240, 0.08) 36%,
		rgba(11, 13, 18, 0) 68%);
	pointer-events: none;
}

/* Absolute, so the photograph fills its column without SETTING the column's
   height. Left in flow it did: the source images are square, so at width:100%
   the image resolved its own height from its aspect ratio and made the hero as
   tall as the media column was wide, overriding min-height and pushing the
   fold off a short laptop screen. The row height now comes from min-height and
   the copy, which is what it should always have come from. */
.lb-hero__media img {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	/* Capped, and centred in the media column by the auto margins.

	   Without a cap the object grows with the window in both axes: the media
	   column widens with the viewport and the hero is as tall as the screen,
	   and a square photograph fitted with `contain` takes the smaller of the
	   two. At 1280x800 that draws the chandelier at 664px; at 2000x1050 it
	   drew it at 968, which is what "the chandelier gets huge when I zoom
	   out" was. 42rem holds it at roughly its 1280 size on any larger
	   display, and never binds below that, so the hero can still fill the
	   fold without the object inflating to match. */
	margin: auto;
	max-width: 42rem;
	max-height: 42rem;
	object-fit: contain;
	padding: clamp(1rem, 3vw, 2.75rem);
	/* Same treatment as the catalogue: black resolves to the page, crystal
	   passes through, so there is no frame to see. */
	mix-blend-mode: lighten;
}

.lb-hero__inner {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding-inline: clamp(1.25rem, 4vw, 3.5rem);
	/* Trimmed so the copy column itself does not push the hero past the fold
	   on a short laptop screen: min-height was already correct, the content
	   inside it was what overran. */
	padding-block: clamp(2rem, 5.5vh, 3.5rem);
}

/* Line the copy up with the container edge every section below it uses, so
   the hero sits on the site grid rather than on its own. */
@media (min-width: 60rem) {
	.lb-hero__inner {
		padding-left: max(clamp(1.25rem, 4vw, 3.5rem), calc((100vw - var(--lb-container)) / 2 + clamp(1.25rem, 4vw, 3.5rem)));
		padding-right: var(--lb-space-lg);
	}
}

.lb-hero__title {
	font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.25rem);
	font-weight: 300;
	line-height: 1.04;
	letter-spacing: -0.02em;
	max-width: 12ch;
	margin-bottom: var(--lb-space-md);
}

.lb-hero__lede {
	max-width: 38ch;
	color: rgba(236, 233, 226, 0.78);
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.125rem);
	margin-bottom: var(--lb-space-lg);
}

.lb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-space-sm);
}

/* --- Narrow screens -------------------------------------------------------
   Stacked: object above, copy below. Nothing overlaps, so there is no scrim
   and no compromise on either half. */
@media (max-width: 60rem) {
	.lb-hero {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		min-height: 0;
	}

	.lb-hero__media {
		grid-column: 1;
		grid-row: 1;
		aspect-ratio: 1 / 1;
		max-height: 52vh;
	}

	.lb-hero__glow { width: min(80%, 20rem); }

	.lb-hero__inner {
		grid-column: 1;
		grid-row: 2;
		justify-content: flex-start;
		padding-block: var(--lb-space-md) var(--lb-space-2xl);
	}

	.lb-hero__title { max-width: 14ch; }
	.lb-hero__lede { max-width: none; }
}

/* ---------------------------------------------------------------------------
   Section headers
   --------------------------------------------------------------------------- */
.lb-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--lb-space-md);
	margin-bottom: var(--lb-space-lg);
	padding-bottom: var(--lb-space-sm);
	border-bottom: 1px solid var(--lb-rule);
}

.lb-section-head__title { margin: 0; max-width: 20ch; }

/* ---------------------------------------------------------------------------
   Grids
   --------------------------------------------------------------------------- */
.lb-grid {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2.5rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.lb-grid--collections {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}

/* ---------------------------------------------------------------------------
   Footer — dark, so the page closes the way it opened.
   --------------------------------------------------------------------------- */
.site-footer,
.ast-small-footer,
.site-primary-footer-wrap,
.site-below-footer-wrap {
	background-color: var(--lb-ink);
	color: var(--lb-text-on-ink-muted);
	border-top: 0;
}

.site-footer a { color: var(--lb-text-on-ink-muted); }
.site-footer a:hover { color: var(--lb-gold-bright); }

.site-footer h2, .site-footer h3, .site-footer .widget-title {
	color: var(--lb-text-on-ink);
	font-size: var(--lb-size-micro);
	font-family: var(--lb-font-body);
	font-weight: 500;
	letter-spacing: var(--lb-tracking-eyebrow);
	text-transform: uppercase;
}

.site-below-footer-wrap {
	border-top: 1px solid var(--lb-ink-line);
	font-size: var(--lb-size-small);
}


/* ---------------------------------------------------------------------------
   Footer — the statutory close.

   Four columns on desktop collapsing to one on mobile, then two stacked bands:
   the identification block Romanian law requires on every page, and the base
   line. The bands are separated by rules rather than colour so the whole
   footer reads as one dark mass and the legal text does not look like an
   afterthought pasted below the design.
   --------------------------------------------------------------------------- */
.lb-footer {
	background-color: var(--lb-ink);
	color: var(--lb-text-on-ink-muted);
	/* The footer opens with the same air a section does. At 2xl it started
	   52px after a dark band that had just ended, so the two ran together. */
	padding-top: var(--lb-space-3xl);
}

.lb-footer__inner {
	display: grid;
	/* Columns need more air between them than rows do inside them, or the
	   four lists read as one wide paragraph. */
	gap: var(--lb-space-xl) var(--lb-space-2xl);
	grid-template-columns: 1.4fr repeat(3, 1fr);
	padding-bottom: var(--lb-space-2xl);
}

@media (max-width: 60rem) {
	.lb-footer__inner {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--lb-space-lg);
	}

	.lb-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 34rem) {
	.lb-footer__inner { grid-template-columns: 1fr; }
}

.lb-footer__wordmark {
	font-family: var(--lb-font-display);
	font-weight: 700;
	font-size: var(--lb-size-h3);
	color: var(--lb-text-on-ink);
	margin: var(--lb-space-xs) 0 var(--lb-space-sm);
}

.lb-footer__blurb {
	max-width: 34ch;
	font-size: var(--lb-size-small);
	line-height: var(--lb-leading-body);
}

.lb-footer__title {
	color: var(--lb-text-on-ink);
	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 0 var(--lb-space-md);
}

/* Row rhythm, not a stack.

   At --lb-space-sm the contact column put six label-and-value pairs into
   329px, and because each pair is already two lines the 14px gap between
   pairs was barely larger than the leading inside one — so the whole column
   read as a single block of text with no way in. The gap has to beat the
   line height for the pairs to separate. */
.lb-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--lb-space-md);
	font-size: var(--lb-size-small);
}

/* Grouped numbers stack under their shared label rather than running on. */
.lb-footer__contact .lb-footer__list a { display: block; }

.lb-footer__list a {
	color: var(--lb-text-on-ink-muted);
	text-decoration: none;
	transition: color var(--lb-dur-fast) var(--lb-ease);
}

.lb-footer__list a:hover,
.lb-footer__list a:focus-visible {
	color: var(--lb-gold-bright);
}

/* The label sits above the number so a four-line phone list stays scannable
   at 13px without turning into a wall of digits. */
.lb-footer__label {
	display: block;
	font-size: var(--lb-size-micro);
	letter-spacing: var(--lb-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--lb-text-on-ink-muted);
	opacity: 0.65;
	margin-bottom: 0.15rem;
}

/* The cookie-preferences control is a <button> because it opens a dialog, but
   it has to look like the links beside it or it reads as a stray form field. */
.lb-footer__linkbutton {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--lb-text-on-ink-muted);
	cursor: pointer;
	text-align: left;
	transition: color var(--lb-dur-fast) var(--lb-ease);
}

.lb-footer__linkbutton:hover,
.lb-footer__linkbutton:focus-visible {
	color: var(--lb-gold-bright);
}

.lb-footer__base {
	border-top: 1px solid var(--lb-ink-line);
	padding-block: var(--lb-space-md);
	font-size: var(--lb-size-micro);
	line-height: 1.7;
}

/* The statutory text moved into the brand column, so it is no longer a
   full-width strip and cannot borrow the base bar's type size. It sets at
   micro on its own, measures to the column rather than to 100ch, and keeps a
   little air above it so it reads as a separate register from the blurb. */
/* Its own block, not a tail on the blurb.

   Sitting flush under the description it read as one more sentence about the
   company rather than as the registration details, which are a different kind
   of statement and are scanned rather than read. It gets a clear gap above,
   a hairline to mark the change of register, and its own space to sit in. */
.lb-footer__statutory-block {
	/* Spans every column. Confined to the brand column the registration line
	   wrapped inside a 336px measure and became a tall thin stack read
	   downwards; across the full grid the same text sets in two or three long
	   lines the eye can sweep, which is how anyone actually looks for a CUI. */
	grid-column: 1 / -1;
	margin-top: var(--lb-space-2xl);
	padding-top: var(--lb-space-lg);
	border-top: 1px solid var(--lb-ink-line);
}

.lb-footer__identity {
	font-size: var(--lb-size-micro);
	line-height: 1.8;
	color: var(--lb-text-on-ink-muted);
	margin: 0;
}

.lb-footer__identity + .lb-footer__identity { margin-top: var(--lb-space-sm); }

.lb-footer__statutory {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-space-sm) var(--lb-space-md);
	margin: var(--lb-space-md) 0 0;
	padding: 0;
	/* Sized here rather than inherited: these four links used to sit inside
	   the full-width legal strip and took its type size from it. In the brand
	   column there is no such parent. */
	font-size: var(--lb-size-micro);
}

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

.lb-footer__statutory a:hover { color: var(--lb-gold-bright); }

.lb-footer__base-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--lb-space-xs) var(--lb-space-md);
}

.lb-footer__base p { margin: 0; }
.lb-footer__note { opacity: 0.7; }

/* Astra draws a page title box on archives; the designs here supply their
   own headers, so suppress it rather than fight it. */
.ast-archive-description { display: none; }

/* ---------------------------------------------------------------------------
   Browse-by-type grid. Wider tracks than the product grid: six tiles should
   land as 3 + 3 on a laptop rather than as a thin six-across strip.
   --------------------------------------------------------------------------- */
/* An explicit column count, not an auto-fill track that hopes for one.

   minmax(24rem) only resolves to three columns when the container happens to
   be wide enough. At a 1280px window it fitted two, so six categories became
   three rows of 858px tiles and this one section ran to 37% of the homepage.
   A category grid is the way in to the catalogue, not the catalogue: it wants
   to be scannable in a screen, not walked through. */
.lb-grid--types {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--lb-space-lg) var(--lb-space-md);
}

/* Two across only once three would be genuinely cramped. Dropping to two at
   60rem was the same mistake in miniature: at a 900px window the tiles went
   back to 396x490 and the section back to 1791px. Three holds down to about
   736px, where the tile is still 218px wide and the caption still sets on one
   line. */
@media (max-width: 46rem) {
	.lb-grid--types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Text beside figures. Collapses to one column well before the figures get
   narrow enough to wrap their own values. */
.lb-split {
	display: grid;
	gap: var(--lb-space-xl);
	grid-template-columns: 1.35fr 1fr;
	align-items: start;
}

@media (max-width: 56rem) {
	.lb-split { grid-template-columns: 1fr; gap: var(--lb-space-lg); }
}

/* ---------------------------------------------------------------------------
   Inner page header.

   Not a hero: no image, no full-bleed dark. Inner pages open with type on the
   page ground and a hairline underneath, so the homepage keeps the only
   photographic opening on the site and stays the loudest page.
   --------------------------------------------------------------------------- */
.lb-page-head {
	/* Sized for a solid header in normal flow. The old value cleared a
	   transparent header that floated over the page; with that gone it left a
	   screen of empty ink above every inner-page title. */
	padding-top: var(--lb-space-2xl);
	padding-bottom: var(--lb-space-lg);
	border-bottom: 1px solid var(--lb-rule);
}

.lb-page-head__title {
	font-size: var(--lb-size-h1);
	margin: 0 0 var(--lb-space-md);
	max-width: 18ch;
}

/* ---------------------------------------------------------------------------
   Cart in the navigation.

   Set as a word plus a number rather than a trolley icon: at this price point
   the header should read as a showroom, and a cart glyph is the one piece of
   supermarket furniture that would undo it. The count only appears once there
   is something in it.
   --------------------------------------------------------------------------- */
.lb-cart-item { margin-left: var(--lb-space-xs); }

.lb-cart {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-size: var(--lb-size-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.lb-cart__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.55em;
	height: 1.55em;
	padding: 0 0.4em;
	border: 1px solid var(--lb-gold);
	border-radius: 999px;
	color: var(--lb-gold);
	font-size: var(--lb-size-micro);
	font-variant-numeric: lining-nums;
	letter-spacing: 0;
	line-height: 1;
}

.lb-cart__count.is-empty { display: none; }

.lb-cart:hover .lb-cart__count {
	background-color: var(--lb-gold);
	color: var(--lb-ink);
}

/* ===========================================================================
   Homepage rhythm
   ===========================================================================
   The page alternates on purpose. Two sections break the container and go
   full bleed (hero, showpiece); everything between them is disciplined and
   held to the grid. That contrast is the whole design: when every section is
   the same width and the same weight, none of them reads as important.
   =========================================================================== */

/* --- The statement -------------------------------------------------------
   Type only. No image, no grid, no numbers set in gold. It is the one place
   on the page the brand speaks in its own voice rather than listing facts,
   so it gets the largest type outside the hero and nothing else beside it. */
.lb-statement { padding-block: var(--lb-space-3xl); }

.lb-statement__text {
	font-family: var(--lb-font-display);
	font-weight: 300;
	font-size: clamp(1.85rem, 1.1rem + 3.1vw, 3.4rem);
	line-height: 1.18;
	letter-spacing: -0.015em;
	max-width: 24ch;
	margin: 0;
	text-wrap: balance;
}

.lb-statement__text em {
	font-style: italic;
	color: var(--lb-accent);
}

/* Facts, set small and in a row under a hairline: they support the sentence
   rather than competing with it. This is the same information the old stat
   strip carried, at the size it deserves. */
.lb-statement__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-space-xs) var(--lb-space-xl);
	list-style: none;
	margin: var(--lb-space-xl) 0 0;
	padding: var(--lb-space-md) 0 0;
	border-top: 1px solid var(--lb-rule);
	font-size: var(--lb-size-small);
	color: var(--lb-on-surface-muted);
}

/* --- About ---------------------------------------------------------------
   Reading column beside three pillars. Deliberately not the two-column prose
   shape used by the process section further down: two sections built the same
   way read as one section repeated, which is the failure this page has been
   corrected for once already. */
.lb-about {
	display: grid;
	gap: var(--lb-space-xl);
	grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
	.lb-about {
		grid-template-columns: 1.15fr 0.85fr;
		gap: var(--lb-space-2xl);
		align-items: start;
	}
}

.lb-about__title {
	font-size: var(--lb-size-h2);
	margin: 0 0 var(--lb-space-md);
	max-width: 16ch;
}

.lb-about__text {
	max-width: 54ch;
	color: var(--lb-on-surface-muted);
}

.lb-about__text + .lb-about__text { margin-top: var(--lb-space-md); }

/* Hairline-separated rows rather than boxes. A card would put a border around
   a fact that is already short enough to read at a glance. */
.lb-about__pillars {
	display: grid;
	gap: 0;
	margin: 0;
	align-content: start;
}

.lb-about__pillar {
	padding-block: var(--lb-space-md);
	border-top: 1px solid var(--lb-rule);
}

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

.lb-about__pillar dt {
	font-size: var(--lb-size-micro);
	letter-spacing: var(--lb-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--lb-accent);
	margin-bottom: var(--lb-space-2xs);
}

.lb-about__pillar dd {
	margin: 0;
	font-size: var(--lb-size-small);
	color: var(--lb-on-surface-muted);
}

/* --- FAQ -----------------------------------------------------------------
   Two columns of open questions. No accordion: six short answers do not need
   hiding, somebody weighing several thousand lei should not have to click to
   learn whether they can send it back, and open text is what search engines
   read. */
.lb-faq {
	display: grid;
	gap: var(--lb-space-lg) var(--lb-space-2xl);
	grid-template-columns: 1fr;
	margin: 0;
}

@media (min-width: 52rem) {
	.lb-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lb-faq__item {
	padding-top: var(--lb-space-md);
	border-top: 1px solid var(--lb-rule);
}

.lb-faq__q {
	font-family: var(--lb-font-display);
	font-size: var(--lb-size-h3);
	font-weight: 300;
	line-height: 1.25;
	margin: 0 0 var(--lb-space-xs);
}

.lb-faq__a {
	margin: 0;
	max-width: 46ch;
	color: var(--lb-on-surface-muted);
	line-height: 1.7;
}

/* --- Newsletter ----------------------------------------------------------
   Copy on the left, one field and one button on the right. Kept to a single
   input: every extra field on a newsletter form costs signups, and a name is
   not worth the loss when the letter goes out a few times a year. */
.lb-newsletter__inner {
	display: grid;
	gap: var(--lb-space-lg);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 56rem) {
	.lb-newsletter__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--lb-space-2xl);
	}
}

.lb-newsletter__title {
	font-size: var(--lb-size-h3);
	margin: 0 0 var(--lb-space-xs);
	max-width: 20ch;
}

.lb-newsletter__text {
	margin: 0;
	max-width: 46ch;
	font-size: var(--lb-size-small);
	color: var(--lb-on-surface-muted);
}

.lb-newsletter__form { margin: 0; }

.lb-newsletter__field {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-space-xs);
	margin: 0;
}

.lb-newsletter__field input[type="email"] {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 1.05em var(--lb-space-md);
	border: 1px solid var(--lb-rule);
	border-radius: var(--lb-radius-sm);
	background-color: var(--lb-alabaster);
	color: var(--lb-on-surface);
	font-family: var(--lb-font-body);
	font-size: var(--lb-size-small);
}

.lb-newsletter__field input[type="email"]:focus {
	border-color: var(--lb-accent);
	outline: none;
}

/* Hidden from sight and from assistive technology, but still submitted, which
   is the whole point of a honeypot. Not `display: none`: some bots skip
   fields that are display-none, and this one is meant to be filled. */
.lb-newsletter__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lb-newsletter__status {
	margin: var(--lb-space-sm) 0 0;
	font-size: var(--lb-size-small);
	color: var(--lb-accent);
}

.lb-newsletter__status--error { color: #a3402f; }

.lb-newsletter__consent {
	margin: var(--lb-space-sm) 0 0;
	font-size: var(--lb-size-micro);
	line-height: 1.6;
	color: var(--lb-on-surface-muted);
}

.lb-newsletter__consent a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.lb-newsletter__consent a:hover { color: var(--lb-accent); }

/* --- The showpiece -------------------------------------------------------
   One object, very large, breaking the container. The catalogue's argument is
   scale, and a page that only ever shows these pieces as tiles argues against
   itself. */
.lb-showpiece {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* Was 88vh. A second full-screen photographic moment three sections after
	   the hero stopped reading as emphasis and started reading as another
	   thing to scroll past; at roughly two thirds of a screen it still breaks
	   the container and still dominates, without repeating the hero. */
	min-height: clamp(26rem, 64vh, 40rem);
	background-color: var(--lb-ink);
	overflow: hidden;
}

.lb-showpiece__stage {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.lb-showpiece__glow {
	position: absolute;
	width: min(70%, 46rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(230, 207, 155, 0.16) 0%,
		rgba(220, 230, 240, 0.07) 38%,
		rgba(11, 13, 18, 0) 70%);
	pointer-events: none;
}

.lb-showpiece__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: clamp(1rem, 4vh, 3rem) clamp(1rem, 4vw, 3rem);
	mix-blend-mode: lighten;
}

/* The caption sits over the lower part of the frame, where a chandelier is
   at its darkest, and a short wash guarantees it whatever the piece does. */
.lb-showpiece::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 45%;
	background: linear-gradient(to top, var(--lb-ink) 6%, rgba(11, 13, 18, 0.72) 40%, rgba(11, 13, 18, 0) 100%);
	pointer-events: none;
}

.lb-showpiece__caption {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--lb-container);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 3.5rem);
	padding-block: clamp(2rem, 6vh, 3.5rem);
}

.lb-showpiece__title {
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
	font-weight: 300;
	max-width: 18ch;
	margin: 0 0 var(--lb-space-xs);
}

.lb-showpiece__price {
	font-family: var(--lb-font-body);
	font-size: 1.0625rem;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--lb-gold);
	margin: 0 0 var(--lb-space-md);
}

.lb-showpiece__price .woocommerce-Price-amount { color: inherit; }

/* --- Process, as prose ---------------------------------------------------
   A heading column and a reading column. No step numbers: numbering implies
   a sequence the reader has to keep track of, and for four plain facts that
   is ceremony the page does not need. */
.lb-prose-split {
	display: grid;
	gap: var(--lb-space-lg) var(--lb-space-2xl);
	grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
	.lb-prose-split { grid-template-columns: 0.85fr 1.15fr; }
}

.lb-prose-split__title {
	font-size: var(--lb-size-h2);
	margin: 0;
	max-width: 12ch;
}

.lb-prose {
	max-width: 60ch;
	font-size: clamp(1rem, 0.96rem + 0.3vw, 1.125rem);
	line-height: 1.75;
	color: var(--lb-on-surface-muted);
}

.lb-prose p + p { margin-top: var(--lb-space-md); }

.lb-prose__aside {
	margin-top: var(--lb-space-lg);
	padding-top: var(--lb-space-md);
	border-top: 1px solid var(--lb-rule);
	font-size: var(--lb-size-small);
}

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

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

/* --- The close -----------------------------------------------------------
   A telephone number set at reading size. On a catalogue whose median piece
   is 6.600 lei, the call is the conversion, and burying it in a footer is how
   a shop like this loses the customers who are nearly ready. */
.lb-close__grid {
	display: grid;
	gap: var(--lb-space-xl);
	grid-template-columns: 1fr;
	align-items: end;
}

@media (min-width: 56rem) {
	.lb-close__grid { grid-template-columns: 1.2fr auto; }
}

.lb-close__title {
	font-size: var(--lb-size-h2);
	margin: 0 0 var(--lb-space-md);
	max-width: 18ch;
}

.lb-close__text {
	color: var(--lb-on-surface-muted);
	max-width: 52ch;
	margin: 0;
}

.lb-close__actions {
	display: grid;
	gap: var(--lb-space-md);
	justify-items: start;
}

.lb-close__phone {
	display: block;
	font-family: var(--lb-font-display);
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	font-weight: 300;
	font-variant-numeric: lining-nums;
	line-height: 1.1;
	color: var(--lb-on-surface);
	transition: color var(--lb-dur-fast) var(--lb-ease);
}

.lb-close__phone:hover { color: var(--lb-gold); }

.lb-close__phone-label {
	display: block;
	font-family: var(--lb-font-body);
	font-size: var(--lb-size-micro);
	letter-spacing: var(--lb-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--lb-on-surface-muted);
	margin-bottom: 0.3rem;
}

.lb-close__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-space-sm);
}

/* --- Footer social links -------------------------------------------------
   Rendered only for networks with an address in the Customizer. Hairline
   circles in the footer's muted ink colour, gold on hover, matching the
   treatment of every other link down there. */
.lb-footer__social {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-space-sm);
	margin: var(--lb-space-md) 0 0;
	padding: 0;
}

.lb-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--lb-ink-line);
	border-radius: 50%;
	color: var(--lb-text-on-ink-muted);
	transition: color var(--lb-dur-fast) var(--lb-ease), border-color var(--lb-dur-fast) var(--lb-ease);
}

.lb-footer__social a:hover,
.lb-footer__social a:focus-visible {
	color: var(--lb-gold-bright);
	border-color: var(--lb-gold);
}

.lb-footer__social-icon { display: block; }

/* ---------------------------------------------------------------------------
   Header search (Advanced Woo Search).

   The form is the plugin's markup, prepended to the header menu by
   inc/search.php so it sits first in the row, before Catalog. Styled here as a
   hairline field rather than the plugin's white box: on an ink header a
   bordered white input would be the loudest object in the bar and read as a
   form to fill in.

   Selectors are scoped under .lb-search-item, which puts them one class above
   the plugin's own `.aws-container .aws-search-form` rules, and this sheet loads
   after the plugin's, so these win without !important.
   --------------------------------------------------------------------------- */
.lb-search-item {
	display: flex;
	align-items: center;
	margin-right: var(--lb-space-md);
}

.lb-search-item .aws-container {
	width: 13rem;
	max-width: 100%;
}

.lb-search-item .aws-container .aws-search-form {
	height: auto;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--lb-ink-line);
	border-radius: 0;
	transition: border-color var(--lb-dur) var(--lb-ease);
}

.lb-search-item .aws-container .aws-search-form:focus-within {
	border-bottom-color: var(--lb-gold);
}

.lb-search-item .aws-container .aws-search-form .aws-wrapper {
	background: transparent;
}

.lb-search-item .aws-container .aws-search-field,
.lb-search-item .aws-container .aws-search-field:focus {
	height: auto;
	padding: 0.55em 1.75em 0.55em 0;
	border: 0;
	background: transparent;
	color: var(--lb-text-on-ink);
	font-family: var(--lb-font-body);
	font-size: var(--lb-size-small);
	letter-spacing: 0.04em;
	box-shadow: none;
	outline: none;
}

.lb-search-item .aws-container .aws-search-field::placeholder {
	color: var(--lb-text-on-ink-muted);
	opacity: 1;
}

/* Chrome's own clear button on type=search arrives as a light grey blob on
   ink; the plugin draws its own × instead. */
.lb-search-item .aws-container .aws-search-field::-webkit-search-cancel-button { display: none; }

.lb-search-item .aws-container .aws-search-form .aws-search-clear span,
.lb-search-item .aws-container .aws-search-form .aws-search-clear {
	color: var(--lb-text-on-ink-muted);
	background: transparent;
}

.lb-search-item .aws-container .aws-search-form .aws-search-btn,
.lb-search-item .aws-container .aws-search-form .aws-form-btn {
	background: transparent;
	border: 0;
	color: var(--lb-text-on-ink-muted);
	transition: color var(--lb-dur-fast) var(--lb-ease);
}

.lb-search-item .aws-container .aws-search-form .aws-search-btn:hover,
.lb-search-item .aws-container .aws-search-form .aws-form-btn:hover {
	background: transparent;
	color: var(--lb-gold-bright);
}

.lb-search-item .aws-container .aws-search-form .aws-search-btn_icon svg,
.lb-search-item .aws-container .aws-search-form .aws-search-btn svg {
	fill: currentColor;
	width: 16px;
	height: 16px;
}

/* In the phone menu the field takes the full width of the panel, inset by the
   same 20px Astra gives the menu links, so the placeholder starts on the line
   of CATALOG instead of at the edge of the screen.

   The cart link gets the same inset and at least the height of a menu row: on
   desktop it is a word beside the menu, here it is one more row of it. */
@media (max-width: 60rem) {
	.lb-search-item { margin-right: 0; width: 100%; padding-inline: 20px; }
	.lb-search-item .aws-container { width: 100%; }

	.ast-mobile-header-content .lb-cart-item { margin-left: 0; }

	.ast-mobile-header-content .lb-cart {
		display: flex;
		min-height: 2.75rem;
		padding-inline: 20px;
	}
}

/* The results dropdown. The plugin appends it to <body>, so it is styled
   without a header ancestor. An ink panel, by the site's own rule that
   photographs sit on ink: the product thumbnails are shot on black and on a
   dark panel they float instead of showing a black square each. */
.aws-search-result {
	background: var(--lb-ink-raised);
	border: 1px solid var(--lb-ink-line);
	border-radius: var(--lb-radius);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
	color: var(--lb-text-on-ink);
	font-family: var(--lb-font-body);
	font-size: var(--lb-size-small);
	color-scheme: dark;
}

.aws-search-result ul li,
.aws-search-result .aws_result_item {
	background: transparent;
	border-bottom: 1px solid var(--lb-ink-line);
}

.aws-search-result .aws_result_item:hover,
.aws-search-result .aws_result_item.hovered {
	background: var(--lb-ink-soft);
}

.aws-search-result .aws_result_image img {
	background: var(--lb-ink);
}

.aws-search-result .aws_result_title {
	font-family: var(--lb-font-display);
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--lb-text-on-ink);
}

.aws-search-result .aws_result_excerpt,
.aws-search-result .aws_result_cats,
.aws-search-result .aws_result_sku {
	color: var(--lb-text-on-ink-muted);
}

.aws-search-result .aws_result_price,
.aws-search-result .aws_result_price .woocommerce-Price-amount {
	color: var(--lb-gold-bright);
	font-variant-numeric: lining-nums tabular-nums;
}

/* The words that matched, which the plugin wraps in <strong>. */
.aws-search-result strong {
	color: var(--lb-gold-bright);
	font-weight: 600;
}

.aws-search-result .aws_result_heading {
	background: var(--lb-ink);
	color: var(--lb-text-on-ink-muted);
	font-size: var(--lb-size-micro);
	letter-spacing: var(--lb-tracking-eyebrow);
	text-transform: uppercase;
}

.aws-search-result .aws_no_result {
	color: var(--lb-text-on-ink-muted);
}

.aws-search-result .aws_search_more,
.aws-search-result .aws_search_more a {
	background: var(--lb-ink);
	color: var(--lb-gold-bright);
	font-size: var(--lb-size-micro);
	letter-spacing: var(--lb-tracking-eyebrow);
	text-transform: uppercase;
}

.aws-search-result .aws_search_more a:hover {
	background: var(--lb-ink-soft);
}