/* ==========================================================================
   LAVISH LADY — Mobile-first design system
   Concept: "Maison" — warm ivory editorial boutique, rose-gold metal accents.
   Display: Cormorant Garamond  ·  UI: Jost
   ========================================================================== */

:root {
	/* Ink */
	--ll-ink:        #1C1613;
	--ll-ink-soft:   #4A3F38;
	--ll-muted:      #8B7B6E;

	/* Ground */
	--ll-canvas:     #FBF7F2;
	--ll-surface:    #FFFFFF;
	--ll-shell:      #F3EBE1;
	--ll-line:       #E6DCD1;
	--ll-line-soft:  #F0E7DC;

	/* Metal */
	--ll-gold:       #B98455;
	--ll-gold-deep:  #96683F;
	--ll-gold-soft:  #EBD9C6;

	/* Signal */
	--ll-sale:       #8C3A2B;
	--ll-ok:         #4E6B4A;

	/* Type */
	--ll-display: "Cormorant Garamond", "Times New Roman", serif;
	--ll-sans:    "Jost", "Helvetica Neue", Arial, sans-serif;

	/* Rhythm */
	--ll-gut:     20px;
	--ll-radius:  3px;
	--ll-bar-h:   72px;

	/* Motion */
	--ll-ease:    cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--ll-canvas);
	color: var(--ll-ink);
	font-family: var(--ll-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: .005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Nothing may push the page sideways on a phone. */
body, .wp-site-blocks, main {
	max-width: 100vw;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4,
.wp-block-heading,
.product_title,
.woocommerce-loop-product__title,
.wc-block-product-template .wp-block-post-title {
	font-family: var(--ll-display);
	font-weight: 400;
	letter-spacing: -.005em;
	line-height: 1.12;
	color: var(--ll-ink);
	text-wrap: balance;
}

h1, .product_title { font-size: clamp(2rem, 8vw, 3.25rem); }
h2 { font-size: clamp(1.65rem, 6.4vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 5vw, 1.75rem); }

a { color: inherit; text-underline-offset: .22em; }

::selection { background: var(--ll-gold-soft); color: var(--ll-ink); }

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--ll-gold);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Editorial eyebrow — small caps, wide tracking. Used across sections. */
.ll-eyebrow {
	display: block;
	font-family: var(--ll-sans);
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--ll-gold-deep);
	margin: 0 0 .9rem;
}
.ll-eyebrow::before { content: "— "; opacity: .55; }

.ll-rule {
	border: 0;
	border-top: 1px solid var(--ll-line);
	margin: 2.5rem 0;
}

/* --------------------------------------------------------------------------
   2. Buttons
   -------------------------------------------------------------------------- */

.wp-element-button,
.wc-block-components-button,
button.button,
a.button,
.woocommerce a.button,
.woocommerce button.button,
#place_order,
.single_add_to_cart_button,
.ll-btn {
	/* The theme uses content-box, which would make min-height stack on top
	   of the padding and produce ~90px buttons. */
	box-sizing: border-box !important;
	font-family: var(--ll-sans) !important;
	font-size: .8rem !important;
	font-weight: 500 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	border-radius: var(--ll-radius) !important;
	border: 1px solid var(--ll-ink) !important;
	background: var(--ll-ink) !important;
	color: var(--ll-canvas) !important;
	padding: 1.15rem 1.6rem !important;
	min-height: 52px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	text-decoration: none !important;
	cursor: pointer;
	transition: background .35s var(--ll-ease), color .35s var(--ll-ease),
	            border-color .35s var(--ll-ease), transform .12s var(--ll-ease);
	-webkit-tap-highlight-color: transparent;
}

.wp-element-button:hover,
button.button:hover,
a.button:hover,
#place_order:hover,
.single_add_to_cart_button:hover,
.ll-btn:hover {
	background: var(--ll-gold-deep) !important;
	border-color: var(--ll-gold-deep) !important;
	color: #fff !important;
}

.wp-element-button:active,
button.button:active,
.single_add_to_cart_button:active,
#place_order:active,
.ll-btn:active { transform: scale(.985); }

.ll-btn--ghost {
	background: transparent !important;
	color: var(--ll-ink) !important;
	border-color: var(--ll-ink) !important;
}
.ll-btn--ghost:hover {
	background: var(--ll-ink) !important;
	color: var(--ll-canvas) !important;
}

.ll-btn--gold {
	background: var(--ll-gold) !important;
	border-color: var(--ll-gold) !important;
	color: #fff !important;
}

button[disabled],
.single_add_to_cart_button.disabled,
.wp-element-button[disabled] {
	opacity: .34 !important;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */

:root { --ll-header-h: 106px; } /* fallback until ui.js measures the real value */

/* .hostinger-ai-menu is the element that's actually position:fixed —
   NOT the <header> that sometimes wraps it (the front page has one, the
   shop/archive template doesn't) and not .hostinger-ai-menu-wrapper
   inside it (it only happens to render the same size). Style and measure
   this element directly so it works the same on every template.
   Earlier this was scoped under a <header> ancestor with backdrop-filter
   applied to that ancestor — filter/backdrop-filter on an ancestor of a
   fixed element creates a new CSS containing block, which hijacked the
   fixed child's positioning and made it track the (pushed-down) header
   box instead of the viewport.
   Moving the blur here directly instead reintroduced the SAME trap one
   level down: the mobile nav drawer (position:fixed, inset:0, meant to
   cover the full screen) is also a descendant of .hostinger-ai-menu, so
   it started resolving "fullscreen" relative to the ~106px header bar
   instead of the viewport — a drawer confined to a scrollable strip
   pinned under the header ("stuck on the header and scrollable").
   filter/backdrop-filter must not live on ANY ancestor of the drawer.
   The blur goes on a decorative ::before instead: a generated box has no
   real children of its own, so it can carry backdrop-filter without ever
   becoming a containing block for .hostinger-ai-menu's actual descendants. */
.hostinger-ai-menu {
	border-bottom: 1px solid var(--ll-line);
	z-index: 90;
}
.hostinger-ai-menu::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(251, 247, 242, .88);
	-webkit-backdrop-filter: saturate(1.6) blur(14px);
	backdrop-filter: saturate(1.6) blur(14px);
}

/* The theme's own header bar is position:fixed inside a sticky (empty)
   <header>, so the page must reserve space for it manually. The theme
   hardcodes 75px for this — correct for its own default header, but
   wrong the moment logo/nav sizing changes (it did: ours renders ~106px),
   which silently buried the top of every page under the header. Drive it
   from a JS-measured custom property instead of another guessed constant. */
body.hostinger-ai-builder-elementor,
body.hostinger-ai-builder-gutenberg {
	padding-top: var(--ll-header-h) !important;
}

/* Scoped to .hostinger-ai-menu rather than <header>: the shop/archive
   template renders this same block without a <header> wrapper at all. */
.hostinger-ai-menu .wp-block-site-logo img {
	width: auto;
	max-height: 46px;
	object-fit: contain;
}

/* Every header control is a comfortable thumb target. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close,
.wc-block-mini-cart__button,
.hostinger-ai-menu a[href*="mon-compte"] {
	/* <a> defaults to content-box (unlike <button>), so without this the
	   10px padding stacked on top of the 44px minimum and rendered at 64px. */
	box-sizing: border-box !important;
	min-width: 44px !important;
	min-height: 44px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 10px !important;
	margin: -10px -10px -10px 0;
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 24px;
	height: 24px;
}

/* Nav drawer */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--ll-canvas) !important;
	padding: clamp(1.5rem, 7vw, 3rem) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: .25rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--ll-display) !important;
	font-size: 2rem !important;
	font-weight: 400 !important;
	letter-spacing: -.01em;
	padding: .55rem 0 !important;
	border-bottom: 1px solid var(--ll-line-soft);
	width: 100%;
}

/* Cart entry points stay hidden — the store goes straight to checkout. */
.wp-block-woocommerce-mini-cart,
.wc-block-mini-cart,
a.cart-contents,
.wc-block-mini-cart__template-part { display: none !important; }

/* The mini-cart DRAWER panel itself (not just its trigger button) still
   renders in the DOM on every page, sitting off-screen at
   position:fixed with a hardcoded ~480px width, waiting to slide in.
   Hiding the trigger above was never enough to stop it existing —
   and because it's position:fixed, no ancestor's overflow-x:hidden can
   ever clip it (fixed elements are only bounded by the true viewport,
   never by ancestor overflow — that's what makes it "fixed"), so it was
   silently forcing the whole page's layout viewport wider and causing
   horizontal scroll on every page, most noticeably here. We never open
   this drawer (add-to-cart redirects straight to checkout), so it's
   dead weight — remove it outright rather than merely hide it. */
.wc-block-components-drawer__screen-overlay:has(.wc-block-mini-cart__drawer),
.wc-block-mini-cart__drawer {
	display: none !important;
}

/* Desktop nav — the block's own "Overlay Menu" setting is stuck on
   Always, with no responsive breakpoint distinguishing desktop from
   mobile: the theme unconditionally hides the link list and force-shows
   the hamburger toggle at every viewport width, including 1280px+ wide
   desktop. Above 900px, undo that and lay the links out horizontally
   like a normal desktop nav instead. Scoped to .hostinger-ai-menu (the
   header) specifically — the footer's nav has its own, deliberately
   different "always a plain vertical list" treatment and must stay
   untouched by this. */
@media (min-width: 900px) {
	/* The theme's own rules here are (0,4,1) and (0,2,1) specificity
	   (body.hostinger-ai-woocommerce-active … :not(...):not(...) etc,
	   same family already documented for the footer nav and the
	   product-details tabs) — out-specify them deliberately rather than
	   have this silently lose again. */
	.hostinger-ai-menu .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
	.hostinger-ai-menu .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
		display: none !important;
	}
	.hostinger-ai-menu .wp-block-navigation__responsive-container.wp-block-navigation__responsive-container.wp-block-navigation__responsive-container.wp-block-navigation__responsive-container.wp-block-navigation__responsive-container {
		position: static !important;
		inset: auto !important;
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
		animation: none !important;
		background: transparent !important;
		color: inherit !important;
		padding: 0 !important;
		overflow: visible !important;
		z-index: auto !important;
		height: auto !important;
	}
	.hostinger-ai-menu .wp-block-navigation__responsive-container-content {
		position: static !important;
		padding: 0 !important;
	}
	.hostinger-ai-menu .wp-block-navigation__container {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 2.25rem !important;
	}
	.hostinger-ai-menu .wp-block-navigation-item {
		width: auto !important;
	}
	.hostinger-ai-menu .wp-block-navigation-item__content {
		display: inline-block;
		padding: .4rem 0 !important;
		font-family: var(--ll-sans) !important;
		font-size: .78rem !important;
		font-weight: 500 !important;
		letter-spacing: .1em !important;
		text-transform: uppercase !important;
		color: var(--ll-ink-soft) !important;
		border-bottom: 1px solid transparent;
		transition: color .3s var(--ll-ease), border-color .3s var(--ll-ease);
	}
	.hostinger-ai-menu .wp-block-navigation-item:hover .wp-block-navigation-item__content,
	.hostinger-ai-menu .current-menu-item .wp-block-navigation-item__content {
		color: var(--ll-ink) !important;
		border-bottom-color: var(--ll-gold);
	}
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

main {
	/* Breathing room under the sticky header — was ~7px (page title sat
	   almost flush against the header's bottom border) on every template
	   except the homepage, which supplies its own generous hero padding. */
	padding-top: clamp(1.5rem, 6vw, 2.5rem);
	padding-bottom: calc(var(--ll-bar-h) + env(safe-area-inset-bottom, 0px));
}
main:has(.ll-hero) {
	padding-top: 0;
}

.has-global-padding {
	padding-left: var(--ll-gut) !important;
	padding-right: var(--ll-gut) !important;
}

.ll-section {
	padding: clamp(2.75rem, 11vw, 5.5rem) var(--ll-gut);
}
.ll-section--shell { background: var(--ll-shell); }
.ll-section--ink   { background: var(--ll-ink); color: var(--ll-canvas); }
.ll-section--ink h2,
.ll-section--ink h3 { color: var(--ll-canvas); }
.ll-section--ink .ll-eyebrow { color: var(--ll-gold-soft); }

.ll-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* --------------------------------------------------------------------------
   5. Product grid  (covers both block markup and [products] shortcode)
   -------------------------------------------------------------------------- */

/* !important throughout: the theme ships .wc-block-product-template__responsive.columns-N
   rules at higher specificity that would otherwise dictate the column count. */
.wc-block-product-template,
.woocommerce ul.products,
ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 2.25rem 14px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

@media (min-width: 700px) {
	.wc-block-product-template,
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 3rem 24px !important;
	}
}
@media (min-width: 1040px) {
	.wc-block-product-template,
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

li.wc-block-product,
.woocommerce ul.products li.product,
ul.products li.product {
	position: relative;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	background: transparent;
	text-align: left;
	list-style: none;
}
li.wc-block-product::before,
ul.products li.product::before { content: none !important; }

/* WooCommerce's classic CSS gives ul.products a float-clearfix
   (::before/::after { content:" "; display:table }), built for the old
   float-based card layout. Converting the list to grid/flex (above) didn't
   remove it — a ::before with real content becomes an actual grid/flex
   item, silently occupying the very first cell and pushing every real
   product over by one slot. Every product card rendered one grid
   position later than it should have, leaving a blank first cell (shop
   grid) and misaligning the whole homepage shelf. */
ul.products::before,
ul.products::after { content: none !important; display: none !important; }

/* Image — 1:1. Nearly the entire catalogue is native square photography
   (1254×1254 promo graphics, 1536×1536 studio shots); the old 3:4 portrait
   crop was cropping the LEFT/RIGHT edges off almost every card — cutting
   into "PROMO" ribbons, price badges and size charts baked into the
   images themselves. Only one product's gallery is genuinely 3:4 (raw
   phone photos), an acceptable minor top/bottom trim for catalogue-wide
   consistency. */
li.wc-block-product .wc-block-components-product-image,
ul.products li.product a img,
li.wc-block-product img {
	margin: 0 0 .9rem !important;
	border-radius: var(--ll-radius);
}

li.wc-block-product .wc-block-components-product-image a,
ul.products li.product > a:first-of-type {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--ll-radius);
	background: var(--ll-shell);
	box-shadow: 0 1px 3px rgba(28, 22, 19, .05);
	transition: box-shadow .45s var(--ll-ease);
}

li.wc-block-product img,
ul.products li.product img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform .8s var(--ll-ease);
}

/* A quiet "Voir le produit" scrim on hover — pointer devices only, so it
   never flashes on a tap-then-navigate on touch screens. */
@media (hover: hover) and (pointer: fine) {
	li.wc-block-product .wc-block-components-product-image a::after,
	ul.products li.product > a:first-of-type::after {
		content: "Voir le produit";
		position: absolute;
		inset: auto 0 0 0;
		padding: 1.4rem .9rem .85rem;
		background: linear-gradient(to top, rgba(28, 22, 19, .58), transparent);
		color: #fff;
		font-family: var(--ll-sans);
		font-size: .62rem;
		font-weight: 500;
		letter-spacing: .2em;
		text-transform: uppercase;
		text-align: center;
		opacity: 0;
		transform: translateY(8px);
		transition: opacity .4s var(--ll-ease), transform .4s var(--ll-ease);
		pointer-events: none;
	}
	li.wc-block-product a:hover img,
	ul.products li.product a:hover img { transform: scale(1.055); }
	li.wc-block-product .wc-block-components-product-image a:hover,
	ul.products li.product > a:first-of-type:hover {
		box-shadow: 0 16px 34px -14px rgba(28, 22, 19, .28);
	}
	li.wc-block-product .wc-block-components-product-image a:hover::after,
	ul.products li.product > a:first-of-type:hover::after {
		opacity: 1;
		transform: none;
	}
}
li.wc-block-product a:active img,
ul.products li.product a:active img { transform: scale(1.04); }

/* Title */
li.wc-block-product .wp-block-post-title,
li.wc-block-product .wp-block-post-title a,
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--ll-display) !important;
	font-size: 1.1rem !important;
	font-weight: 500 !important;
	line-height: 1.26 !important;
	letter-spacing: 0 !important;
	margin: 0 0 .4rem !important;
	padding: 0 !important;
	color: var(--ll-ink) !important;
	text-decoration: none !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .3s var(--ll-ease);
}
@media (hover: hover) and (pointer: fine) {
	/* Image link and title link are separate sibling <a> elements (not
	   nested), so this has to key off the card, not the anchor. */
	li.wc-block-product:hover .wp-block-post-title,
	ul.products li.product:hover .woocommerce-loop-product__title {
		color: var(--ll-gold-deep) !important;
	}
}

/* Price */
li.wc-block-product .wc-block-components-product-price,
ul.products li.product .price {
	display: flex !important;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem;
	font-family: var(--ll-sans) !important;
	font-size: .92rem !important;
	font-weight: 500 !important;
	color: var(--ll-ink) !important;
	margin: 0 !important;
}
li.wc-block-product del,
ul.products li.product .price del {
	opacity: 1 !important;
	color: var(--ll-muted) !important;
	font-weight: 400 !important;
	font-size: .82rem !important;
	text-decoration-thickness: 1px;
}
li.wc-block-product ins,
ul.products li.product .price ins {
	text-decoration: none !important;
	color: var(--ll-sale) !important;
	font-weight: 500 !important;
	background: transparent !important;
}

/* Promo badge — hidden, not just restyled. Every product currently on
   sale uses one of the promotional graphic images (price/ribbon baked
   directly into the photo by the seller's own ad design), and none of
   the clean-photography products are on sale. So this badge was never
   adding information — it was a second "PROMO" pill sitting directly on
   top of the image's own "PROMO Spéciale !" ribbon in the same corner,
   on every single card. That double-badge was the real complaint behind
   "the card design is still messed up" (confirmed against real device
   screenshots, not just automated checks). If a clean-photo product
   ever goes on sale with no baked-in messaging, re-enable this for a
   real badge again — trivial to flip back. */
.wc-block-components-product-sale-badge,
ul.products li.product .onsale,
span.onsale {
	display: none !important;
}

/* The grid's own "add to cart" is noise on mobile — the card links to the product. */
li.wc-block-product .wp-block-woocommerce-product-button,
ul.products li.product a.add_to_cart_button,
ul.products li.product a.product_type_variable { display: none !important; }

/* Staggered reveal on load */
@media (prefers-reduced-motion: no-preference) {
	li.wc-block-product,
	ul.products li.product {
		animation: ll-rise .7s var(--ll-ease) both;
	}
	li.wc-block-product:nth-child(1),  ul.products li.product:nth-child(1)  { animation-delay: .04s; }
	li.wc-block-product:nth-child(2),  ul.products li.product:nth-child(2)  { animation-delay: .10s; }
	li.wc-block-product:nth-child(3),  ul.products li.product:nth-child(3)  { animation-delay: .16s; }
	li.wc-block-product:nth-child(4),  ul.products li.product:nth-child(4)  { animation-delay: .22s; }
	li.wc-block-product:nth-child(5),  ul.products li.product:nth-child(5)  { animation-delay: .28s; }
	li.wc-block-product:nth-child(6),  ul.products li.product:nth-child(6)  { animation-delay: .34s; }
	li.wc-block-product:nth-child(n+7), ul.products li.product:nth-child(n+7) { animation-delay: .38s; }
}
@keyframes ll-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* Archive furniture */
.woocommerce-result-count,
.wc-block-product-results-count {
	font-size: .72rem !important;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ll-muted) !important;
}
.wc-block-catalog-sorting select,
.woocommerce-ordering select {
	font-family: var(--ll-sans);
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	border: 1px solid var(--ll-line);
	border-radius: var(--ll-radius);
	background: var(--ll-surface);
	padding: .7rem 2rem .7rem .8rem;
	min-height: 44px;
	color: var(--ll-ink);
}

/* Card contents read as one column — the theme centres titles by default. */
li.wc-block-product .wp-block-post-title,
li.wc-block-product .wc-block-components-product-price,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .price {
	text-align: left !important;
	justify-content: flex-start !important;
}
li.wc-block-product .wp-block-post-title a {
	display: inline-block;
	padding: 2px 0;
}

/* Pagination — every page link is a real tap target */
.wp-block-query-pagination,
.woocommerce-pagination {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 2.5rem !important;
}
.wp-block-query-pagination-numbers { display: contents; }
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers,
.woocommerce-pagination a,
.woocommerce-pagination .page-numbers {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 .6rem;
	border: 1px solid var(--ll-line);
	border-radius: var(--ll-radius);
	background: var(--ll-surface);
	font-family: var(--ll-sans);
	font-size: .85rem;
	color: var(--ll-ink);
	text-decoration: none !important;
	transition: background .25s var(--ll-ease), border-color .25s var(--ll-ease);
}
.wp-block-query-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current {
	background: var(--ll-ink);
	border-color: var(--ll-ink);
	color: var(--ll-canvas);
}

/* Breadcrumbs need room for a fingertip too */
.woocommerce-breadcrumb a,
.wc-block-breadcrumbs a {
	display: inline-block;
	padding: 6px 0;
}

.wp-block-query-title,
.woocommerce-products-header__title {
	font-size: clamp(2.1rem, 9vw, 3.4rem) !important;
	margin-bottom: 1.5rem !important;
}

/* --------------------------------------------------------------------------
   6. Single product
   -------------------------------------------------------------------------- */

.single-product div.product {
	display: block;
}

/* Gallery: full-bleed on mobile, swipeable when the slider is absent */
.single-product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 0 1.75rem !important;
}

@media (max-width: 781px) {
	.single-product .woocommerce-product-gallery {
		width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}

	/* jquery.zoom injects a full-resolution <img class="zoomImg"> (native
	   size — 1254px+ on this catalogue) at position:absolute for the
	   hover-magnify lens. It's meaningless on a touchscreen (no hover
	   event to trigger it) and, despite being opacity:0 and sitting
	   inside an ancestor with overflow-x:hidden, its sheer geometric
	   width was still enough to widen the browser's computed layout
	   viewport — the whole product page scrolled horizontally because
	   of one invisible element. Removing it also skips downloading that
	   full-resolution image on mobile, for free. */
	.zoomImg { display: none !important; }
}

.single-product .woocommerce-product-gallery img { border-radius: 0; }

@media (min-width: 782px) {
	.single-product .woocommerce-product-gallery img { border-radius: var(--ll-radius); }
}

/* Fallback carousel when flexslider never initialises */
.ll-gallery-scroll .woocommerce-product-gallery__wrapper {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.ll-gallery-scroll .woocommerce-product-gallery__wrapper::-webkit-scrollbar { display: none; }
.ll-gallery-scroll .woocommerce-product-gallery__image {
	flex: 0 0 88%;
	scroll-snap-align: center;
}

/* Flexslider thumbnails as a tidy strip */
.single-product .flex-control-thumbs {
	display: flex !important;
	gap: 8px;
	overflow-x: auto;
	padding: 12px var(--ll-gut) 0;
	margin: 0 !important;
	list-style: none;
	scrollbar-width: none;
}
.single-product .flex-control-thumbs::-webkit-scrollbar { display: none; }
.single-product .flex-control-thumbs li {
	flex: 0 0 68px;
	margin: 0 !important;
	width: auto !important;
}
.single-product .flex-control-thumbs img {
	width: 68px;
	height: 88px;
	object-fit: cover;
	border-radius: 2px;
	opacity: .5;
	transition: opacity .3s var(--ll-ease);
}
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover { opacity: 1; }

/* Summary */
.single-product .summary.entry-summary {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 var(--ll-gut);
}

.single-product .product_title {
	margin: 0 0 .5rem !important;
	line-height: 1.08;
}

.single-product .summary > .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .7rem;
	font-family: var(--ll-sans);
	font-size: 1.5rem !important;
	font-weight: 500;
	color: var(--ll-ink) !important;
	margin: 0 0 1.4rem !important;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--ll-line);
}
.single-product .summary > .price del {
	font-size: 1rem;
	color: var(--ll-muted) !important;
	opacity: 1;
	font-weight: 400;
}
.single-product .summary > .price ins {
	text-decoration: none;
	color: var(--ll-sale) !important;
	background: transparent;
}

.woocommerce-product-details__short-description {
	color: var(--ll-ink-soft);
	font-size: .96rem;
	line-height: 1.7;
	margin-bottom: 1.6rem;
}

/* Variation chips (built by ui.js from the native selects) */
.ll-swatch { margin: 0 0 1.4rem; }

.ll-swatch__label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ll-muted);
	margin-bottom: .65rem;
}
.ll-swatch__value {
	font-family: var(--ll-display);
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ll-ink);
}

.ll-swatch__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ll-chip {
	appearance: none;
	box-sizing: border-box;
	min-width: 52px;
	min-height: 48px;
	padding: 0 1rem;
	border: 1px solid var(--ll-line);
	border-radius: var(--ll-radius);
	background: var(--ll-surface);
	color: var(--ll-ink);
	font-family: var(--ll-sans);
	font-size: .86rem;
	font-weight: 400;
	letter-spacing: .04em;
	cursor: pointer;
	transition: border-color .25s var(--ll-ease), background .25s var(--ll-ease),
	            color .25s var(--ll-ease), transform .1s var(--ll-ease);
	-webkit-tap-highlight-color: transparent;
}
.ll-chip:active { transform: scale(.95); }
.ll-chip[aria-pressed="true"] {
	border-color: var(--ll-ink);
	background: var(--ll-ink);
	color: var(--ll-canvas);
}
.ll-chip[disabled] {
	opacity: .3;
	cursor: not-allowed;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* Hide the native selects once chips take over */
.ll-swatches-ready .variations select { display: none !important; }
.ll-swatches-ready .variations,
.ll-swatches-ready .variations tbody,
.ll-swatches-ready .variations tr,
.ll-swatches-ready .variations td,
.ll-swatches-ready .variations th {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	border: 0 !important;
}
.ll-swatches-ready .variations label { display: none !important; }

.reset_variations {
	display: inline-block;
	font-size: .7rem !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ll-muted) !important;
	margin-bottom: 1rem;
}

/* Quantity */
.quantity {
	display: inline-flex !important;
	align-items: stretch;
	border: 1px solid var(--ll-line);
	border-radius: var(--ll-radius);
	overflow: hidden;
	background: var(--ll-surface);
}
.quantity input.qty {
	width: 56px !important;
	min-height: 52px;
	border: 0 !important;
	text-align: center;
	font-family: var(--ll-sans);
	font-size: 1rem !important;
	background: transparent;
	color: var(--ll-ink);
	-moz-appearance: textfield;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ll-qty-btn {
	appearance: none;
	border: 0;
	background: transparent;
	width: 48px;
	min-height: 52px;
	font-size: 1.15rem;
	color: var(--ll-ink);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.ll-qty-btn:active { background: var(--ll-shell); }

/* Cart form */
form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 0 0 1.75rem !important;
}
form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 180px;
}

.woocommerce-variation-price { margin-bottom: 1rem; }
.woocommerce-variation-price .price {
	font-family: var(--ll-sans);
	font-size: 1.3rem;
	font-weight: 500;
	color: var(--ll-ink);
}
.woocommerce-variation-availability { font-size: .82rem; color: var(--ll-ok); }

/* --- Block-based single product template -------------------------------- */

.single-product .wp-block-post-title {
	font-size: clamp(1.9rem, 7.5vw, 3rem) !important;
	line-height: 1.08 !important;
	margin: 0 0 .6rem !important;
}

.single-product .wp-block-woocommerce-product-price {
	display: flex !important;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .7rem;
	font-family: var(--ll-sans) !important;
	font-size: 1.5rem !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	color: var(--ll-ink) !important;
	margin: 0 0 1.4rem !important;
	padding-bottom: 1.35rem;
	border-bottom: 1px solid var(--ll-line);
}
.single-product .wp-block-woocommerce-product-price del {
	font-size: 1rem;
	font-weight: 400;
	color: var(--ll-muted) !important;
	opacity: 1;
	text-decoration-thickness: 1px;
}
.single-product .wp-block-woocommerce-product-price ins {
	text-decoration: none;
	background: transparent;
	color: var(--ll-sale) !important;
	font-weight: 500;
}

/* Breadcrumbs */
.wc-block-breadcrumbs {
	font-size: .7rem !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ll-muted) !important;
	margin-bottom: 1.1rem;
}
.wc-block-breadcrumbs a { color: var(--ll-muted) !important; text-decoration: none; }

/* Product details / tabs block */
.wp-block-woocommerce-product-details { margin-top: 2.25rem; }
.wp-block-woocommerce-product-details h2,
.wp-block-woocommerce-product-details h3 {
	font-size: 1.25rem !important;
	margin-bottom: .75rem !important;
}
.wp-block-woocommerce-product-details p {
	color: var(--ll-ink-soft);
	line-height: 1.75;
}

/* Related products block */
.wp-block-woocommerce-product-collection { margin-top: 3rem; }
.wp-block-woocommerce-product-collection > h2,
.wp-block-woocommerce-product-collection .wp-block-heading {
	font-size: 1.5rem !important;
	margin-bottom: 1.4rem !important;
}

/* The add-to-cart block holds the classic variation form */
.wp-block-woocommerce-add-to-cart-form { margin-top: .25rem; }

/* Reassurance list under the buy button */
.ll-assure {
	list-style: none;
	margin: 0 0 2rem;
	padding: 1.2rem 0 0;
	border-top: 1px solid var(--ll-line);
	display: grid;
	gap: .8rem;
}
.ll-assure li {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	font-size: .86rem;
	line-height: 1.5;
	color: var(--ll-ink-soft);
}
.ll-assure svg { flex: 0 0 18px; margin-top: .15rem; color: var(--ll-gold-deep); }
.ll-assure strong { color: var(--ll-ink); font-weight: 500; }

/* Meta / tabs */
.product_meta { font-size: .78rem; color: var(--ll-muted); letter-spacing: .04em; }

.woocommerce-tabs { margin-top: 2.5rem; padding: 0 var(--ll-gut); }
/* The single-product template renders the block-based "Product Details"
   block, not classic tabs markup — it ships its own tab-list rule
   (.wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs)
   at far higher specificity that silently forces overflow:visible. With
   flex-wrap left at nowrap and a long label ("Informations
   complémentaires"), that turned the tab row into the actual cause of
   this page's horizontal scroll — everything else found along the way
   (an inert mini-cart drawer, an oversized hover-zoom image) was real
   but secondary. !important here, not just a plain override, since a
   future WC update could reorder these stylesheets. */
.woocommerce-tabs ul.tabs {
	display: flex;
	gap: 1.5rem;
	padding: 0 0 0 0 !important;
	margin: 0 0 1.5rem !important;
	border-bottom: 1px solid var(--ll-line);
	list-style: none;
	overflow-x: auto !important;
	overflow-y: visible !important;
	scrollbar-width: none;
}
.woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { content: none !important; border: 0 !important; }
.woocommerce-tabs ul.tabs li {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	white-space: nowrap;
}
.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: .9rem 0 !important;
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ll-muted) !important;
	border-bottom: 1px solid transparent;
	text-decoration: none !important;
}
.woocommerce-tabs ul.tabs li.active a {
	color: var(--ll-ink) !important;
	border-bottom-color: var(--ll-gold);
}
.woocommerce-Tabs-panel h2 { display: none; }
.woocommerce-Tabs-panel p { color: var(--ll-ink-soft); line-height: 1.75; }

.related.products,
.up-sells { padding: 2.5rem var(--ll-gut) 0; }
.related.products > h2,
.up-sells > h2 { font-size: 1.5rem !important; margin-bottom: 1.5rem !important; }

/* --------------------------------------------------------------------------
   7. Sticky commerce bar (single product)
   -------------------------------------------------------------------------- */

.ll-buybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px var(--ll-gut) calc(10px + env(safe-area-inset-bottom, 0px));
	background: rgba(251, 247, 242, .93);
	-webkit-backdrop-filter: blur(16px) saturate(1.6);
	backdrop-filter: blur(16px) saturate(1.6);
	border-top: 1px solid var(--ll-line);
	transform: translateY(110%);
	transition: transform .45s var(--ll-ease);
}
.ll-buybar.is-visible { transform: none; }

.ll-buybar__price {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	min-width: 0;
}
.ll-buybar__price small {
	font-size: .58rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ll-muted);
}
.ll-buybar__price span {
	font-family: var(--ll-sans);
	font-size: 1.06rem;
	font-weight: 500;
	color: var(--ll-ink);
	white-space: nowrap;
}
.ll-buybar__price del { display: none; }

.ll-buybar .ll-btn {
	flex: 1 1 auto;
	padding: 1.05rem 1rem !important;
}

@media (min-width: 900px) { .ll-buybar { display: none; } }

/* --------------------------------------------------------------------------
   8. WhatsApp floating action
   -------------------------------------------------------------------------- */

.ll-wa {
	position: fixed;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 94;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #1F8A5B;
	color: #fff !important;
	box-shadow: 0 6px 22px rgba(28, 22, 19, .26);
	text-decoration: none !important;
	transition: transform .3s var(--ll-ease), box-shadow .3s var(--ll-ease);
}
.ll-wa:active { transform: scale(.92); }
.ll-wa svg { width: 27px; height: 27px; }

/* Lift clear of the buy bar when it is showing */
.ll-has-buybar .ll-wa { bottom: calc(var(--ll-bar-h) + 14px + env(safe-area-inset-bottom, 0px)); }

/* --------------------------------------------------------------------------
   9. Checkout
   -------------------------------------------------------------------------- */

.woocommerce-checkout main { padding-bottom: 2rem; }

.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.woocommerce-checkout h3 {
	font-size: 1.4rem !important;
	margin: 0 0 1.25rem !important;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--ll-line);
}

.woocommerce-billing-fields,
.woocommerce-checkout-review-order,
.woocommerce-additional-fields {
	background: var(--ll-surface);
	border: 1px solid var(--ll-line);
	border-radius: var(--ll-radius);
	padding: 1.4rem;
	margin-bottom: 1.25rem;
}

.woocommerce-checkout .form-row {
	width: 100% !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 0 1.1rem !important;
}

.woocommerce-checkout .form-row label {
	display: block;
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ll-muted);
	margin-bottom: .5rem;
}
.woocommerce-checkout .required { color: var(--ll-gold-deep); text-decoration: none; }

/* 16px keeps iOS from zooming the viewport on focus */
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.select2-container .select2-selection--single {
	box-sizing: border-box !important;
	width: 100% !important;
	font-family: var(--ll-sans) !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	color: var(--ll-ink) !important;
	background: var(--ll-canvas) !important;
	border: 1px solid var(--ll-line) !important;
	border-radius: var(--ll-radius) !important;
	padding: .95rem 1rem !important;
	min-height: 52px !important;
	transition: border-color .25s var(--ll-ease), background .25s var(--ll-ease);
	box-shadow: none !important;
}
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
	border-color: var(--ll-gold) !important;
	background: var(--ll-surface) !important;
	outline: none;
}
.woocommerce-checkout textarea { min-height: 96px !important; }

.select2-container--default .select2-selection--single {
	height: 52px !important;
	display: flex;
	align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.4 !important;
	padding: 0 !important;
	color: var(--ll-ink) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 50px !important; }
.select2-dropdown { border-color: var(--ll-line) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--ll-gold) !important;
}

.woocommerce-invalid input.input-text { border-color: var(--ll-sale) !important; }

/* Order review */
.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: .8rem 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--ll-line-soft) !important;
	text-align: left;
	vertical-align: top;
}
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child {
	text-align: right;
	/* The RTL currency symbol (د.ج) mid-amount is exactly the kind of
	   content that breaks awkwardly given half a chance — never let the
	   price column wrap; let the product-name column absorb width instead. */
	white-space: nowrap;
}
.woocommerce-checkout-review-order-table .product-name {
	word-break: break-word;
	padding-right: .75rem !important;
}
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
	font-weight: 500;
	border-bottom: 0 !important;
}
.woocommerce-checkout-review-order-table tfoot tr:last-child th,
.woocommerce-checkout-review-order-table tfoot tr:last-child td {
	font-family: var(--ll-sans);
	font-size: 1.15rem;
	padding-top: 1rem !important;
	border-top: 1px solid var(--ll-line) !important;
	color: var(--ll-ink);
}
.product-name { color: var(--ll-ink-soft); }
.product-quantity { color: var(--ll-muted); }

/* Payment */
.wc_payment_methods {
	list-style: none;
	margin: 0 0 1.25rem !important;
	padding: 0 !important;
}
.wc_payment_methods li {
	border: 1px solid var(--ll-line);
	border-radius: var(--ll-radius);
	padding: 1.1rem;
	margin-bottom: .7rem;
	background: var(--ll-canvas);
}
.wc_payment_methods li label {
	display: inline-flex !important;
	align-items: center;
	gap: .6rem;
	font-size: .95rem !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--ll-ink) !important;
	margin: 0 !important;
	font-weight: 500;
}
.wc_payment_methods input[type="radio"] { width: 20px; height: 20px; accent-color: var(--ll-gold-deep); }
.payment_box {
	background: transparent !important;
	color: var(--ll-ink-soft);
	font-size: .86rem;
	margin: .7rem 0 0 !important;
	padding: 0 !important;
}
.payment_box::before { content: none !important; }

#place_order {
	width: 100%;
	margin-top: .5rem;
	font-size: .86rem !important;
	padding: 1.3rem !important;
}

.woocommerce-terms-and-conditions-wrapper { font-size: .82rem; color: var(--ll-muted); }

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border: 1px solid var(--ll-line) !important;
	border-left: 3px solid var(--ll-gold) !important;
	background: var(--ll-surface) !important;
	color: var(--ll-ink) !important;
	border-radius: var(--ll-radius);
	padding: 1rem 1.1rem !important;
	font-size: .9rem;
	list-style: none;
}
.woocommerce-error { border-left-color: var(--ll-sale) !important; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none !important; }

/* The checkout's "added to cart" banner is a WooCommerce *Blocks* component
   (.wc-block-components-notice-banner), a completely different element
   from .woocommerce-message above — none of the styling there reached it.
   Its own stylesheet zeros out the "continue shopping" link's padding at
   higher specificity (3 classes) than a plain button selector can beat,
   which is why it rendered as bare text jammed against its own border. */
.wc-block-components-notice-banner {
	align-items: flex-start !important;
	gap: 12px !important;
	border-radius: var(--ll-radius) !important;
	border-width: 1px !important;
	padding: 1rem 1.1rem !important;
	font-family: var(--ll-sans);
}
.wc-block-components-notice-banner svg {
	width: 22px !important;
	height: 22px !important;
	margin-top: 2px;
	flex-shrink: 0;
}
.wc-block-components-notice-banner__content {
	font-size: .9rem !important;
	line-height: 1.6;
	color: var(--ll-ink);
}
/* Out-specify WC Blocks' 3-class rules deliberately (documented once here
   rather than re-discovered next time): they zero out both padding
   (!important) and margin-top (plain, but still higher specificity than
   a 2-class selector) on this exact link. */
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward.wc-forward {
	display: inline-flex !important;
	padding: .85rem 1.3rem !important;
	font-size: .74rem !important;
	margin-top: .85rem !important;
}

/* --------------------------------------------------------------------------
   10. Homepage sections
   -------------------------------------------------------------------------- */

.ll-hero {
	position: relative;
	padding: clamp(3rem, 15vw, 7rem) var(--ll-gut) clamp(2.75rem, 12vw, 6rem);
	background:
		radial-gradient(120% 80% at 15% 0%, #FFFDFA 0%, rgba(255,253,250,0) 60%),
		linear-gradient(168deg, var(--ll-shell) 0%, var(--ll-canvas) 62%);
	overflow: hidden;
}
/* Fine grain keeps the flat fill from looking like plastic */
.ll-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .3;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
.ll-hero > * { position: relative; z-index: 1; }

.ll-hero__title {
	font-family: var(--ll-display);
	font-size: clamp(2.9rem, 15vw, 6rem);
	font-weight: 300;
	line-height: .96;
	letter-spacing: -.02em;
	margin: 0 0 1.1rem;
}
.ll-hero__title em {
	display: block;
	font-style: italic;
	font-weight: 400;
	color: var(--ll-gold-deep);
}
.ll-hero__lede {
	font-size: 1.02rem;
	line-height: 1.65;
	color: var(--ll-ink-soft);
	max-width: 34ch;
	margin: 0 0 2rem;
}
/* Stacked full-width on phones so neither label wraps mid-button. */
.ll-hero__cta {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ll-hero__cta .ll-btn { width: 100%; }

@media (min-width: 520px) {
	.ll-hero__cta { flex-direction: row; flex-wrap: wrap; }
	.ll-hero__cta .ll-btn { width: auto; flex: 0 1 auto; }
}

/* Value strip */
.ll-values {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--ll-line);
	border-top: 1px solid var(--ll-line);
	border-bottom: 1px solid var(--ll-line);
}
.ll-values__item {
	background: var(--ll-canvas);
	padding: 1.5rem 1rem;
	text-align: center;
}
.ll-values__item svg { color: var(--ll-gold-deep); margin-bottom: .6rem; }
.ll-values__item strong {
	display: block;
	font-family: var(--ll-sans);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: .2rem;
}
.ll-values__item span { font-size: .78rem; color: var(--ll-muted); line-height: 1.4; }
@media (min-width: 700px) { .ll-values { grid-template-columns: repeat(4, 1fr); } }

.ll-sechead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.75rem;
}
.ll-sechead h2 { margin: 0; }
.ll-sechead a {
	flex: 0 0 auto;
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ll-gold-deep);
	white-space: nowrap;
	border-bottom: 1px solid var(--ll-gold-soft);
	padding-bottom: 2px;
	text-decoration: none;
}

/* Editorial quote band */
.ll-quote {
	text-align: center;
	padding: clamp(3rem, 13vw, 6rem) var(--ll-gut);
}
.ll-quote p {
	font-family: var(--ll-display);
	font-size: clamp(1.6rem, 7vw, 2.6rem);
	font-style: italic;
	font-weight: 300;
	line-height: 1.25;
	margin: 0 auto;
	max-width: 22ch;
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.wp-site-blocks > footer,
footer.site-footer {
	background: var(--ll-ink);
	color: #CFC3B8;
	padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}
.wp-site-blocks > footer h2,
.wp-site-blocks > footer h3,
footer.site-footer h2,
footer.site-footer h3 {
	color: var(--ll-canvas) !important;
	font-size: .72rem !important;
	font-family: var(--ll-sans) !important;
	font-weight: 500 !important;
	letter-spacing: .22em !important;
	text-transform: uppercase !important;
}
.wp-site-blocks > footer a { color: #CFC3B8 !important; }
.wp-site-blocks > footer a:hover { color: var(--ll-gold-soft) !important; }
.wp-site-blocks > footer input[type="email"] {
	font-size: 16px !important;
	min-height: 50px;
	border-radius: var(--ll-radius);
	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .05);
	color: #fff;
	padding: .8rem 1rem;
}
.wp-site-blocks > footer .wp-element-button {
	background: var(--ll-gold) !important;
	border-color: var(--ll-gold) !important;
	color: #fff !important;
}

/* Footer navigation is a plain link list, never a collapsible drawer.
   The theme forces every nav's hamburger toggle to show unconditionally
   (even in the footer) and hides the link list until it's tapped open —
   fine for the header, but it left the footer's 5 links completely
   invisible behind a redundant second hamburger. */
/* Same specificity problem as the container below: the theme forces this
   button to display:flex at higher specificity than a plain footer-scoped
   rule can beat, so it's out-specified deliberately here too. */
footer .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
footer .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
	display: none !important;
}
footer .wp-block-navigation__responsive-container {
	position: static !important;
	inset: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	animation: none !important;
	background: transparent !important;
	color: inherit !important;
	padding: 0 !important;
	overflow: visible !important;
	z-index: auto !important;
	height: auto !important;
}
/* The theme's mobile override hides this at a higher specificity
   (body.hostinger-ai-woocommerce-active … :not(.is-menu-open) { display:none }) —
   out-specify it deliberately rather than fight it with more !importants. */
footer .wp-block-navigation__responsive-container.wp-block-navigation__responsive-container.wp-block-navigation__responsive-container.wp-block-navigation__responsive-container.wp-block-navigation__responsive-container {
	display: block !important;
}
footer .wp-block-navigation__responsive-container-content {
	position: static !important;
	padding: 0 !important;
}
footer .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column !important;
	gap: .6rem !important;
	align-items: flex-start !important;
}
footer .wp-block-navigation-item { width: auto !important; }
footer .wp-block-navigation-item__content {
	padding: 3px 0 !important;
	font-size: .92rem !important;
	color: #CFC3B8 !important;
}
footer .wp-block-navigation-item__content:hover { color: var(--ll-gold-soft) !important; }

/* Contact links are primary actions on a phone — size them accordingly */
.wp-site-blocks > footer a[href^="mailto:"],
.wp-site-blocks > footer a[href^="tel:"] {
	display: inline-block;
	padding: 10px 0;
	font-size: 1rem;
}

/* Social icons get real tap targets */
.wp-block-social-links .wp-social-link a {
	min-width: 44px;
	min-height: 44px;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* --------------------------------------------------------------------------
   12. Content pages (Contact, Conditions Générales, Notre Histoire)
   -------------------------------------------------------------------------- */

.ll-page-intro {
	padding: clamp(2rem, 9vw, 4rem) var(--ll-gut) clamp(1.5rem, 6vw, 2.5rem);
	max-width: 640px;
}
.ll-page-intro__title {
	font-size: clamp(2.1rem, 9vw, 3.2rem);
	margin: 0 0 .85rem;
}
.ll-page-intro__lede {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ll-ink-soft);
	margin: 0;
}

/* --- Homepage "Nouveautés" shelf: swipeable, distinct from the plain
       browsing grid on /boutique/ ---------------------------------------
   Bleeds to the true viewport edge (not just its parent's width) — the
   homepage's sections sit in the theme's narrower "constrained" content
   column (~740px on desktop, unlike the shop grid's wider "wide"
   alignment), so a margin relative to the parent left the shelf looking
   cramped and card-width inconsistent with the rest of the site above
   ~740px wide. */
.ll-shelf ul.products {
	display: flex !important;
	box-sizing: border-box !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	gap: 14px !important;
	padding: .25rem 0 .5rem !important;
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding-left: var(--ll-gut) !important;
	padding-right: var(--ll-gut) !important;
	scrollbar-width: none;
}
.ll-shelf ul.products::-webkit-scrollbar { display: none; }
.ll-shelf ul.products li.product {
	flex: 0 0 66%;
	scroll-snap-align: start;
}
@media (min-width: 560px) { .ll-shelf ul.products li.product { flex-basis: 42%; } }
@media (min-width: 900px) { .ll-shelf ul.products li.product { flex-basis: 27%; } }
@media (min-width: 1200px) { .ll-shelf ul.products li.product { flex-basis: 21%; } }

/* --- Contact page ---------------------------------------------------- */
.ll-contact-grid {
	display: grid;
	gap: 2.5rem;
	padding: 0 var(--ll-gut) clamp(3rem, 10vw, 5rem);
	max-width: 1040px;
	margin: 0 auto;
}
@media (min-width: 860px) {
	.ll-contact-grid { grid-template-columns: 1.3fr 1fr; align-items: start; gap: 4rem; }
}

.ll-contact-form label {
	display: block;
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ll-muted);
	margin: 1.1rem 0 .5rem;
}
.ll-contact-form label:first-of-type { margin-top: 0; }
.ll-contact-form input[type="text"],
.ll-contact-form input[type="email"],
.ll-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--ll-sans);
	font-size: 16px;
	line-height: 1.4;
	color: var(--ll-ink);
	background: var(--ll-canvas);
	border: 1px solid var(--ll-line);
	border-radius: var(--ll-radius);
	padding: .95rem 1rem;
	min-height: 52px;
	transition: border-color .25s var(--ll-ease), background .25s var(--ll-ease);
}
.ll-contact-form textarea { min-height: 130px; resize: vertical; }
.ll-contact-form input:focus,
.ll-contact-form textarea:focus {
	outline: none;
	border-color: var(--ll-gold);
	background: var(--ll-surface);
}
.hts-privacy-agree {
	margin: 1.4rem 0 1.5rem;
}
.hts-privacy-agree .hts-form-control {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: .78rem;
	line-height: 1.5;
	color: var(--ll-muted);
	cursor: pointer;
}
.hts-privacy-agree input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--ll-gold-deep);
}
.hts-privacy-agree a { color: var(--ll-gold-deep); }
.ll-contact-form input[type="submit"] {
	appearance: none;
	font-family: var(--ll-sans);
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	border: 1px solid var(--ll-ink);
	border-radius: var(--ll-radius);
	background: var(--ll-ink);
	color: var(--ll-canvas);
	padding: 1.05rem 1.8rem;
	min-height: 52px;
	cursor: pointer;
	transition: background .35s var(--ll-ease), border-color .35s var(--ll-ease);
}
.ll-contact-form input[type="submit"]:hover {
	background: var(--ll-gold-deep);
	border-color: var(--ll-gold-deep);
}
.ll-contact-form .validate-message {
	margin-top: 1rem;
	font-size: .85rem;
}

.ll-contact-card {
	background: var(--ll-surface);
	border: 1px solid var(--ll-line);
	border-radius: var(--ll-radius);
	padding: 1.75rem;
	margin-bottom: 1.5rem;
}
.ll-contact-card .ll-eyebrow { margin-bottom: 1.1rem; }
.ll-contact-link {
	display: block;
	font-family: var(--ll-display);
	font-size: 1.15rem;
	color: var(--ll-ink);
	text-decoration: none;
	padding: .5rem 0;
	border-bottom: 1px solid var(--ll-line-soft);
	margin-bottom: 1.3rem;
}
.ll-contact-card .ll-btn { width: 100%; }

/* --- Conditions Générales: quiet, readable legal typography ----------- */
.ll-legal {
	max-width: 680px;
	margin: 0 auto;
	padding: 0 var(--ll-gut) clamp(3rem, 10vw, 5rem);
}
.ll-legal h2 {
	font-size: 1.35rem;
	margin: 2.4rem 0 .85rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--ll-line);
}
.ll-legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ll-legal p {
	font-size: .96rem;
	line-height: 1.75;
	color: var(--ll-ink-soft);
	margin: 0 0 1rem;
}
.ll-legal a { color: var(--ll-gold-deep); }

/* --- Notre Histoire: editorial story block ----------------------------- */
.ll-story {
	display: grid;
	gap: 2rem;
	padding: 0 var(--ll-gut) clamp(2.5rem, 9vw, 4rem);
	max-width: 1100px;
	margin: 0 auto;
}
@media (min-width: 860px) {
	.ll-story { grid-template-columns: 1fr 1fr; align-items: center; gap: 3.5rem; }
}
.ll-story__text h2 { margin: 0 0 1.1rem; font-size: clamp(1.6rem, 5vw, 2.1rem); }
.ll-story__text p {
	font-size: .98rem;
	line-height: 1.75;
	color: var(--ll-ink-soft);
	margin: 0 0 1.1rem;
}
.ll-story__images {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.ll-story__images img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--ll-radius);
	display: block;
}
.ll-story__images img:first-child { margin-top: 2rem; }

.ll-quote .ll-btn { margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   13. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}