/* LuwiPress Gold — design tokens.
 *
 * Every Elementor section in the bundled Kit reads from these CSS custom
 * properties. Keep them in sync with theme.json and Elementor Site Settings.
 */
:root {
	--primary: #735c00;
	--primary-hover: #574500;
	--primary-light: #D4AF37;
	--accent: #545e76;
	--ink: #1b1c1c;
	--ink-soft: #4d4635;
	--muted: #7f7663;
	--bg: #fcf9f8;
	--bg-alt: #f6f3f2;
	--card: #ffffff;
	--line: #e8e2d3;
	--line-light: #f0ebe0;
	--sale: #a33b3e;
	--black: #0c0c0c;
	--icon-red: #d83131;

	--serif: 'Playfair Display', Georgia, serif;
	--sans:  'Inter', -apple-system, sans-serif;
	--mono:  'JetBrains Mono', ui-monospace, monospace;

	--content-w: 1372px;
	--gutter: 32px;
	--gutter-mobile: 20px;

	--radius-card: 8px;
	--radius-pill: 999px;
	--radius-input: 6px;
}

/* Body baseline — Elementor templates expect Inter on body.
   Note (1.10.4+): html is locked to the brand-black token while body
   keeps the cream surface. This kills the "white bottom band" that
   appeared on every page when the page content + footer didn't fill
   the viewport — the leftover area below the footer used to inherit
   body's cream bg. Now any overflow area shows through to html,
   which is the same colour as the footer, so the page reads as one
   continuous dark surface from footer to viewport edge. Replaces the
   V69 Kit CSS layer that handled this at the option level (and could
   silently truncate near the 412 KB Kit CSS DB ceiling). */
html {
	background: #0c0c0c;
}
html, body {
	color: var(--ink);
	font-family: var(--sans);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
body {
	background: var(--bg);
}

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

.serif { font-family: var(--serif); }
.mono  { font-family: var(--mono); }

/* WordPress admin bar — push fallback header below it. */
body.admin-bar .lwp-fallback-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .lwp-fallback-header { top: 46px; }
}

/* ────────────────────────────────────────────────────────────────────── */
/* Fallback chrome (only visible BEFORE the operator imports the Kit).    */
/* Tiny and intentionally unstyled — Elementor takes over once active.    */
/* ────────────────────────────────────────────────────────────────────── */

.lwp-fallback-header {
	background: #fff;
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 80;
}
.lwp-fallback-header__inner {
	max-width: var(--content-w);
	margin: 0 auto;
	padding: 18px var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}
.lwp-fallback-header__logo {
	font-family: var(--serif);
	font-size: 28px;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
}
.lwp-fallback-header__nav ul {
	list-style: none;
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
}
.lwp-fallback-header__nav a {
	color: var(--ink);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}
.lwp-fallback-header__nav a:hover { color: var(--primary); }

.lwp-fallback-footer {
	background: var(--black);
	color: #aaa;
	margin-top: 96px;
}
.lwp-fallback-footer__inner {
	max-width: var(--content-w);
	margin: 0 auto;
	padding: 32px var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	font-size: 13px;
}
.lwp-fallback-footer__nav ul {
	list-style: none;
	display: flex;
	gap: 18px;
	margin: 0;
	padding: 0;
}
.lwp-fallback-footer__nav a { color: #bbb; text-decoration: none; }
.lwp-fallback-footer__nav a:hover { color: var(--primary-light); }

.lwp-fallback-main {
	max-width: var(--content-w);
	margin: 0 auto;
	padding: 64px var(--gutter);
}

/* Elementor-built singular posts (page.php / single.php branch). Zero
 * width cap, zero padding — Elementor sections own their full layout
 * including section padding, container max-width, and hero spacing.
 * Anything we add here would constrain operator's design intent. */
.lwp-elementor-page {
	max-width: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
.lwp-elementor-page > * { min-width: 0; }
/* Defence in depth — if a parent sneaks in a width cap (some plugins
 * add `.entry-content { max-width: 720px }` via theme.json fallbacks),
 * un-cap any direct Elementor section / container child. */
body.lwp-elementor-built .elementor,
body.lwp-elementor-built .elementor-section,
body.lwp-elementor-built > .elementor {
	max-width: none !important;
	width: 100% !important;
}

/* ────────────────────────────────────────────────────────────────────── */
/*  Elementor container width default = FULL-WIDTH on theme-controlled    */
/*  Elementor pages.                                                      */
/*                                                                        */
/*  Why: Elementor's own defaults set every new container to "boxed"      */
/*  with `--container-max-width: 1372px`. That means even after our       */
/*  page.php Elementor branch removes the theme's 720px reading cap,      */
/*  the visible content still pinches at 1372 px because of Elementor's   */
/*  internal default. Operators end up flipping every page to "Elementor  */
/*  Full Width" template manually to escape this.                         */
/*                                                                        */
/*  This override flips the default the OTHER way: any Elementor          */
/*  container/section nested under our `.lwp-elementor-page` wrapper      */
/*  goes edge-to-edge by default. Operator can still pick a per-container */
/*  width inside Elementor's container settings; that adds an inline      */
/*  style which beats this rule. Acts as a sane default, not a lock-in.   */
/*                                                                        */
/*  Covers both Elementor 4.x flexbox containers (`.e-con.e-con-boxed >   */
/*  .e-con-inner`) and 3.x classic sections (`.elementor-section >        */
/*  .elementor-container`). `!important` is required because Elementor    */
/*  emits per-section inline CSS with deeper specificity.                 */
/* ────────────────────────────────────────────────────────────────────── */
.lwp-elementor-page .e-con.e-con-boxed > .e-con-inner,
.lwp-elementor-page .elementor-section.elementor-section-boxed > .elementor-container,
.lwp-elementor-page .elementor-section > .elementor-container {
	max-width: 100% !important;
}
.lwp-elementor-page .e-con,
.lwp-elementor-page .elementor-section,
.lwp-elementor-page .elementor-container {
	--container-max-width: 100% !important;
}

/* Operator escape hatch — pages tagged with the `lwp-layout-boxed` body
 * class (or template) opt back into the boxed Elementor default. Useful
 * for editorial / journal posts where 1372 px is the right reading
 * width. Set via Customizer or page meta. */
body.lwp-layout-boxed .lwp-elementor-page .e-con.e-con-boxed > .e-con-inner,
body.lwp-layout-boxed .lwp-elementor-page .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: var(--content-w, 1372px) !important;
}
body.lwp-layout-boxed .lwp-elementor-page .e-con,
body.lwp-layout-boxed .lwp-elementor-page .elementor-section {
	--container-max-width: var(--content-w, 1372px) !important;
}

.lwp-fallback-page__title {
	font-family: var(--serif);
	font-size: clamp(36px, 4.5vw, 64px);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.05;
	margin-bottom: 36px;
}
.lwp-fallback-page__content,
.lwp-fallback-single__body {
	max-width: 72ch;
	font-size: 16px;
	line-height: 1.75;
	color: var(--ink-soft);
}
.lwp-fallback-page__content h2,
.lwp-fallback-single__body h2 {
	font-family: var(--serif);
	font-size: 32px;
	font-weight: 500;
	color: var(--ink);
	margin: 1.6em 0 .5em;
}
.lwp-fallback-page__content a,
.lwp-fallback-single__body a {
	color: var(--primary);
	text-decoration: underline;
}

.lwp-fallback-archive__head {
	margin-bottom: 48px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line);
}
.lwp-fallback-archive__head h1 {
	font-family: var(--serif);
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 500;
	letter-spacing: -.02em;
}
.lwp-fallback-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 32px;
}
.lwp-fallback-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 6px;
	overflow: hidden;
}
.lwp-fallback-card__thumb { display: block; }
.lwp-fallback-card__body { padding: 22px; }
.lwp-fallback-card__title {
	font-family: var(--serif);
	font-size: 20px;
	font-weight: 500;
	margin: 0 0 10px;
	line-height: 1.25;
}
.lwp-fallback-card__title a { color: var(--ink); text-decoration: none; }
.lwp-fallback-card__title a:hover { color: var(--primary); }
.lwp-fallback-card__excerpt { font-size: 14px; color: var(--ink-soft); }
.lwp-fallback-card__meta {
	display: block;
	margin-top: 12px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	color: var(--muted);
	text-transform: uppercase;
}

.lwp-fallback-single__head h1 {
	font-family: var(--serif);
	font-size: clamp(36px, 4.5vw, 56px);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.05;
	margin-bottom: 12px;
}
.lwp-fallback-single__meta {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--muted);
	text-transform: uppercase;
	margin-bottom: 36px;
}
.lwp-fallback-single__thumb {
	margin-bottom: 36px;
	border-radius: 8px;
	overflow: hidden;
}

.lwp-fallback-404 { text-align: center; padding-top: 120px; }
.lwp-fallback-404 h1 {
	font-family: var(--serif);
	font-size: clamp(40px, 5vw, 72px);
	font-weight: 500;
	letter-spacing: -.02em;
	margin-bottom: 18px;
}
.lwp-fallback-404 p {
	color: var(--ink-soft);
	margin-bottom: 24px;
}
.lwp-fallback-link {
	display: inline-block;
	padding: 14px 24px;
	background: linear-gradient(135deg, var(--primary), var(--primary-light));
	color: #fff;
	text-decoration: none;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .02em;
	box-shadow: 0 10px 30px -10px rgba(115, 92, 0, .4);
}
.lwp-fallback-link:hover { box-shadow: 0 12px 36px -8px rgba(115, 92, 0, .55); }

@media (max-width: 680px) {
	.lwp-fallback-header__inner,
	.lwp-fallback-footer__inner { flex-direction: column; gap: 16px; }
	.lwp-fallback-header__nav ul { flex-wrap: wrap; justify-content: center; }
	.lwp-fallback-main { padding: 48px var(--gutter-mobile); }
}

/* Reduced motion: kill any decorative animation. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after { animation: none !important; transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────────── */
/* Theme-rendered chrome (Pro absent)                                  */
/* When Elementor Pro / ElementsKit fills the header/footer slots,    */
/* these styles never paint because the markup isn't emitted.         */
/* ─────────────────────────────────────────────────────────────────── */

/* Topbar */
.lwp-topbar {
	background: var(--black, #0c0c0c);
	color: #fff;
	font-size: 12px;
}
.lwp-topbar-inner {
	max-width: var(--content-w, 1372px);
	margin: 0 auto;
	padding: 9px var(--gutter, 32px);
	display: flex;
	justify-content: space-between;
	align-items: center;
	letter-spacing: .02em;
	gap: 24px;
	flex-wrap: wrap;
}
.lwp-topbar-l, .lwp-topbar-r { display: flex; gap: 18px; align-items: center; color: #bbb; flex-wrap: wrap; }
.lwp-topbar a { color: #bbb; text-decoration: none; }
.lwp-topbar a:hover { color: var(--primary-light, #D4AF37); }

/* Language pill — compact "EN · IT · FR · ES" strip with the active
 * language underlined in gold. Reference design `.lang-pill`. */
.lwp-lang-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--mono, 'JetBrains Mono', monospace);
	font-size: 10.5px;
	letter-spacing: .16em;
	color: #aaa;
}
.lwp-lang-pill__code {
	color: #aaa;
	text-decoration: none;
	padding: 1px 0 2px;
	transition: color .15s, border-color .15s;
}
.lwp-lang-pill__code:hover { color: #fff; }
.lwp-lang-pill__code.is-active {
	color: #fff;
	border-bottom: 1px solid var(--primary-light, #D4AF37);
	font-weight: 500;
}
.lwp-lang-pill__sep { color: #555; }

/* Track-order link in topbar-r */
.lwp-topbar-track {
	color: #ccc !important;
	font-family: var(--mono, monospace);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: color .15s;
}
.lwp-topbar-track:hover { color: var(--primary-light, #D4AF37) !important; }

/* Separator pipe between topbar-r elements (visible #555 line) */
.lwp-topbar-sep { color: #444; user-select: none; }
.lwp-topbar-promo { color: #bbb; }

@media (max-width: 720px) {
	.lwp-topbar-inner { flex-wrap: wrap; gap: 8px 18px; padding: 10px var(--gutter-mobile, 20px); }
	.lwp-topbar-r { gap: 10px; font-size: 11px; }
	/* Mobile: hide non-essential — only the language pill stays in topbar-r
	 * so the row is one tidy line on phones. Track-order returns from the
	 * sticky bar via the cart icon on mobile. */
	.lwp-topbar-loc,
	.lwp-topbar-promo,
	.lwp-topbar-track { display: none; }
	.lwp-topbar-sep { display: none; }
	/* Lang pill — slightly more breathing room on tight viewports. */
	.lwp-lang-pill { gap: 8px; font-size: 11px; letter-spacing: .14em; }
	.lwp-lang-pill__code { padding: 2px 0 3px; }
}
@media (max-width: 420px) {
	.lwp-lang-pill { gap: 6px; font-size: 10.5px; }
}

/* Sticky site header */
.lwp-site-header {
	background: #fff;
	border-bottom: 1px solid var(--line, #e8e2d3);
	position: sticky;
	top: 0;
	z-index: 80;
}
.lwp-site-header-inner {
	max-width: var(--content-w, 1372px);
	margin: 0 auto;
	padding: 22px var(--gutter, 32px);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 48px;
	min-width: 0;
}
/* Ensure middle nav column shrinks gracefully so logo + actions stay on the
 * same row even on narrower windows. Without min-width:0, grid items default
 * to min-content width which can push siblings to wrap. */
.lwp-site-header-inner > .lwp-mm,
.lwp-site-header-inner > nav.lwp-mm { min-width: 0; }
@media (max-width: 1100px) {
	.lwp-site-header-inner { gap: 24px; padding: 18px var(--gutter, 32px); }
}
.lwp-site-header-logo {
	color: var(--ink, #1b1c1c);
	text-decoration: none;
	font-family: var(--serif, 'Playfair Display', Georgia, serif);
	font-size: 30px;
	font-weight: 500;
	letter-spacing: -.01em;
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
/* Constrain WP custom-logo image — apply to ALL descendants since
 * the_custom_logo() wraps its own <a class="custom-logo-link">. Width auto
 * + max-height keeps aspect ratio but prevents the 500px PNG from
 * dominating the header. */
.lwp-site-header-logo .custom-logo,
.lwp-site-header-logo .custom-logo-link img,
.lwp-site-header-logo img {
	max-height: 44px;
	width: auto;
	height: auto;
	display: block;
}
.lwp-site-header-logo .custom-logo-link { display: inline-flex; align-items: center; line-height: 1; }

/* Text wordmark fallback (no custom logo uploaded) — matches the
 * Tapadum-Gold reference: serif italic accent letter + small red dot
 * suffix. Renders as `Tapad<em>u</em>m●` with the accent in gold.
 *
 * Operator overrides the italic letter via Customizer → Brand →
 * "Wordmark accent letter" (defaults to 'u'). The dot is purely
 * decorative (a sale/red color punctuation that became part of the
 * brand identity in the reference) and can be hidden with a
 * `.lwp-site-header-logo--no-dot` modifier class if a future operator
 * wants a plainer mark. */
.lwp-wordmark {
	display: inline-flex;
	align-items: baseline;
	gap: 0;
	font-family: var(--serif, 'Playfair Display', Georgia, serif);
	font-size: 30px;
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1;
	color: var(--ink, #1b1c1c);
}
.lwp-wordmark__accent {
	color: var(--primary, #735c00);
	font-style: italic;
	font-weight: 500;
	font-style: italic; /* explicit even though em defaults to italic */
}
.lwp-site-header-logo--text .lwp-wordmark::after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sale, #a33b3e);
	margin-left: 6px;
	align-self: center;
	flex-shrink: 0;
}
.lwp-site-header-logo--text { text-decoration: none; }
.lwp-site-header-logo--text:hover .lwp-wordmark__accent { color: var(--primary-hover, #574500); }
@media (max-width: 600px) {
	.lwp-wordmark { font-size: 24px; }
}
.lwp-site-header-actions { display: flex; gap: 12px; align-items: center; }
.lwp-icon-btn {
	width: 38px; height: 38px;
	border-radius: 50%;
	border: 1px solid var(--line, #e8e2d3);
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ink, #1b1c1c);
	text-decoration: none;
	font-size: 14px;
	position: relative;
}
.lwp-icon-btn:hover { border-color: var(--primary, #735c00); color: var(--primary, #735c00); }
.lwp-cart-badge {
	position: absolute;
	top: -4px; right: -4px;
	background: var(--sale, #a33b3e);
	color: #fff;
	font-size: 10px;
	width: 18px; height: 18px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-weight: 600;
}

/* Megabar */
.lwp-megabar {
	background: #fff;
	border-bottom: 1px solid var(--line, #e8e2d3);
	font-size: 13px;
}
.lwp-megabar-inner {
	max-width: var(--content-w, 1372px);
	margin: 0 auto;
	padding: 10px var(--gutter, 32px);
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.lwp-megabar a {
	color: var(--ink-soft, #4d4635);
	text-decoration: none;
	letter-spacing: .02em;
	white-space: nowrap;
}
.lwp-megabar a:hover { color: var(--primary, #735c00); }
.lwp-megabar-sep { color: var(--line, #e8e2d3); }

/* Site footer */
.lwp-site-footer {
	background: var(--black, #0c0c0c);
	color: #aaa;
	margin-top: 0;
}
/* html bg locked to footer-black so any leak above topbar or below
 * footer on short pages reads as the footer band, not a cream flash.
 * Body keeps the cream page bg so content styling is unaffected.
 * (1.7.34+ — was margin-top: 96px which stacked on the last Elementor
 * section's bottom padding and produced a ~150-200px cream band
 * above the footer on the homepage.) */
html {
	background-color: var(--black, #0c0c0c);
}

/* WooCommerce PhotoSwipe closed-state. The vanilla PDP gallery
 * (inc/wc-pdp-gallery-override.php) dequeues `photoswipe-default-skin`,
 * which is where WC's `.pswp { display:none }` closed-state rule lived —
 * so the still-printed `.pswp` lightbox container (theme keeps
 * `wc-product-gallery-lightbox` support for the Elementor wc-gallery
 * widget) rendered as a ~50px empty block below the footer, leaking the
 * cream body background. Restore the closed state here; PhotoSwipe's JS
 * sets inline `display:block` when the lightbox opens, so it still works
 * wherever the Elementor gallery widget genuinely uses it. */
.pswp {
	display: none;
}
.lwp-site-footer-inner {
	max-width: var(--content-w, 1372px);
	margin: 0 auto;
	padding: 64px var(--gutter, 32px) 32px;
	display: grid;
	/* 4-col layout: logo+blurb / Customer Care / Explore / Shop.
	 * Atelier column removed in 1.7.10 (was email-only — redundant with
	 * chat widget + drawer contact channels). */
	grid-template-columns: 1.5fr repeat(3, 1fr);
	gap: 36px;
}
.lwp-site-footer-shop ul a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}
.lwp-site-footer-col-count {
	font-family: var(--mono, 'JetBrains Mono', monospace);
	font-size: 10.5px;
	color: #6c5f48;
	letter-spacing: .04em;
	background: rgba(255,255,255,.04);
	padding: 1px 7px;
	border-radius: 999px;
}
.lwp-site-footer-col-allink {
	margin-top: 8px;
	font-family: var(--mono, 'JetBrains Mono', monospace);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--primary-light, #D4AF37) !important;
}
.lwp-site-footer-col h4 {
	font-family: var(--mono, 'JetBrains Mono', monospace);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--icon-red, #d83131);
	font-weight: 600;
	margin-bottom: 16px;
}
.lwp-site-footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.lwp-site-footer-col a, .lwp-site-footer-col li {
	color: #bbb;
	text-decoration: none;
	font-size: 13.5px;
}
.lwp-site-footer-col a:hover { color: var(--primary-light, #D4AF37); }

.lwp-site-footer-logo {
	display: inline-block;
	color: #fff;
	text-decoration: none;
	margin-bottom: 14px;
	line-height: 1;
}
/* When logo is uploaded via Site Identity (Customizer), render the
   image and force-white via filter — most logos are dark-on-light by
   default; this matches the deep-black footer band. 1.7.5+. */
.lwp-site-footer-logo__img {
	display: block;
	max-height: 36px;
	width: auto;
	filter: brightness(0) invert(1);
	opacity: .9;
}
/* Fallback: text logo when no Site Identity logo is uploaded. */
.lwp-site-footer-logo__text {
	font-family: var(--serif, 'Playfair Display', Georgia, serif);
	font-size: 32px;
	font-weight: 500;
	color: #fff;
}
.lwp-site-footer-blurb {
	font-size: 13.5px;
	line-height: 1.6;
	color: #999;
	margin: 0 0 18px;
	max-width: 36ch;
}
.lwp-site-footer-social { display: flex; gap: 10px; flex-wrap: wrap; }
/* When the social row sits inside the brand column (under the logo +
 * blurb), give it breathing room. The bottom-strip placement keeps
 * gap: 0 because the strip's own padding handles spacing. */
.lwp-site-footer-brand .lwp-site-footer-social { margin-top: 18px; }
.lwp-site-footer-social a {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 1px solid #333;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #aaa;
	text-decoration: none;
}
.lwp-site-footer-social a:hover {
	border-color: var(--primary-light, #D4AF37);
	color: var(--primary-light, #D4AF37);
}
.lwp-site-footer-bottom {
	border-top: 1px solid #2a2520;
	padding: 22px var(--gutter, 32px);
	max-width: var(--content-w, 1372px);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--mono, monospace);
	font-size: 11px;
	letter-spacing: .12em;
	color: #666;
	flex-wrap: wrap;
	gap: 14px;
}
/* Bottom bar (1.7.5 minimal) — left (©), right (social icons).
   Byline + payment row default OFF. When operator opts back in via
   Customizer, byline takes the middle, payments slot to the far right. */
.lwp-site-footer-bottom__copy { flex: 0 0 auto; }
.lwp-site-footer-bottom__byline {
	flex: 1 1 auto;
	text-align: center;
	color: #888;
	letter-spacing: .14em;
}
/* Social icons in bottom strip — quieter than brand-column placement.
   The .lwp-site-footer-social rule above handles per-icon styling; we
   only need to right-align the row here. */
.lwp-site-footer-bottom .lwp-site-footer-social {
	margin-left: auto;
	flex: 0 0 auto;
}
.lwp-site-footer-bottom .lwp-site-footer-payments {
	margin: 0;
	flex: 0 0 auto;
	justify-content: flex-end;
	gap: 8px;
}
.lwp-site-footer-bottom .lwp-site-footer-payments li {
	font-size: 11.5px;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .58);
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .06);
	padding: 5px 12px;
	border-radius: 6px;
	white-space: nowrap;
}
.lwp-site-footer-atelier ul { gap: 6px; }
.lwp-site-footer-atelier a { color: #ddd; }

@media (max-width: 900px) {
	.lwp-site-footer-bottom {
		flex-direction: column;
		text-align: center;
	}
	.lwp-site-footer-bottom__byline { text-align: center; }
	.lwp-site-footer-bottom .lwp-site-footer-payments { justify-content: center; }
	.lwp-site-footer-bottom .lwp-site-footer-social {
		margin: 0 auto;
		justify-content: center;
	}
}

@media (max-width: 1100px) {
	.lwp-site-footer-inner,
	.lwp-site-footer-inner:has(.lwp-site-footer-shop) {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 36px;
	}
}
@media (max-width: 820px) {
	.lwp-site-footer-inner,
	.lwp-site-footer-inner:has(.lwp-site-footer-shop) {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 680px) {
	.lwp-site-footer-inner { grid-template-columns: 1fr; }
	.lwp-site-header-inner { gap: 18px; padding: 14px 18px; }
	.lwp-mm-top { display: none; }
	.lwp-topbar-l span:first-child { display: none; }
}

/* ─────────────────────────────────────────────────────────────────── */
/* WooCommerce shop archive wrapper                                    */
/* ─────────────────────────────────────────────────────────────────── */

.lwp-shop-main {
	padding: 48px 0 80px;
	background: var(--bg, #fcf9f8);
}
.lwp-shop-container {
	max-width: var(--content-w, 1372px);
	margin: 0 auto;
	padding: 0 var(--gutter, 32px);
}

/* Page heading + result count + sort dropdown (WC native) */
.woocommerce-products-header__title {
	font-family: var(--serif, 'Playfair Display', Georgia, serif);
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 500;
	letter-spacing: -.02em;
	margin-bottom: 24px;
	color: var(--ink, #1b1c1c);
}
.woocommerce-result-count {
	font-family: var(--mono, monospace);
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--muted, #7f7663);
	text-transform: uppercase;
}
.woocommerce-ordering select {
	border: 1px solid var(--line, #e8e2d3);
	border-radius: 6px;
	padding: 8px 14px;
	font-family: var(--sans, 'Inter', sans-serif);
	background: #fff;
	color: var(--ink, #1b1c1c);
}

/* Product grid — force 4-col on desktop, override WC defaults */
.lwp-shop-container ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px !important;
	list-style: none;
	margin: 32px 0 0 !important;
	padding: 0 !important;
}
.lwp-shop-container ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 14px !important;
	background: #fff;
	border-radius: 10px;
	border: 1px solid var(--line, #e8e2d3);
	transition: transform .25s, box-shadow .25s;
}
.lwp-shop-container ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -22px rgba(115, 92, 0, .25);
	border-color: var(--primary-light, #D4AF37);
}
.lwp-shop-container ul.products li.product img,
.woocommerce-page ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 14px;
}
.lwp-shop-container ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--serif, 'Playfair Display', Georgia, serif);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--ink, #1b1c1c);
	padding: 0 !important;
	margin: 0 0 6px !important;
}
.lwp-shop-container ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
	font-family: var(--serif, 'Playfair Display', Georgia, serif);
	color: var(--primary, #735c00) !important;
	font-size: 18px !important;
	font-weight: 500 !important;
}
.lwp-shop-container ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
	color: var(--muted, #7f7663) !important;
	font-family: var(--sans, 'Inter', sans-serif);
	font-size: 13px !important;
	margin-right: 8px;
}
.lwp-shop-container ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
	margin-top: 10px;
	background: var(--ink, #1b1c1c) !important;
	color: #fff !important;
	font-family: var(--sans, 'Inter', sans-serif);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 10px 18px !important;
	transition: background .2s;
}
.lwp-shop-container ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover {
	background: var(--primary, #735c00) !important;
}

/* Sale flash badge — WC's `.onsale` */
.lwp-shop-container ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale {
	background: var(--sale, #a33b3e) !important;
	color: #fff !important;
	font-family: var(--mono, monospace);
	font-size: 10px;
	letter-spacing: .1em;
	border-radius: 3px !important;
	padding: 4px 10px !important;
	min-height: auto !important;
	min-width: auto !important;
	line-height: 1.4 !important;
	top: 18px !important;
	left: 18px !important;
	right: auto !important;
}

/* Pagination */
.lwp-shop-container .woocommerce-pagination ul.page-numbers {
	display: flex;
	gap: 8px;
	justify-content: center;
	list-style: none;
	margin: 48px 0 0;
	padding: 0;
	border: 0;
}
.lwp-shop-container .woocommerce-pagination .page-numbers {
	border: 1px solid var(--line, #e8e2d3);
	border-radius: 6px;
	padding: 8px 14px;
	font-family: var(--mono, monospace);
	color: var(--ink-soft, #4d4635);
	text-decoration: none;
}
.lwp-shop-container .woocommerce-pagination .page-numbers.current {
	background: var(--ink, #1b1c1c);
	color: #fff;
	border-color: var(--ink, #1b1c1c);
}

/* Responsive */
@media (max-width: 1100px) {
	.lwp-shop-container ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
	.lwp-shop-container ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
}
@media (max-width: 460px) {
	.lwp-shop-container ul.products,
	.woocommerce-page ul.products { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────────────────────────── */
/* Page chrome (used by WC archive / single-product / my-account /     */
/* generic page templates). Mirrors the reference design tokens —      */
/* breadcrumb + page-title + lead + 260px sidebar grid.                */
/* ─────────────────────────────────────────────────────────────────── */

.lwp-page {
	padding: 64px 0 96px;
	background: var(--bg, #fcf9f8);
}
.lwp-page-container {
	max-width: var(--content-w, 1372px);
	margin: 0 auto;
	padding: 0 var(--gutter, 32px);
}
.lwp-crumb {
	font-family: var(--mono, 'JetBrains Mono', monospace);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted, #7f7663);
	margin-bottom: 32px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.lwp-crumb a { color: var(--muted, #7f7663); text-decoration: none; }
.lwp-crumb a:hover { color: var(--primary, #735c00); }
.lwp-crumb .sep { color: var(--line, #e8e2d3); }
.lwp-crumb .current { color: var(--ink, #1b1c1c); }
.lwp-page-title {
	font-family: var(--serif, 'Playfair Display', Georgia, serif);
	font-weight: 500;
	font-size: clamp(40px, 5vw, 72px);
	line-height: 1.04;
	letter-spacing: -.025em;
	margin: 8px 0 0;
	text-wrap: balance;
}
.lwp-page-title em { font-style: italic; color: var(--primary, #735c00); }
.lwp-page-lead {
	font-size: 17px;
	color: var(--ink-soft, #4d4635);
	max-width: 62ch;
	line-height: 1.65;
	margin-top: 24px;
	text-wrap: pretty;
}

/* Two-column shop archive: filter sidebar + results */
.lwp-shop-grid-wrap {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 48px;
	margin-top: 48px;
	align-items: start;
}
.lwp-shop-sidebar {
	position: sticky;
	top: 120px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.lwp-filter-block h5 {
	font-family: var(--mono, monospace);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink, #1b1c1c);
	margin: 0 0 14px;
	font-weight: 600;
	border-bottom: 1px solid var(--line, #e8e2d3);
	padding-bottom: 10px;
}
.lwp-filter-block label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	font-size: 13.5px;
	color: var(--ink-soft, #4d4635);
	cursor: pointer;
}
.lwp-filter-block label input { margin-right: 8px; accent-color: var(--primary, #735c00); }
.lwp-filter-block label span {
	font-family: var(--mono, monospace);
	font-size: 10.5px;
	color: var(--muted, #7f7663);
}
.lwp-shop-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--line, #e8e2d3);
	padding-bottom: 16px;
	margin-bottom: 32px;
	font-size: 13px;
	color: var(--ink-soft, #4d4635);
	flex-wrap: wrap;
	gap: 12px;
}
.lwp-shop-toolbar strong { color: var(--ink, #1b1c1c); font-weight: 600; }
.lwp-shop-toolbar select {
	padding: 8px 14px;
	border: 1px solid var(--line, #e8e2d3);
	border-radius: 6px;
	background: #fff;
	font-size: 13px;
	color: var(--ink, #1b1c1c);
	font-family: var(--sans, 'Inter', sans-serif);
}

@media (max-width: 900px) {
	.lwp-shop-grid-wrap { grid-template-columns: 1fr; gap: 32px; }
	.lwp-shop-sidebar { position: static; }
}

/* ─────────────────────────────────────────────────────────────────── */
/* Single-product page (PDP) chrome                                     */
/* ─────────────────────────────────────────────────────────────────── */

.lwp-pdp { padding: 48px 0 96px; background: var(--bg, #fcf9f8); }
.lwp-pdp-container {
	max-width: var(--content-w, 1372px);
	margin: 0 auto;
	padding: 0 var(--gutter, 32px);
}
/* PDP layout: the actual 2-col grid lives on `<div class="product">`
 * (WC's wrapper), NOT on `.lwp-pdp-grid`. Earlier versions used
 * `display: contents` on `.product` to hoist its children up to the
 * outer grid; that worked for layout but broke `position: sticky` on
 * the gallery — Chromium's containing-block resolution falls back to
 * the document root for sticky descendants of a `display: contents`
 * grid parent, so the gallery would bleed sticky across the whole
 * grid (or vanish mid-scroll when force-released by JS). Making
 * `.product` the actual grid restores the gallery's grid area as its
 * sticky containing block — the pin naturally releases at the end of
 * row 2 (tabs end), exactly where row 3 (related) begins. */
.lwp-pdp-grid {
	margin-top: 32px;
}
.lwp-pdp-grid > .product {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	grid-template-rows: auto auto auto;
	grid-template-areas:
		"gallery summary"
		"gallery tabs"
		"related related";
	/* Row-gap is 0 -- spacing between rows is controlled by explicit
	 * margins so we can tighten summary->tabs while keeping gallery->
	 * related wide. 64px column gap stays. */
	gap: 0 64px;
	align-items: start;
	/* Containing block for WC's `<span class="onsale">` which is
	 * absolutely positioned at top:12 left:12. Without this `.onsale`
	 * climbs up to the body and lands in the topbar zone. */
	position: relative;
}
/* Gallery LEFT — sticky so it stays pinned while the operator scrolls
 * through summary + tabs on the right. Spans both grid rows in col 1
 * so the sticky behaviour has a tall track to anchor against.
 *
 * As of 1.7.10 (override path) we render our own `.lwp-gallery` instead
 * of WC's `.woocommerce-product-gallery` — vanilla JS, no Flexslider,
 * immune to LiteSpeed JS Defer. The legacy `.woocommerce-product-gallery`
 * selector remains for any fallback render path or WC plugin compat.
 */
/* Sticky column wrapper — owns the grid-area: gallery placement (rows
 * 1-2 span). Sticky containing block is this wrapper, NOT `.product`.
 * That's the trick: when row 2 (tabs) ends, the wrapper ends, sticky
 * releases, related products on row 3 start clean full-width. */
.lwp-pdp-grid .lwp-pdp-sticky-col {
	grid-area: gallery;
	position: relative;
	align-self: stretch;
	height: 100%;
}
/* Gallery element itself sticks inside the wrapper. */
.lwp-pdp-grid .lwp-pdp-sticky-col .lwp-gallery,
.lwp-pdp-grid .woocommerce-product-gallery {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	position: sticky !important;
	top: 100px !important;
	max-height: calc(100vh - 120px);
}
/* Legacy fallback path — when WC default gallery is rendered without
 * the sticky-col wrapper (some plugin compat scenarios), keep the old
 * grid-area placement so layout doesn't collapse. */
.lwp-pdp-grid > .product > .woocommerce-product-gallery {
	grid-area: gallery;
	align-self: start;
}

/* ===== Vanilla PDP gallery (1.7.10 override) =====
 * Minimal flex layout: thumb strip LEFT (fixed 80px), main viewer RIGHT
 * (fills remaining space). No grid, no row overlap.
 */
.lwp-gallery {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	/* Sticky parent verir viewport sınırını; çocuk flex sabit
	 * kolonu (80px thumbs) + esnek (1fr main) zarar görmez. */
	max-height: 100%;
}
.lwp-gallery--single {
	display: block;
}
.lwp-gallery__thumbs {
	flex: 0 0 72px;
	width: 72px;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	overflow-x: hidden;
	/* Hide native scrollbar — products with 8-10+ thumbs were rendering a
	 * visible thin scrollbar that drew attention away from the gallery.
	 * The container still scrolls (mouse wheel + touch), the UI is just
	 * cleaner. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.lwp-gallery__thumbs::-webkit-scrollbar { display: none; width: 0; }
.lwp-gallery__thumb {
	display: block;
	margin: 0;
	padding: 0;
}
.lwp-gallery__thumb button {
	display: block;
	width: 72px;
	height: 72px;
	padding: 4px;
	margin: 0;
	background: #fff;
	border: 2px solid var(--line, #e8e2d3);
	border-radius: 6px;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 160ms ease;
}
.lwp-gallery__thumb button:hover {
	border-color: var(--primary-light, #D4AF37);
}
.lwp-gallery__thumb.is-active button {
	border-color: var(--primary, #735c00);
}
.lwp-gallery__thumb button img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.lwp-gallery__main {
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
	background: #fff;
	border: 1px solid var(--line, #e8e2d3);
	border-radius: var(--radius-card, 8px);
	aspect-ratio: 1 / 1;
	max-height: calc(100vh - 120px);
	overflow: hidden;
}
.lwp-gallery__slide {
	position: absolute;
	inset: 0;
	display: none;
	background: #fff;
	text-decoration: none;
}
.lwp-gallery__slide.is-active {
	display: block;
}
.lwp-gallery__slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}
.lwp-gallery:focus { outline: none; }
.lwp-gallery:focus-visible {
	outline: 2px solid var(--primary, #735c00);
	outline-offset: 4px;
	border-radius: var(--radius-card, 8px);
}
/* Summary (title + price + add-to-cart + meta) sits in col 2 row 1,
 * tabs (Description / Additional Information / Reviews) sit in col 2
 * row 2 directly below. This keeps the buy column tight at top and
 * gives the long-form copy the same right-hand reading column. */
.lwp-pdp-grid .summary {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	grid-area: summary;
}
.lwp-pdp-grid .woocommerce-tabs {
	grid-area: tabs;
	/* 16px clean-cut spacing between SKU / Categories meta block (last
	 * thing inside summary) and the Description / Additional-info tabs
	 * row. Replaces the older 56px row-gap which made the transition
	 * feel disconnected. No top border. */
	margin: 16px 0 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border-top: 0 !important;
}
.lwp-pdp-grid .woocommerce-tabs ul.tabs {
	margin: 0 0 24px !important;
	padding: 0 !important;
	border-bottom: 1px solid var(--line, #e8e2d3) !important;
	list-style: none;
}
/* Related / up-sells / reviews-as-block fall below the grid as a
 * full-width landing. Tighten the top margin so the seam between
 * the tabs (description body) and the related rail doesn't span
 * the whole viewport. */
.lwp-pdp-grid .related,
.lwp-pdp-grid .upsells,
.lwp-pdp-grid > .related,
.lwp-pdp-grid > .upsells {
	grid-area: related;
	/* 96px top margin + 32px top padding + hairline border. The
	 * earlier 144px buffer existed because the thumb strip sat under
	 * the main image; v1.7.19 moved thumbs to an overlay capsule on
	 * top of the image, so the gallery is now compact. 96px is the
	 * operator-tuned sweet spot for a clean section break. */
	margin-top: 96px !important;
	padding-top: 32px !important;
	border-top: 1px solid var(--line, #e8e2d3);
	clear: none;
}
.lwp-pdp-grid .related > h2,
.lwp-pdp-grid .upsells > h2 {
	margin-top: 0 !important;
	margin-bottom: 32px !important;
}
.lwp-pdp-grid .product_title {
	font-family: var(--serif, 'Playfair Display', Georgia, serif);
	font-weight: 500;
	font-size: clamp(32px, 3.4vw, 48px);
	line-height: 1.05;
	letter-spacing: -.02em;
	margin-bottom: 18px;
}
.lwp-pdp-grid .price {
	font-family: var(--serif, 'Playfair Display', Georgia, serif);
	font-size: 28px;
	color: var(--primary, #735c00);
	margin-bottom: 24px;
	display: flex;
	align-items: baseline;
	gap: 12px;
}
.lwp-pdp-grid .price del {
	font-size: 18px;
	color: var(--muted, #7f7663);
	font-family: var(--sans, 'Inter', sans-serif);
}
.lwp-pdp-grid .woocommerce-product-details__short-description {
	color: var(--ink-soft, #4d4635);
	line-height: 1.65;
	margin-bottom: 28px;
}
.lwp-pdp-grid .single_add_to_cart_button {
	background: linear-gradient(135deg, var(--primary, #735c00), var(--primary-light, #D4AF37)) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 16px 28px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	font-family: var(--sans, 'Inter', sans-serif) !important;
	box-shadow: 0 10px 30px -10px rgba(115, 92, 0, .4);
	transition: box-shadow .2s, transform .2s;
}
.lwp-pdp-grid .single_add_to_cart_button:hover {
	box-shadow: 0 12px 36px -8px rgba(115, 92, 0, .55);
	transform: translateY(-1px);
}
.lwp-pdp-grid .quantity input[type="number"] {
	border: 1px solid var(--line, #e8e2d3);
	border-radius: 6px;
	padding: 12px 10px;
	font-family: var(--sans, 'Inter', sans-serif);
}
.lwp-pdp .product_meta {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--line, #e8e2d3);
	font-family: var(--mono, monospace);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted, #7f7663);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* SKU + categories rendered as pill rows. Each `.sku_wrapper` /
 * `.posted_in` becomes a flex row with the label as a quiet caption
 * and every value (SKU number or category link) as a pill chip. */
.lwp-pdp .product_meta .sku_wrapper,
.lwp-pdp .product_meta .posted_in,
.lwp-pdp .product_meta .tagged_as {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.lwp-pdp .product_meta .sku_wrapper::before { content: ''; }
.lwp-pdp .product_meta .sku,
.lwp-pdp .product_meta .posted_in a,
.lwp-pdp .product_meta .tagged_as a {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border: 1px solid var(--line, #e8e2d3);
	border-radius: var(--radius-pill, 999px);
	background: var(--bg, #fcf9f8);
	color: var(--ink-soft, #4d4635);
	font-family: var(--sans, 'Inter', sans-serif);
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: none;
	text-decoration: none;
	line-height: 1;
	transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.lwp-pdp .product_meta .posted_in a:hover,
.lwp-pdp .product_meta .tagged_as a:hover {
	border-color: var(--primary, #735c00);
	color: var(--primary, #735c00);
	background: #fff;
}
.lwp-pdp .product_meta .sku { color: var(--primary, #735c00); font-weight: 500; }
/* The "Categories:" / "Tags:" / "SKU:" label that ships as plain text
 * stays inline as a muted caption; the pills sit after it. WC ships
 * comma separators inside `.posted_in` text — hide them so each link
 * stands alone as a pill. */
.lwp-pdp .product_meta .posted_in,
.lwp-pdp .product_meta .tagged_as {
	color: var(--muted, #7f7663);
}
.lwp-pdp .product_meta .posted_in a + a,
.lwp-pdp .product_meta .tagged_as a + a { margin-left: 0; }
.lwp-pdp .woocommerce-tabs {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--line, #e8e2d3);
}
.lwp-pdp .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 32px;
	list-style: none;
	padding: 0 !important;
	margin: 0 0 32px !important;
	border-bottom: 1px solid var(--line, #e8e2d3);
}
.lwp-pdp .woocommerce-tabs ul.tabs::before,
.lwp-pdp .woocommerce-tabs ul.tabs::after { display: none !important; }
.lwp-pdp .woocommerce-tabs ul.tabs li {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
}
.lwp-pdp .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 12px 0 16px !important;
	font-family: var(--mono, monospace) !important;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-soft, #4d4635) !important;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	font-weight: 500 !important;
}
.lwp-pdp .woocommerce-tabs ul.tabs li.active a {
	color: var(--primary, #735c00) !important;
	border-bottom-color: var(--primary, #735c00);
}

@media (max-width: 900px) {
	.lwp-pdp-grid { grid-template-columns: 1fr; gap: 32px; }
	.lwp-pdp-grid .woocommerce-product-gallery,
	.lwp-pdp-grid .summary { grid-column: 1; }
}

/* Sibling content (related-products, upsells) lives as extra siblings
 * inside .product. With display:contents on .product they also become
 * grid items — span them across both columns so they don't squeeze
 * into one. Tabs are intentionally NOT in this list because the new
 * layout keeps them in column 2 directly under the summary. */
.lwp-pdp-grid .related,
.lwp-pdp-grid .upsells,
.lwp-pdp-grid > .product > .related,
.lwp-pdp-grid > .product > .upsells,
.lwp-pdp-grid .product > .clear,
.lwp-pdp-grid .product > nav { grid-column: 1 / -1; }

/* On viewports where the 2-col grid collapses to single column, the
 * sticky gallery + spanned summary need to revert to natural flow:
 * gallery first (no sticky on mobile, image gets in the way), summary
 * below it, then tabs, then related. */
@media (max-width: 900px) {
	.lwp-pdp-grid > .product {
		grid-template-columns: 1fr;
		grid-template-areas:
			"gallery"
			"summary"
			"tabs"
			"related";
		gap: 32px;
	}
	.lwp-pdp-grid .lwp-pdp-sticky-col {
		position: static;
		height: auto;
	}
	.lwp-pdp-grid .lwp-gallery,
	.lwp-pdp-grid .woocommerce-product-gallery {
		position: static !important;
		top: auto !important;
		max-height: none;
	}
	/* Vanilla gallery on mobile — main image on TOP (explicit order: 1),
	 * thumbs strip below it horizontal-scrollable. `.lwp-gallery__main`
	 * needs explicit width + min-height because its children are
	 * `position: absolute` and `aspect-ratio` alone is unreliable in
	 * flex column with `flex: 1 1 auto` (operator-reported regression
	 * 2026-05-12 — main collapsed to 0 height). */
	.lwp-gallery {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.lwp-gallery__main {
		order: 1;
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
		aspect-ratio: 1 / 1;
		max-height: none;
		height: auto;
		min-height: 280px;
	}
	.lwp-gallery__thumbs {
		order: 2;
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		max-height: none;
		gap: 6px;
		padding-bottom: 4px;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	/* 1.7.25 — Hide native scrollbar on mobile thumbnails. With 5-6 thumbs
	 * the strip ends up 1-5px wider than its container (sub-pixel rounding
	 * + gaps), which used to render a permanent thin scrollbar even though
	 * scrolling was unnecessary. Keep overflow-x:auto so 8+-thumb products
	 * still get touch-scroll, but don't draw a scrollbar UI for it. */
	.lwp-gallery__thumbs::-webkit-scrollbar { display: none; height: 0; }
	.lwp-gallery__thumb {
		flex: 1 1 0;
		min-width: 0;
		max-width: 72px;
	}
	.lwp-gallery__thumb button {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

/* Desktop: pin a minimum height on the main viewer too, defensively. */
@media (min-width: 768px) {
	.lwp-gallery__main {
		min-height: 360px;
	}
}

/* FAQ accordion inside the WC tab panel (registered as third tab by
 * `LuwiPress_AI_Content::register_faq_tab`). Re-skinned from the
 * legacy inline-styled accordion that used to live below the tabs. */
.lwp-pdp .woocommerce-tabs .luwipress-faq {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}
.lwp-pdp .luwipress-faq__item {
	border: 1px solid var(--line, #e8e2d3);
	border-radius: var(--radius-card, 8px);
	background: #fff;
	padding: 16px 18px;
	transition: border-color 200ms ease, background 200ms ease;
}
.lwp-pdp .luwipress-faq__item[open] {
	border-color: var(--primary-light, #D4AF37);
	background: var(--bg, #fcf9f8);
}
.lwp-pdp .luwipress-faq__q {
	cursor: pointer;
	font-family: var(--serif, 'Playfair Display', Georgia, serif);
	font-size: 16px;
	font-weight: 500;
	color: var(--ink, #1b1c1c);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.lwp-pdp .luwipress-faq__q::-webkit-details-marker { display: none; }
.lwp-pdp .luwipress-faq__q::after {
	content: '+';
	font-size: 20px;
	color: var(--primary, #735c00);
	transition: transform 200ms ease;
	flex-shrink: 0;
}
.lwp-pdp .luwipress-faq__item[open] .luwipress-faq__q::after {
	content: '−';
}
.lwp-pdp .luwipress-faq__a {
	margin-top: 12px;
	color: var(--ink-soft, #4d4635);
	line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────────── */
/* My-account                                                           */
/* ─────────────────────────────────────────────────────────────────── */

.lwp-acct-grid {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 48px;
	margin-top: 48px;
	align-items: start;
}
.lwp-acct-side {
	position: sticky;
	top: 120px;
	background: #fff;
	border: 1px solid var(--line, #e8e2d3);
	border-radius: 8px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.lwp-acct-who {
	padding: 8px 0 18px;
	border-bottom: 1px solid var(--line, #e8e2d3);
	margin-bottom: 12px;
}
.lwp-acct-who .nm {
	font-family: var(--serif, 'Playfair Display', Georgia, serif);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -.01em;
	display: block;
}
.lwp-acct-who .em {
	font-size: 12px;
	color: var(--muted, #7f7663);
	font-family: var(--mono, monospace);
	letter-spacing: .04em;
	margin-top: 4px;
	display: block;
}
/* Override WC's default my-account nav to match the design */
.lwp-acct-side ul.woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.woocommerce-MyAccount-navigation li { margin: 0 !important; }
.woocommerce-MyAccount-navigation li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 11px 12px !important;
	text-decoration: none !important;
	color: var(--ink-soft, #4d4635);
	font-size: 14px;
	border-radius: 6px;
	border-left: 2px solid transparent;
	transition: background .15s, color .15s;
}
.woocommerce-MyAccount-navigation li a:hover {
	background: var(--bg-alt, #f6f3f2);
	color: var(--ink, #1b1c1c);
}
.woocommerce-MyAccount-navigation li.is-active a {
	background: #fdfaef;
	color: var(--primary, #735c00);
	border-left-color: var(--primary, #735c00);
	font-weight: 600;
}
.woocommerce-MyAccount-navigation li--customer-logout a { color: var(--sale, #a33b3e) !important; }

.lwp-acct-main h2,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-family: var(--serif, 'Playfair Display', Georgia, serif);
	font-size: 28px;
	font-weight: 500;
	letter-spacing: -.02em;
	margin-bottom: 18px;
}
.lwp-acct-card,
.woocommerce-MyAccount-content > p:first-of-type {
	background: #fff;
	border: 1px solid var(--line, #e8e2d3);
	border-radius: 8px;
	padding: 28px;
	margin-bottom: 24px;
}

/* Account orders / addresses tables */
.woocommerce-orders-table,
.shop_table {
	width: 100% !important;
	border-collapse: collapse !important;
	font-size: 14px;
}
.woocommerce-orders-table th,
.shop_table th {
	text-align: left;
	font-family: var(--mono, monospace);
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted, #7f7663);
	padding: 12px !important;
	border-bottom: 1px solid var(--line, #e8e2d3);
	font-weight: 500;
	background: transparent !important;
}
.woocommerce-orders-table td,
.shop_table td {
	padding: 16px 12px !important;
	border-bottom: 1px solid var(--line-light, #f0ebe0);
	color: var(--ink-soft, #4d4635);
	vertical-align: middle;
	background: transparent !important;
}

@media (max-width: 900px) {
	.lwp-acct-grid { grid-template-columns: 1fr; gap: 32px; }
	.lwp-acct-side { position: static; }
}

/* 1.7.24 — PDP bottom-of-page whitespace cleanup. .lwp-pdp had
 * padding-bottom:96px and .lwp-site-footer margin-top:96px which on
 * mobile stacked into a ~192px empty cream-colored band between the
 * perks list and the dark footer. Tighten both on mobile so the
 * footer follows the content naturally. Desktop layout unaffected.
 *
 * NOTE: selector must out-specify the legacy Kit CSS layer rule
 *   body.single-product main { padding-bottom: 96px } @max-width:767px
 * which was pushed during an earlier sprint to compensate for a sticky
 * bar that no longer needs it. Using body.single-product main.lwp-pdp
 * (0,1,2) beats body.single-product main (0,1,1). */
@media (max-width: 900px) {
	body.single-product main.lwp-pdp { padding-bottom: 32px; }
	.lwp-site-footer { margin-top: 32px; }
}

/* ─── Product Grid (lwp-product-grid) mobile/tablet containment ─────────────
 * widgets.css carries the full grid rules, but on Elementor pages where the
 * widget was inserted without registering its style dependency (e.g. added via
 * the REST/MCP page builder), widgets.css is NOT enqueued — so the list falls
 * back to a per-instance ~500px single-column layout that overflows the viewport
 * on phones. tokens.css is always loaded, so these rules guarantee the grid
 * stays contained + responsive there regardless. Column counts use !important to
 * beat the per-instance Elementor "Columns" CSS on small screens; desktop is
 * left untouched (the Columns control still governs it). */
@media (max-width: 1024px) {
	html body ul.products.lwp-product-grid__list {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		gap: 20px !important;
	}
	html body ul.products.lwp-product-grid__list > li.product {
		width: auto !important;
		max-width: 100% !important;
		margin: 0 !important;
		min-width: 0 !important;
		float: none !important;
	}
}
@media (max-width: 680px) {
	html body ul.products.lwp-product-grid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 14px !important;
	}
}
/* Product-grid card title + price horizontal inset. The product-grid widget
 * renders the title + price directly inside `.lwp-pcard-link` — it does NOT
 * use the padded `.lwp-pcard-meta` wrapper that the standalone product-card
 * widget does, so the text sat flush against the card edge (while the Add-to-cart
 * button keeps its own 16px margin). Inset them to align with the button. Lives
 * in tokens.css (always loaded) since widgets.css may not be enqueued here. */
.lwp-product-grid__list .lwp-pcard-title,
.lwp-product-grid__list .lwp-pcard-price {
	padding-left: 16px !important;
	padding-right: 16px !important;
}

/* Mobile card-grid side-gutter reclaim. The homepage Elementor sections keep a
 * 32px desktop side padding at every breakpoint, so on a ~390px phone the card
 * grids lost 64px (~16%) to side gutters — cards were cramped (the Add-to-cart
 * label even truncated) and the outer gutters dwarfed the 14px inter-card gap.
 * Reclaim half the gutter (→16px each side, balanced with the gap) so cards get
 * meaningfully wider. Bounded at -16px → never exceeds the section's 32px
 * padding, so no horizontal overflow. Scoped to the boxed card grids only —
 * NOT the category grid, whose tiles are intentionally full-bleed (0 padding),
 * where a negative margin WOULD overflow. */
@media (max-width: 680px) {
	.lwp-product-grid,
	.lwp-mgrid,
	.lwp-editorial-grid {
		margin-left: -16px !important;
		margin-right: -16px !important;
	}
}