/* LUXE: warm, soft, serif premium identity (the approved themes.webift.com/luxe reference). Mobile-first.
   Colours arrive as CSS variables from the adapter (theme palette + merchant brand colours); fonts from index.html. */
:root {
  --gutter: 20px; --max: 1240px; --radius: 999px; --chip-radius: 999px; --ratio: 4/5; --pdp-ratio: 1/1.1; --btn-track: .06em;
  --h1: 500 clamp(2.5rem, 11vw, 4rem)/1.02 var(--font-display), Georgia, serif;
  --h2: 500 clamp(2rem, 8vw, 3rem)/1.05 var(--font-display), Georgia, serif;
  --h3: 600 1.5rem/1.15 var(--font-display), Georgia, serif;
  --grid-gap: 28px 12px;
  --gold: var(--clay, #a8814d);
}
body { font-weight: 400; }
h1, h2, h3 { font-family: var(--font-display), Georgia, serif; font-weight: 500; letter-spacing: 0; }
.eyebrow { color: var(--gold); letter-spacing: .22em; font-size: .6875rem; font-weight: 500; }
.btn { font-weight: 500; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; min-height: 50px; padding: 0 30px; }
.btn.lg { font-size: .875rem; min-height: 54px; }
.card .quick { border-color: var(--line); text-transform: none; letter-spacing: .04em; font-size: .9375rem; min-height: 44px; }
.card .media { border-radius: 4px; }
.card-body { text-align: center; padding-top: 14px; }
.card-body h3 { font: 600 1.25rem/1.15 var(--font-display), Georgia, serif; }
.card-body .sub { font-size: .8125rem; }
.card .price { font-weight: 500; letter-spacing: .04em; }
.tag { background: var(--bg); color: var(--ink); border-radius: 999px; padding: 5px 10px; letter-spacing: .12em; font-weight: 500; left: 10px; top: 10px; }
.tag.inline { background: var(--surface); }
.wish { right: 6px; top: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hide-sm { display: none; }
@media (min-width: 720px) { .hide-sm { display: block; } }
.center { text-align: center; margin-top: 36px; }
.chip { font-size: .875rem; letter-spacing: .04em; }
.media { border-radius: 4px; }
.pdp-head h1 { font-size: clamp(2.25rem, 9vw, 3rem); }
.price.big { font-family: var(--font-body), sans-serif; font-weight: 500; font-size: 1.25rem; letter-spacing: .04em; }
.opt { border-radius: 999px; }
.qty, .sort select, #co input:not([type=radio]), #co select, .radio { border-radius: 14px; }
.qty { border-radius: 999px; }
.qty.lg { border-radius: 999px; }
.wish.static { border-radius: 50%; }
.summary { border-radius: 14px; }

/* header */
.lx-ticker { background: var(--accent); color: var(--bg); display: flex; justify-content: center; gap: 36px; min-height: 34px; align-items: center; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; padding: 0 var(--gutter); }
.lx-head { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 95%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.lx-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 60px; }
.lx-logo { font: 600 1.625rem/1 var(--font-display), Georgia, serif; letter-spacing: .22em; padding-left: .22em; }
.lx-logo.big { font-size: 2.25rem; text-align: center; }
.ibtn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.menu-btn { justify-self: start; margin-left: -10px; }
.lx-actions { justify-self: end; display: flex; margin-right: -10px; }
.badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: #fff; font-size: .6875rem; line-height: 18px; text-align: center; font-weight: 500; }
.lx-nav { display: none; }
@media (min-width: 900px) {
  .lx-bar { min-height: 84px; }
  .lx-logo { font-size: 2rem; }
  .menu-btn { display: none; }
  .lx-logo { grid-column: 2; } .lx-actions { grid-column: 3; }
  .lx-nav { display: block; border-top: 1px solid var(--line); }
  .lx-nav .wrap { display: flex; justify-content: center; gap: 44px; }
  .lx-nav a { font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase; padding: 14px 0 12px; border-bottom: 1px solid transparent; }
  .lx-nav a:hover, .lx-nav a[aria-current] { border-color: var(--ink); }
}
#mnav .mn-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 6px var(--gutter); min-height: 64px; border-bottom: 1px solid var(--line); }
#mnav .mn-links { display: grid; padding: 12px var(--gutter); flex: 1; align-content: start; }
#mnav .mn-links a { font: 500 2rem/1 var(--font-display), Georgia, serif; padding: 16px 0; border-bottom: 1px solid var(--line); min-height: 64px; display: flex; align-items: center; }
#mnav .mn-links a.sub { font: 400 1rem var(--font-body), sans-serif; color: var(--muted); min-height: 52px; letter-spacing: .04em; }
#mnav .mn-foot { display: flex; gap: 22px; padding: 16px var(--gutter) calc(20px + env(safe-area-inset-bottom)); font-weight: 500; }
#mnav .mn-foot a { min-height: 44px; display: flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; }

/* hero: arched photo, centred copy */
.lx-hero { display: grid; padding-top: 20px; }
.lx-hero-img { position: relative; padding-inline: var(--gutter); }
.lx-hero-img .media { --ratio: 1/1.08; border-radius: 999px 999px 6px 6px; }
.lx-hero-text { text-align: center; padding: 28px var(--gutter) 8px; display: grid; gap: 16px; justify-items: center; }
.lx-hero h1 { font: 500 clamp(3.25rem, 17vw, 6.5rem)/.94 var(--font-display), Georgia, serif; letter-spacing: -.01em; }
.lx-hero .lead { max-width: 36ch; color: var(--muted); }
.cta-row { display: grid; gap: 10px; width: 100%; max-width: 360px; margin-top: 6px; }
@media (min-width: 900px) {
  .lx-hero { grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; padding: 36px max(32px, calc((100vw - var(--max)) / 2 + 32px)); }
  .lx-hero-img { order: 1; padding: 0; } .lx-hero-img .media { --ratio: 4/5; max-height: 78vh; }
  .lx-hero-text { order: 2; padding: 0 24px; }
  .cta-row { grid-auto-flow: column; max-width: none; width: auto; }
}
.lx-sec { margin-top: 64px; }
@media (min-width: 900px) { .lx-sec { margin-top: 104px; } }
.lx-title { text-align: center; margin-bottom: 28px; }
.lx-title h2 { font: var(--h2); }

.lx-split { display: grid; margin-top: 64px; background: var(--surface); }
.lx-split-img .media { --ratio: 5/4; border-radius: 0; }
.lx-split-text { padding: 40px var(--gutter) 48px; display: grid; gap: 14px; justify-items: start; }
.lx-split-text h2 { font: var(--h2); }
.lx-split .lead { color: var(--muted); }
@media (min-width: 900px) { .lx-split { grid-template-columns: 1fr 1fr; margin-top: 104px; } .lx-split-img .media { --ratio: auto; height: 100%; min-height: 480px; } .lx-split-text { padding: 72px max(32px, calc((100vw - var(--max)) / 2 + 32px)) 72px 64px; align-content: center; } }

.lx-banner { position: relative; margin-top: 64px; color: #fff; }
.lx-banner .media { --ratio: 4/5; border-radius: 0; }
.lx-banner .media::after { content: ""; position: absolute; inset: 0; background: rgba(30,18,10,.38); }
.lx-banner-text { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; gap: 14px; padding: 24px var(--gutter) 32px; }
.lx-banner .eyebrow { color: #f0dcb8; }
.lx-banner h2 { font: 500 clamp(2.25rem, 10vw, 4.5rem)/1 var(--font-display), Georgia, serif; max-width: 14ch; }
.btn.lxl { background: #f6f0e8; color: #2c211b; border-color: #f6f0e8; }
.btn.lxl:hover { background: transparent; color: #fff; border-color: #fff; }
@media (min-width: 900px) { .lx-banner { margin-top: 104px; } .lx-banner .media { --ratio: 21/9; } .lx-banner-text { justify-content: center; padding-bottom: 24px; } }

.lx-story { display: grid; gap: 28px; align-items: center; }
.lx-story-img .media { --ratio: 1/1.1; border-radius: 999px 999px 6px 6px; }
.lx-story-text { display: grid; gap: 16px; text-align: center; justify-items: center; }
.lx-story-text h2 { font: var(--h2); max-width: 16ch; }
.lx-story .lead { color: var(--muted); max-width: 52ch; }
.ticks { display: grid; gap: 8px; }
.ticks li { color: var(--ink); font-size: .9375rem; letter-spacing: .04em; }
.ticks li::before { content: "◦ "; color: var(--gold); }
@media (min-width: 900px) { .lx-story { grid-template-columns: .9fr 1.1fr; gap: 88px; } .lx-story-text { text-align: left; justify-items: start; } .lx-story-img .media { --ratio: 4/5; } }

/* footer */
.lx-foot { padding: 56px 0 calc(96px + env(safe-area-inset-bottom)); text-align: center; border-top: 1px solid var(--line); }
.lx-tag { color: var(--muted); max-width: 44ch; margin: 10px auto 36px; }
.lx-foot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; overflow-wrap: anywhere; }
.lx-foot h2 { font: 500 .6875rem var(--font-body), sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.lx-foot li { margin-bottom: 8px; font-size: .9375rem; }
.lx-foot a { display: inline-block; padding: 4px 0; }
.socials { display: flex; gap: 6px; justify-content: center; }
.socials a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; padding: 0; }
.lx-legal { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--muted); }
.lx-legal a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .lx-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- production additions (the reference rules above are unchanged) ---- */
/* merchant logo: a fixed 36px badge beside the Luxe serif wordmark, so any logo stays legible and nothing shifts while it loads */
.lx-logo .lg-brand { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; min-width: 0; }
.lx-logo img.logo-badge { display: block; width: 36px; height: 36px; flex: none; max-width: none; border-radius: 50%; object-fit: cover; background: var(--surface); }
.lx-logo .lg-wordmark { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; min-width: 0; }
.lx-logo .lg-wordmark.long { font-size: 1.125rem; letter-spacing: .14em; }
.lx-head .lx-logo { min-width: 0; }
.lg-gone { display: none; }
#mnav .mn-head .lx-logo { font-size: 1.375rem; }
@media (max-width: 899px) {
  .lx-bar { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 6px; }
  /* the brand is confined to the middle column: it shrinks, then truncates, never covers the icons */
  .lx-head .lx-logo { justify-self: stretch; width: 100%; display: flex; justify-content: center; overflow: hidden; font-size: 1.25rem; letter-spacing: .16em; padding-left: 0; }
  .lx-logo .lg-brand { gap: 8px; }
  .lx-logo .lg-wordmark { max-width: none; flex: 0 1 auto; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.1; text-align: center; text-overflow: clip; }
  .lx-logo .lg-wordmark.long { font-size: .9375rem; letter-spacing: .1em; }
  .lx-logo img.logo-badge { width: 32px; height: 32px; }
}
@media (max-width: 400px) { .lx-head .lx-logo { font-size: 1.0625rem; letter-spacing: .12em; } }
@media (max-width: 359px) { .lx-head .lx-logo .lg-wordmark { font-size: .875rem; letter-spacing: .08em; } }
@media (min-width: 900px) { .lx-logo img.logo-badge { width: 40px; height: 40px; } .lx-head .lx-logo .lg-wordmark { max-width: 44vw; } }
.lx-ticker p { text-align: center; }
/* hero without a usable photo: centred copy only */
.lx-hero.noimg { padding-top: 56px; }
@media (min-width: 900px) { .lx-hero.noimg { grid-template-columns: 1fr; padding-block: 96px; } }
.lx-hero h1.long { font-size: clamp(2.5rem, 11vw, 4.25rem); line-height: 1; overflow-wrap: anywhere; }
@media (min-width: 900px) { .lx-hero h1.long { font-size: clamp(3rem, 5.2vw, 5rem); } }
.lx-banner h2.long { font-size: clamp(1.875rem, 8vw, 3.25rem); max-width: 18ch; }
/* sale spotlight with a modest photo: the tonal split, image square */
.lx-spot .lx-split-img .media { --ratio: 1/1; }
@media (min-width: 900px) { .lx-spot .lx-split-img .media { --ratio: auto; } }
.lx-story.noimg { display: block; max-width: 760px; margin-inline: auto; }
.lx-tag-gap { height: 28px; }
.lx-end { height: 72px; }
.lx-about { max-width: 760px; display: grid; gap: 24px; padding-bottom: 48px; }
/* images that could not be loaded leave a neutral slot (same size), never a broken-image icon (engine retry) */
img.wi-err { visibility: hidden; }
.media.img-failed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--surface), var(--line)); }
.lx-banner .media.img-failed::after { background: linear-gradient(135deg, #4a382d, var(--accent)); }
.card-body .sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lx-head .lx-logo .lg-wordmark, #mnav .lx-logo .lg-wordmark { text-transform: uppercase; }
@media (min-width: 900px) { .lx-spot .lx-split-img { order: 2; } .lx-spot .lx-split-text { padding: 72px 64px 72px max(32px, calc((100vw - var(--max)) / 2 + 32px)); } }
@media (min-width: 1040px) { .grid.lx-few { grid-template-columns: repeat(var(--lx-n), minmax(0, calc((100% - 72px) / 4))); justify-content: center; } }
@media (min-width: 720px) and (max-width: 1039px) { .grid.lx-n1, .grid.lx-n2 { grid-template-columns: repeat(var(--lx-n), minmax(0, calc((100% - 40px) / 3))); justify-content: center; } }
.grid.lx-n1 { --lx-n: 1; } .grid.lx-n2 { --lx-n: 2; } .grid.lx-n3 { --lx-n: 3; }
.lx-foot .lx-logo.big { text-transform: uppercase; }
/* fewer than three footer columns stay centred instead of leaving an empty third */
@media (min-width: 900px) { .lx-foot-grid { display: flex; justify-content: center; } .lx-foot-grid > div { flex: 0 1 33.333%; } }
/* announcement: one line on phones like the reference (the merchant's full text, ellipsised; tapping opens it in place);
   the whole text from 720px */
.lx-ticker { display: block; }
.lx-ticker summary { display: flex; justify-content: center; align-items: center; min-height: 34px; list-style: none; cursor: pointer; }
.lx-ticker summary::-webkit-details-marker { display: none; }
.lx-ticker summary::marker { content: ""; }
.lx-ticker p { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-ticker[open] p { white-space: normal; padding: 8px 0; }
@media (min-width: 720px) { .lx-ticker p { white-space: normal; padding: 8px 0; } .lx-ticker summary { cursor: default; } }
/* a product without photos: a plain arch outline with its initial (no stand-in artwork) */
.media .lx-ph { background: var(--surface); }
.lx-ph path { fill: none; stroke: var(--muted); stroke-opacity: .45; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lx-ph text { fill: var(--muted); font: 500 30px var(--font-display), Georgia, serif; }

/* ---- premium sections (shared markup in premium.css, Luxe treatment here) ---- */
.lx-cmp { --cmp-radius: 4px; text-align: center; }
.lx-cmp .cmp-text { justify-items: center; }
.lx-cmp .cmp-lead { margin-inline: auto; }
.lx-cmp .eyebrow, .lx-cmp .cmp-count { color: var(--gold); }
.lx-cmp .cmp-code { border-color: var(--gold); border-radius: 4px; justify-content: center; }
.fd-strip { font-weight: 500; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; }
.lx-trust .trust li { border-left-color: var(--gold); }
.lx-trust { margin-top: 64px; }