/* ==========================================================================
   LUMEN AUDIO — shared stylesheet
   Plain CSS3, no build step. Section blocks are written to map 1:1 onto
   Elementor "Sections" so this can be rebuilt block-by-block in Elementor.
   ========================================================================== */

:root {
  --ink: #14141a;
  --ink-soft: #3a3a42;
  --gray: #6b6b75;
  --gray-light: #b9b8bd;
  --paper: #fafaf9;
  --card: #ffffff;
  --sand: #eae6dc;
  --sand-soft: #f3f1ec;
  --gold: #b08d57;
  --gold-dark: #8f6f3f;
  --wine: #9b1b30;
  --sage: #4f7a68;
  --border: #e6e3da;
  --radius: 4px;
  --shadow: 0 2px 24px rgba(20, 20, 26, 0.06);
  --shadow-hover: 0 12px 32px rgba(20, 20, 26, 0.12);
  --maxw: 1240px;
  --section-padding: 88px;
  --font-head: "Helvetica Neue", Arial, "Segoe UI", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

.eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  margin-bottom: 12px;
}
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
h1 { font-size: 46px; line-height: 1.1; }
h2 { font-size: 32px; line-height: 1.2; }
h3 { font-size: 20px; }
p { color: var(--ink-soft); margin: 0 0 16px; }
.lead { font-size: 18px; color: var(--gray); }

/* Elementor Text Editor widgets: this file's own `p { color: ... }` rule
   above (plus a few class-scoped ones further down, e.g. `.section--ink p`)
   directly targets every <p> tag site-wide -- including the <p> Elementor
   renders inside a Text Editor widget's content. Elementor's "Text Color"
   control in the Style tab applies its color to the widget's own wrapper
   and expects it to reach the text by inheritance, but a rule that directly
   targets an element always wins over an inherited value, no matter how
   much lower its specificity is. So the theme's rule was silently winning
   every time, which is why picking a new color in Elementor never visibly
   changed anything. This hands color back to whatever Elementor set. */
.elementor-widget-text-editor p,
.elementor-widget-text-editor .elementor-widget-container p {
  color: inherit !important;
}

/* ---- Header "Search" widget: Header Footer Elementor's free
   "hfe-search-button" widget (confirmed via DevTools -- an earlier guess
   at ".elementor-widget-search"/".elementor-widget-search-form" matched
   nothing, since HFE's real widget class is ".elementor-widget-hfe-search-
   button" wrapping "form.hfe-search-button-wrapper" >
   "div.hfe-search-form__container" (a flex row) > "input.hfe-search-form__
   input" + "button#clear"). Elementor generates its own per-element CSS
   for this widget's default #ededed input background, scoped to that
   element's own ID class, which is specific enough to beat a plain
   selector -- so every override below carries !important to guarantee it
   wins regardless. Soft bordered pill: the flex container becomes the
   pill (border, radius, white fill, faint shadow), the input itself goes
   transparent so it just sits inside it, and the whole pill's border/
   shadow glows gold the instant you focus into the input. */
.elementor-widget-hfe-search-button .hfe-search-form__container {
  border: 1px solid var(--border, #E6E3DA) !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(20, 20, 26, .06);
  overflow: hidden;
  padding: 0 8px 0 18px !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.elementor-widget-hfe-search-button .hfe-search-form__container:focus-within {
  border-color: var(--gold-dark, #8F6F3F) !important;
  box-shadow: 0 0 0 3px rgba(176, 141, 87, .15), 0 4px 14px rgba(20, 20, 26, .08);
}
.elementor-widget-hfe-search-button .hfe-search-form__input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 12px 6px !important;
  font-size: 14px !important;
  color: var(--ink, #14141A) !important;
}
.elementor-widget-hfe-search-button .hfe-search-form__input::placeholder {
  color: #9A99A1 !important;
  opacity: 1 !important;
}
.elementor-widget-hfe-search-button .hfe-search-form__container button,
.elementor-widget-hfe-search-button #clear {
  background: transparent !important;
  border: none !important;
  color: #9A99A1 !important;
}

.section { padding: var(--section-padding) 0; }
.section--tight { padding: calc(var(--section-padding) * 0.636) 0; }
.section--sand { background: var(--sand-soft); }
.section--ink { background: var(--ink); color: var(--sand-soft); }
.section--ink p { color: #c8c7cd; }
.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: all .2s ease;
}
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--gold-dark); }
.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: var(--gold-dark); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--outline-light:hover { background: #fff; color: var(--ink); }
.btn--sm { padding: 10px 18px; font-size: 11px; }
.btn--block { width: 100%; }

/* ---------- Announcement bar ---------- */
.announce {
  background: var(--ink);
  color: #fff;
  text-align: center;
  font-size: 12px;
  letter-spacing: 1.5px;
  padding: 9px 16px;
  text-transform: uppercase;
}
.announce strong { color: var(--gold); }

/* ---------- WooCommerce "Store Notice" (Settings > General > Store notice) ----------
   WooCommerce prints this site-wide -- any page, not just shop pages -- as a
   plain <p class="woocommerce-store-notice demo_store">, pinned absolutely to
   the very top of the document with a hardcoded bright purple background
   (#720eec) and a plain underlined "Dismiss" text link (confirmed straight
   from the plugin's own woocommerce.css/woocommerce.js). Kept in this
   always-loaded stylesheet rather than woocommerce.css -- which only loads on
   actual shop/cart/checkout/account pages -- since this notice can appear
   literally anywhere.

   Two deliberate departures from WooCommerce's own defaults:

   1. `position: static` instead of its default `absolute; top:0`. WooCommerce
      prints this element via the `wp_body_open` hook -- the very first thing
      inside <body>, ahead of the .announce shipping bar and the header (see
      header.php) -- so switching it to normal document flow makes it stack
      as its own row ABOVE .announce and push everything below it down the
      page, instead of floating on top of and covering it.

   2. A gold gradient instead of ink. .announce (directly beneath this, same
      DOM position pattern) is already ink-on-white-text -- stacking another
      ink bar directly on top of it would read as one merged block with no
      visible seam. Gold-on-ink-text gives the two an immediate, deliberate
      contrast (color, not just a border) so they're legible as two distinct
      rows even before reading the copy.

   `display` is deliberately NEVER set here (WooCommerce's own default is
   `display:none`, toggled to shown/hidden by plain inline styles via jQuery
   .show()/.hide() in its own JS, based on a "store_notice..." cookie set the
   moment Dismiss is clicked). An earlier version of this override forced
   `display:flex !important` for a fancier row layout -- but an !important
   rule in a stylesheet always beats a plain inline style, so it silently
   defeated the JS-driven .hide() call and the Dismiss button stopped doing
   anything. Not touching `display` at all here leaves WooCommerce's own
   show/hide + Dismiss + "don't show again this visit" cookie logic fully in
   control, and centers/lays out the message + Dismiss pill purely through
   text-align + inline-flex, which works identically under either display
   value jQuery ends up setting. */
.woocommerce-store-notice,
p.demo_store {
  position: static !important;
  width: 100%;
  margin: 0;
  padding: 12px 24px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 100%) !important;
  border-bottom: 2px solid var(--ink);
  box-shadow: 0 4px 16px rgba(20, 20, 26, .12);
  color: var(--ink) !important;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.6;
  text-align: center;
}
.woocommerce-store-notice a,
p.demo_store a {
  color: var(--ink) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.woocommerce-store-notice a:hover,
p.demo_store a:hover { color: #000 !important; }
.woocommerce-store-notice__dismiss-link {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 14px;
  padding: 4px 13px !important;
  border: 1px solid rgba(20, 20, 26, .35);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: border-color .2s ease, background .2s ease;
}
.woocommerce-store-notice__dismiss-link:hover {
  border-color: var(--ink);
  background: rgba(20, 20, 26, .08);
}
@media (max-width: 600px) {
  .woocommerce-store-notice,
  p.demo_store { padding: 10px 16px; font-size: 12px; }
  .woocommerce-store-notice__dismiss-link { margin: 6px 0 0; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 249, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 24px;
}
.logo img { height: 26px; }
.main-nav { display: flex; gap: 32px; }
.main-nav a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .2s, color .2s;
}
.main-nav a:hover, .main-nav a.active { color: var(--ink); border-color: var(--gold); }
.header-actions { display: flex; align-items: center; gap: 18px; }
.icon-btn {
  position: relative;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
.cart-count {
  position: absolute; top: -9px; right: -11px;
  background: var(--wine); color: #fff;
  font-size: 10px; font-weight: 700;
  width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.nav-toggle { display: none; background: none; border: none; }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after { display: none; }

/* ---------- Breadcrumb ---------- */
/* Breadcrumb text color is intentionally two-tier: the container's own
   color (--ink, dark) is what the CURRENT page segment ends up in, since
   that's plain unlinked text with nothing overriding it -- it's the "you
   are here" marker, so it should read as the strongest, not the weakest.
   Every actual link (everything before it) is deliberately lighter/muted
   (--gray) so it recedes a bit and reads as "secondary, click to go back".
   Hover moves a link to --gold-dark (this site's one universal hover
   color, used on product names, post titles, nav, etc.) plus an
   underline, so "this is clickable" is unmistakable, not just a subtle
   gray shift. Shared by every custom breadcrumb template AND WooCommerce's
   own native breadcrumb on shop/category/product pages (see
   lumen_breadcrumb_defaults() in functions.php, which points WooCommerce
   at this exact class instead of leaving its breadcrumb unstyled). */
/* Typography (font, size, weight, line-height) matched to a reference
   site's breadcrumb via a font-inspector readout: Montserrat 400,
   14px/26px, ~rgb(24,24,24) -- see the Montserrat @font-face enqueue in
   functions.php. Colors are deliberately NOT copied from that reference
   (its links were teal, a different site's brand color) -- kept on this
   site's own gold/ink palette instead so it stays consistent with every
   other hover state on the site. */
.breadcrumb {
  font-family: 'Montserrat', var(--font-head);
  font-size: 14px;
  line-height: 26px;
  color: var(--ink);
  padding: 22px 0 0;
}
.breadcrumb a {
  color: var(--gray);
  font-weight: 400;
  transition: color .2s ease;
}
.breadcrumb a:hover {
  color: var(--gold-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.breadcrumb span { margin: 0 6px; color: var(--gray-light); font-weight: 400; }
/* The current/final page in the trail: matches the reference's weight
   (400, not bold) -- color is the only differentiator from the links now,
   same as the reference site does it. IMPORTANT: this has to
   out-specificity ".breadcrumb span" above, not just come after it in the
   file -- the current-page element is itself a <span> (for
   aria-current="page"), so without this it was actually being caught by
   that separator rule and rendered in the pale --gray-light separator
   color instead of solid --ink. `span.breadcrumb-current` (class + tag)
   beats the plain `.breadcrumb span` (also class + tag, but earlier in
   the file) by source order at equal specificity. Capped width + ellipsis
   on small screens stops a long product/category name from wrapping the
   breadcrumb onto multiple lines on a phone; inline-block + vertical-align
   keeps it sitting correctly on the same line as the links and chevrons
   before it. Uncapped on larger screens, where there's room to just show
   the full name. */
.breadcrumb span.breadcrumb-current {
  color: var(--ink);
  font-weight: 400;
}
@media (max-width: 480px) {
  .breadcrumb-current {
    display: inline-block;
    max-width: 55vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(120deg, var(--sand-soft) 0%, var(--sand) 100%);
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  min-height: 560px;
  padding-top: 40px;
  padding-bottom: 40px;
}
.hero-copy .eyebrow { color: var(--wine); }
.hero-copy h1 { margin-bottom: 20px; }
.hero-copy p { max-width: 420px; margin-bottom: 32px; font-size: 17px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-art { position: relative; display: flex; justify-content: center; }
.hero-art img { width: 78%; filter: drop-shadow(0 30px 40px rgba(20,20,26,.14)); }
.hero-badge {
  position: absolute; top: 12%; right: 6%;
  background: #fff; border-radius: 50%;
  width: 96px; height: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  text-align: center;
}
.hero-badge strong { font-size: 20px; color: var(--wine); font-family: var(--font-head); }
.hero-badge span { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--gray); }

/* ---------- Trust strip ---------- */
.trust-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 28px 0;
}
.trust-item {
  display: flex; align-items: center; gap: 12px;
  justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  border-right: 1px solid var(--border);
  text-align: left;
}
.trust-item:last-child { border-right: none; }
.trust-item svg { width: 24px; height: 24px; stroke: var(--gold); fill: none; flex: none; }
.trust-item span small { display: block; font-weight: 400; color: var(--gray); font-size: 11px; margin-top: 2px; }

/* ---------- Category tiles ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.cat-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand-soft);
  aspect-ratio: 3/4;
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.cat-card img { position: absolute; inset: 0; width: 100%; height: 78%; object-fit: contain; padding: 24px; }
.cat-card-label {
  position: relative;
  background: #fff;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border);
}
.cat-card-label span { font-size: 12px; color: var(--gray); }
.cat-card-label h3 { margin: 4px 0 0; font-size: 17px; }

/* ---------- Product grid & cards ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.product-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
  display: flex; flex-direction: column;
}
.product-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.product-media {
  position: relative;
  background: var(--sand-soft);
  aspect-ratio: 1/1;
  overflow: hidden;
}
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.product-card:hover .product-media img { transform: scale(1.06); }
.product-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--wine); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  padding: 5px 10px; border-radius: 3px; text-transform: uppercase;
}
.product-badge--gold { background: var(--gold); }
.product-quickadd {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.product-card:hover .product-quickadd { opacity: 1; transform: translateY(0); }
.product-body { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-brand { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-dark); font-weight: 700; }
.product-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.product-name a:hover { color: var(--gold-dark); }
.stars { display: flex; gap: 2px; align-items: center; margin: 2px 0; }
.stars svg { width: 13px; height: 13px; fill: var(--gold); }
.stars small { color: var(--gray); font-size: 11px; margin-left: 6px; }
.price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.price { font-size: 16px; font-weight: 700; color: var(--ink); }
.price--sale { color: var(--wine); }
.price--was { font-size: 13px; color: var(--gray-light); text-decoration: line-through; }

/* ---------- Split promo (bundle) ---------- */
.promo-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.promo-panel {
  border-radius: var(--radius);
  padding: 48px 40px;
  min-height: 320px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
  overflow: hidden;
}
.promo-panel--ink { background: var(--ink); color: #fff; }
.promo-panel--ink p { color: #c8c7cd; }
.promo-panel--gold { background: linear-gradient(135deg, #cba26c, var(--gold-dark)); color: #fff; }
.promo-panel--gold p { color: rgba(255,255,255,.85); }
.promo-panel h3 { font-size: 26px; }

/* ---------- Testimonials ---------- */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testi-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.testi-card .stars { margin-bottom: 12px; }
.testi-card p { font-size: 14px; color: var(--ink-soft); font-style: italic; }
.testi-name { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.testi-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--sand); color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.testi-name strong { font-size: 13px; display: block; }
.testi-name span { font-size: 11px; color: var(--gray); }

/* ---------- Newsletter ---------- */
.newsletter { text-align: center; }
.newsletter h2 { margin-bottom: 8px; }
.newsletter-form {
  display: flex; justify-content: center; gap: 10px; margin-top: 28px;
  max-width: 440px; margin-left: auto; margin-right: auto;
}
.newsletter-form input {
  flex: 1;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 14px;
}
.newsletter-form input::placeholder { color: #a5a4ac; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #c8c7cd; padding-top: 72px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand p { color: #9a99a1; font-size: 13px; max-width: 260px; }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
}
.footer-social svg { width: 14px; height: 14px; fill: #c8c7cd; }
.footer-col h4 { color: #fff; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 18px; }
.footer-col ul li { margin-bottom: 11px; }
.footer-col a { font-size: 13px; color: #9a99a1; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 0 32px;
  font-size: 12px; color: #7d7c84;
  flex-wrap: wrap; gap: 12px;
}
.payment-icons { display: flex; gap: 8px; }
.payment-icons span {
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 3px; padding: 4px 8px; font-size: 10px; letter-spacing: .5px;
}

/* ---------- Shop page: filter layout ---------- */
.shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.filter-panel {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px;
  position: sticky; top: 100px;
}
.filter-group { border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 20px; }
.filter-group:last-child { border-bottom: none; margin-bottom: 0; }
.filter-group h4 { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; }
.filter-option { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; cursor: pointer; }
.filter-option input { accent-color: var(--gold-dark); }
.filter-option .count { margin-left: auto; color: var(--gray-light); font-size: 12px; }
.price-range { display: flex; align-items: center; gap: 8px; }
.price-range input[type="range"] { width: 100%; accent-color: var(--gold-dark); }
.shop-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.shop-toolbar select {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 9px 14px; font-size: 13px; background: #fff; color: var(--ink);
}
.results-count { font-size: 13px; color: var(--gray); }
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
.pagination a, .pagination span.page-numbers {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; color: var(--ink-soft);
}
.pagination a.active, .pagination a:hover,
.pagination span.page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination span.page-numbers.dots { border: none; color: var(--gray-light); width: auto; }

/* ---------- Blog listing (home.php) -- elegant post-card grid ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.post-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .25s ease, transform .25s ease;
}
.post-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.post-card-media {
  position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--sand-soft);
}
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card:hover .post-card-media img { transform: scale(1.06); }
.post-card-media--placeholder {
  display: flex; align-items: center; justify-content: center; color: var(--gold);
  background: linear-gradient(135deg, var(--sand-soft), var(--sand));
}
.post-card-cat {
  position: absolute; top: 12px; left: 12px; background: #fff; color: var(--gold-dark);
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 10px; border-radius: 3px;
}
.post-card-body { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card-meta {
  font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--gray);
  display: flex; gap: 8px; align-items: center;
}
.post-card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gray-light); flex: none; }
.post-card-title { font-size: 18px; line-height: 1.32; margin: 0; }
.post-card-title a:hover { color: var(--gold-dark); }
.post-card-excerpt { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0; flex: 1; }
.post-card-more {
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink); display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
}
.post-card-more svg { width: 14px; height: 14px; transition: transform .2s ease; }
.post-card:hover .post-card-more svg { transform: translateX(4px); }
.post-card-more:hover { color: var(--gold-dark); }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

/* ---------- Product detail page ---------- */
.pdp-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.pdp-gallery-main {
  background: var(--sand-soft); border-radius: var(--radius);
  aspect-ratio: 1/1; overflow: hidden; margin-bottom: 16px;
}
.pdp-gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 30px; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pdp-thumbs button {
  background: var(--sand-soft); border: 2px solid transparent; border-radius: var(--radius);
  aspect-ratio: 1/1; padding: 8px;
}
.pdp-thumbs button.active { border-color: var(--gold); }
.pdp-info .product-brand { margin-bottom: 6px; }
.pdp-info h1 { font-size: 30px; margin-bottom: 10px; }
.pdp-price-row { display: flex; align-items: baseline; gap: 12px; margin: 18px 0; }
.pdp-price-row .price { font-size: 26px; }
.pdp-desc { font-size: 14px; color: var(--ink-soft); margin-bottom: 24px; }

/* Blog post body (single.php) -- default WP block/classic editor output:
   headings, paragraphs, lists, images, captions, quotes, alignment classes. */
.lumen-post-content > * + * { margin-top: 20px; }
.lumen-post-content h2 { font-size: 24px; line-height: 1.3; }
.lumen-post-content h3 { font-size: 19px; line-height: 1.35; }
.lumen-post-content h2, .lumen-post-content h3, .lumen-post-content h4 { color: var(--ink); font-weight: 700; }
.lumen-post-content ul, .lumen-post-content ol { padding-left: 22px; }
.lumen-post-content li + li { margin-top: 8px; }
.lumen-post-content img { border-radius: 10px; height: auto; }
.lumen-post-content figure { margin: 0; }
.lumen-post-content figcaption, .lumen-post-content .wp-caption-text {
  font-size: 12px; color: var(--gray); margin-top: 8px; text-align: center;
}
.lumen-post-content blockquote {
  border-left: 3px solid var(--gold); margin: 0; padding: 4px 0 4px 20px;
  font-style: italic; color: var(--ink-soft);
}
.lumen-post-content a { color: var(--gold); text-decoration: underline; }
.lumen-post-content .alignleft { float: left; margin: 4px 20px 12px 0; }
.lumen-post-content .alignright { float: right; margin: 4px 0 12px 20px; }
.lumen-post-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.lumen-post-content .wp-block-gallery img { border-radius: 8px; }
.option-group { margin-bottom: 22px; }
.option-group h4 { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; }
.swatches { display: flex; gap: 10px; }
.swatch {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--border); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.swatch.active { border-color: var(--gold); }
.swatch-dot { width: 26px; height: 26px; border-radius: 50%; }
.qty-add-row { display: flex; gap: 14px; margin: 28px 0; }
.qty-input {
  display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius);
}
.qty-input button { background: none; border: none; width: 40px; height: 48px; font-size: 16px; }
.qty-input input { width: 40px; border: none; text-align: center; font-size: 14px; background: none; }
.pdp-meta { border-top: 1px solid var(--border); padding-top: 20px; font-size: 13px; color: var(--gray); }
.pdp-meta div { display: flex; justify-content: space-between; padding: 6px 0; }
.pdp-meta strong { color: var(--ink-soft); font-weight: 600; }

.tabs { margin-top: 80px; }
.tab-nav { display: flex; gap: 32px; border-bottom: 1px solid var(--border); margin-bottom: 32px; }
.tab-nav button {
  background: none; border: none; padding: 14px 0; font-size: 13px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--gray);
  border-bottom: 2px solid transparent;
}
.tab-nav button.active { color: var(--ink); border-color: var(--gold); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.spec-table { width: 100%; border-collapse: collapse; max-width: 640px; }
.spec-table tr { border-bottom: 1px solid var(--border); }
.spec-table td { padding: 12px 0; font-size: 14px; }
.spec-table td:first-child { color: var(--gray); width: 220px; }
.spec-table td:last-child { color: var(--ink-soft); font-weight: 600; }

.related-heading { margin-top: 90px; }

/* ---------- Toast ---------- */
/* bottom offset cleared to sit above the site-wide floating WhatsApp button
   (.lumen-wa-float, further down this file) -- both are bottom-right fixed
   elements, and WA float's higher z-index (500 vs this toast's 200) meant
   it was rendering on top of / obscuring this toast whenever both were
   visible at once. WA float is 56px tall starting at bottom:24px, so its
   top edge sits at 80px; 96px here leaves a clean gap above it. */
.toast {
  position: fixed; bottom: 96px; right: 28px;
  background: var(--ink); color: #fff;
  padding: 14px 22px; border-radius: var(--radius);
  font-size: 13px; box-shadow: var(--shadow-hover);
  display: flex; align-items: center; gap: 10px;
  transform: translateY(20px); opacity: 0; pointer-events: none;
  transition: all .3s ease;
  z-index: 200;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-layout { grid-template-columns: 1fr; }
  .filter-panel { position: static; margin-bottom: 32px; }
  .pdp-layout { grid-template-columns: 1fr; }
  .promo-split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item { border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 14px; }
}
@media (max-width: 760px) {
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  .hero .container { grid-template-columns: 1fr; min-height: auto; padding-top: 24px; }
  .hero-art { order: -1; }
  .main-nav { display: none; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
}

/* ---------- Site popups: welcome offer + promo discount ----------
   Elementor's own popup/trigger builder (auto-show after a delay, on exit
   intent, etc.) is an Elementor Pro feature -- this recreates the same
   experience with plain CSS/JS, printed once sitewide via wp_footer
   (functions.php) instead of needing to be placed on every page. Visual
   language matches the search panel built earlier (dark backdrop, white
   card, fade + rise entrance) so it reads as part of the same site rather
   than a bolted-on third-party popup. */
.lumen-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 26, .55);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
}
.lumen-popup-overlay.is-open { opacity: 1; visibility: visible; }
.lumen-popup {
  position: relative;
  background: #fff;
  max-width: 420px;
  width: 100%;
  border-radius: 10px;
  padding: 40px 32px 32px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
  transform: translateY(-18px) scale(.97);
  transition: transform .25s ease;
}
.lumen-popup-overlay.is-open .lumen-popup { transform: translateY(0) scale(1); }
.lumen-popup::before {
  content: "";
  position: absolute;
  top: 0; left: 20px; right: 20px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  border-radius: 0 0 3px 3px;
}
.lumen-popup-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: #9A99A1;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color .15s ease, color .15s ease;
}
.lumen-popup-close:hover { background: var(--sand-soft); color: var(--ink); }
.lumen-popup-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 10px;
}
.lumen-popup-heading { font-size: 24px; line-height: 1.25; margin: 0 0 10px; color: var(--ink); }
.lumen-popup-body { font-size: 14px; color: var(--ink-soft); margin: 0 0 20px; }
.lumen-popup-cta { margin-bottom: 0; }

/* ---- On-sale product popup: photo + name + price, instead of a coupon code ---- */
.lumen-popup-product-image {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 220px;
  margin: 0 auto 18px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sand-soft);
}
.lumen-popup-product-image img { width: 100%; height: 100%; object-fit: cover; }
.lumen-popup-badge {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 1;
  background: var(--wine);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 3px;
  line-height: 1;
}
.lumen-popup-price {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.lumen-popup-price del {
  color: #9A99A1;
  font-weight: 400;
  font-size: 14px;
  opacity: 1;
  margin-right: 6px;
}
.lumen-popup-price ins {
  color: var(--gold-dark);
  text-decoration: none;
}
.lumen-popup-dismiss {
  display: block;
  width: 100%;
  background: none;
  border: none;
  margin-top: 14px;
  font-size: 12px;
  color: #9A99A1;
  text-decoration: underline;
  cursor: pointer;
}
.lumen-popup-dismiss:hover { color: var(--ink); }
body.lumen-popup-open { overflow: hidden; }
@media (max-width: 480px) {
  .lumen-popup { padding: 32px 22px 26px; }
  .lumen-popup-heading { font-size: 20px; }
}

/* ---------- Social icons (footer + header) ----------
   Shared base styles for both placements: the footer row (printed via
   wp_footer, functions.php) and the header row (pasted into an HTML
   widget inside the Elementor-built header -- see the code block sent
   alongside this file). Both reference the same classes, since this
   stylesheet loads sitewide including inside Elementor content. */
.lumen-social-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lumen-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.lumen-social-icon svg { width: 16px; height: 16px; }
.lumen-social-icon:hover { transform: translateY(-2px); }

/* Footer: printed as the very last thing on the page, styled as its own
   thin "connect with us" band so it reads as an intentional closing
   section rather than a stray row tacked onto the end. */
.lumen-social-icons-wrap {
  background: var(--ink);
  padding: 22px 0;
  text-align: center;
}
.lumen-social-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 12px;
}
.lumen-social-icons--footer {
  justify-content: center;
  color: #fff;
}
.lumen-social-icons--footer .lumen-social-icon:hover {
  background: var(--gold);
  color: #fff;
}

/* Header: compact, icon-only, no label -- meant to sit quietly among the
   header's other small icon buttons. White icons for a dark header bar,
   with the row direction forced explicitly (!important): the Elementor/
   HFE header this gets pasted into may carry its own flex-direction or
   link-display rules on its HTML widget content, and those would win over
   a plain ".lumen-social-icons" rule since they're scoped to Elementor's
   own wrapper classes. */
.lumen-social-icons.lumen-social-icons--header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  color: #fff;
}
.lumen-social-icons--header .lumen-social-icon {
  display: inline-flex !important;
  width: 30px;
  height: 30px;
  color: #fff;
}
.lumen-social-icons--header .lumen-social-icon:hover {
  background: rgba(255, 255, 255, .15);
  color: var(--gold);
}


/* ---------- Site-wide floating WhatsApp button ---------- */
.lumen-wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 500;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  transition: background-color .2s ease, transform .15s ease;
}
.lumen-wa-float svg {
  width: 30px;
  height: 30px;
  position: relative;
  z-index: 1;
}
.lumen-wa-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  opacity: .55;
  animation: lumenWaFloatPulse 2.4s ease-out infinite;
}
.lumen-wa-float:hover {
  background: #1DA851;
  color: #fff;
  transform: translateY(-2px) scale(1.05);
}
@keyframes lumenWaFloatPulse {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (max-width: 480px) {
  .lumen-wa-float {
    width: 50px;
    height: 50px;
    right: 16px;
    bottom: 16px;
  }
  .lumen-wa-float svg { width: 26px; height: 26px; }
  /* WA float shrinks/repositions on mobile (top edge now at 16+50=66px) --
     keep the toast's clearance matched so they still don't overlap. */
  .toast {
    bottom: 82px;
    right: 16px;
  }
}

/* ---------- New arrival toast ----------
   Small bottom-left card spotlighting the most recently added product
   (functions.php picks it automatically). Same corner as the cart nudge
   below -- main.js makes sure the two never show at the same time. Eye-
   catching via a slide-up-and-settle entrance and a soft gold pulse ring
   around the thumbnail, without being an intrusive full-screen popup. */
.lumen-new-arrival {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 485;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(20, 20, 26, .22);
  border: 1px solid var(--border);
  opacity: 0;
  transform: translateY(24px) scale(.96);
  transition: opacity .4s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.lumen-new-arrival[hidden] { display: none; }
.lumen-new-arrival.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.lumen-new-arrival-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(20, 20, 26, .55);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease;
}
.lumen-new-arrival-close:hover { background: rgba(20, 20, 26, .8); }
.lumen-new-arrival-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 38px 16px 14px;
  text-decoration: none;
  color: inherit;
}
.lumen-new-arrival-media {
  position: relative;
  flex: none;
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--sand-soft);
}
.lumen-new-arrival-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lumen-new-arrival-media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow: 0 0 0 2px var(--gold);
  opacity: 0;
  animation: lumenNewArrivalRing 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes lumenNewArrivalRing {
  0%   { box-shadow: 0 0 0 2px var(--gold); opacity: .9; }
  70%  { box-shadow: 0 0 0 10px rgba(176, 141, 87, 0); opacity: 0; }
  100% { box-shadow: 0 0 0 10px rgba(176, 141, 87, 0); opacity: 0; }
}
.lumen-new-arrival-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  background: var(--wine);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 999px;
  line-height: 1;
}
.lumen-new-arrival-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
}
.lumen-new-arrival-eyebrow {
  display: block;
  width: 100%;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.lumen-new-arrival-name {
  display: block;
  width: 100%;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lumen-new-arrival-price {
  display: block;
  width: 100%;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-soft);
}
.lumen-new-arrival-price ins { text-decoration: none; color: var(--wine); font-weight: 700; }
.lumen-new-arrival-price del { color: var(--gray-light); font-weight: 400; margin-right: 4px; }
.lumen-new-arrival-link:hover .lumen-new-arrival-name { color: var(--gold-dark); }
@media (prefers-reduced-motion: reduce) {
  .lumen-new-arrival { transition: opacity .2s ease; }
  .lumen-new-arrival.is-visible { transform: none; }
  .lumen-new-arrival-media::after { animation: none; }
}
@media (max-width: 480px) {
  .lumen-new-arrival {
    left: 12px;
    right: 12px;
    width: auto;
    bottom: 12px;
  }
}

/* ---------- Site-wide "back to top" button ----------
   Stacks directly above the floating WhatsApp button on the same right
   edge, so the two read as one group of quick actions rather than two
   competing circles. Hidden at rest -- main.js adds .is-visible once the
   visitor has scrolled down a bit -- then fades + scales in. */
.lumen-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 94px;
  z-index: 470;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(180deg, var(--ink), #24242c);
  color: var(--gold);
  box-shadow: 0 6px 18px rgba(20, 20, 26, .28);
  opacity: 0;
  pointer-events: none;
  transform: scale(.6) translateY(8px);
  transition: opacity .3s ease,
              transform .35s cubic-bezier(.34, 1.56, .64, 1),
              background-color .2s ease;
}
.lumen-back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}
.lumen-back-to-top:hover,
.lumen-back-to-top:focus-visible {
  background: linear-gradient(180deg, #24242c, var(--ink));
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 10px 26px rgba(20, 20, 26, .34);
}
.lumen-back-to-top svg {
  width: 20px;
  height: 20px;
}
@media (prefers-reduced-motion: reduce) {
  .lumen-back-to-top {
    transition: opacity .2s ease;
  }
  .lumen-back-to-top.is-visible,
  .lumen-back-to-top:hover,
  .lumen-back-to-top:focus-visible {
    transform: none;
  }
}
@media (max-width: 480px) {
  .lumen-back-to-top {
    width: 40px;
    height: 40px;
    right: 16px;
    bottom: 78px;
  }
  .lumen-back-to-top svg { width: 18px; height: 18px; }
}

/* ---------- Wishlist: floating side-tab button ----------
   Pinned to the vertical center of the left edge, printed sitewide via
   wp_footer (functions.php) -- same "always present" approach as the
   floating WhatsApp button above, just on the opposite side so the two
   never compete for the same corner. Collapsed to an icon-only circle at
   rest; on hover it slides out, the icon zooms + brightens, and a gold
   edge accent appears -- the "fade and zoom" the button asked for. */
.lumen-wishlist-tab {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 480;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 10px 16px;
  background: linear-gradient(180deg, var(--ink), #24242c);
  color: #fff;
  text-decoration: none;
  border-radius: 0 14px 14px 0;
  border-right: 3px solid transparent;
  box-shadow: 0 8px 22px rgba(20, 20, 26, .22);
  overflow: visible;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .3s ease,
              border-color .3s ease,
              padding-right .3s ease;
}
.lumen-wishlist-tab:hover,
.lumen-wishlist-tab:focus-visible {
  transform: translateY(-50%) translateX(5px);
  box-shadow: 0 14px 34px rgba(20, 20, 26, .32);
  border-right-color: var(--gold);
  padding-right: 14px;
}
.lumen-wishlist-tab-icon {
  position: relative;
  display: flex;
  width: 22px;
  height: 22px;
  opacity: .92;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
}
.lumen-wishlist-tab-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--gold);
}
.lumen-wishlist-tab:hover .lumen-wishlist-tab-icon,
.lumen-wishlist-tab:focus-visible .lumen-wishlist-tab-icon {
  transform: scale(1.22);
  opacity: 1;
}
.lumen-wishlist-tab-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: .75;
  transition: opacity .3s ease;
}
.lumen-wishlist-tab:hover .lumen-wishlist-tab-label,
.lumen-wishlist-tab:focus-visible .lumen-wishlist-tab-label {
  opacity: 1;
}
.lumen-wishlist-tab-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--wine);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--ink);
}
.lumen-wishlist-tab-count[hidden] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .lumen-wishlist-tab,
  .lumen-wishlist-tab-icon,
  .lumen-wishlist-tab-label {
    transition: none;
  }
}
@media (max-width: 640px) {
  .lumen-wishlist-tab {
    padding: 14px 8px;
    gap: 0;
  }
  .lumen-wishlist-tab-label {
    display: none;
  }
  .lumen-wishlist-tab:hover,
  .lumen-wishlist-tab:focus-visible {
    padding-right: 8px;
  }
}

/* ---------- Countdown timer (shortcode: [lumen_countdown]) ---------- */
.lumen-countdown {
  display: inline-block;
}
.lumen-countdown__label {
  display: block;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 14px;
}
.lumen-countdown__units {
  display: flex;
  gap: 12px;
}
.lumen-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 68px;
  padding: 14px 0 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
}
.lumen-countdown__unit span {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.lumen-countdown__unit small {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-light);
}
.lumen-countdown.is-expired .lumen-countdown__unit span {
  color: var(--gray-light);
}
@media (max-width: 480px) {
  .lumen-countdown__unit {
    width: 56px;
    padding: 10px 0 8px;
  }
  .lumen-countdown__unit span {
    font-size: 22px;
  }
}

/* ---------- "Vivid" Contact Us template: hero glow, cards, form, shimmer CTA ---------- */
.lumen-hero-glow {
  position: relative;
  overflow: hidden;
}
.lumen-hero-glow::before,
.lumen-hero-glow::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .35;
  pointer-events: none;
  animation: lumenOrbFloat 9s ease-in-out infinite;
}
.lumen-hero-glow::before {
  width: 340px;
  height: 340px;
  background: var(--gold);
  top: -110px;
  left: -90px;
}
.lumen-hero-glow::after {
  width: 300px;
  height: 300px;
  background: var(--wine);
  bottom: -120px;
  right: -70px;
  animation-delay: -4.5s;
}
@keyframes lumenOrbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-26px) scale(1.07); }
}

.lumen-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid rgba(176, 141, 87, .5);
  border-radius: 999px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
}

.lumen-cards-overlap {
  position: relative;
  z-index: 2;
  margin-top: -56px;
}
@media (max-width: 768px) {
  .lumen-cards-overlap { margin-top: -32px; }
}

.lumen-contact-card {
  background: #fff;
  border-radius: 14px;
  padding: 34px 26px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height: 100%;
}
.lumen-contact-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: var(--gold);
}
.lumen-contact-card .elementor-icon {
  transition: transform .25s ease, background-color .25s ease;
}
.lumen-contact-card:hover .elementor-icon {
  background-color: var(--gold) !important;
  transform: scale(1.08) rotate(-6deg);
}
.lumen-contact-card:hover .elementor-icon i {
  color: #fff !important;
}

.lumen-form-card {
  background: #fff;
  border-radius: 14px;
  padding: 36px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.lumen-contact-form .lumen-field {
  margin-bottom: 18px;
}
.lumen-contact-form label {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 6px;
  font-weight: 600;
  letter-spacing: .3px;
}
.lumen-contact-form input,
.lumen-contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lumen-contact-form input:focus,
.lumen-contact-form textarea:focus {
  outline: none;
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, .15);
}
.lumen-contact-form button[type="submit"] {
  padding: 14px 30px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
}
.lumen-contact-form button[type="submit"]:hover {
  background: var(--gold-dark);
  transform: translateY(-2px);
}

.lumen-map-frame {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.lumen-map-frame iframe {
  display: block;
  width: 100%;
  border: 0;
}

.lumen-gradient-shimmer {
  background: linear-gradient(120deg, var(--ink) 0%, var(--gold-dark) 45%, var(--ink) 100%);
  background-size: 220% 220%;
  animation: lumenShimmer 8s ease infinite;
}
@keyframes lumenShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .lumen-hero-glow::before,
  .lumen-hero-glow::after,
  .lumen-gradient-shimmer {
    animation: none;
  }
}

/* ---------- "Vivid" About Us template: stats, story badge, team ---------- */
.lumen-stats-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 48px;
  margin-top: 36px;
}
.lumen-stat {
  text-align: center;
}
.lumen-stat__num {
  display: block;
  font-family: var(--font-head);
  font-size: 38px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.lumen-stat__label {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #C8C7CD;
}

.lumen-story-media {
  position: relative;
}
.lumen-story-media img {
  border-radius: 16px;
  width: 100%;
  display: block;
}
.lumen-story-badge {
  position: absolute;
  left: -20px;
  bottom: -20px;
  background: #fff;
  border-radius: 12px;
  padding: 16px 22px;
  box-shadow: var(--shadow-hover);
  text-align: center;
}
.lumen-story-badge strong {
  display: block;
  font-family: var(--font-head);
  font-size: 24px;
  color: var(--ink);
  line-height: 1;
}
.lumen-story-badge span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--gray);
}
@media (max-width: 768px) {
  .lumen-story-badge {
    left: 12px;
    bottom: -16px;
    padding: 12px 16px;
  }
}

.lumen-team-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  margin: 0 auto 18px;
  overflow: hidden;
  border: 3px solid var(--sand);
  transition: transform .25s ease, border-color .25s ease;
}
.lumen-team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lumen-contact-card:hover .lumen-team-avatar {
  transform: scale(1.06);
  border-color: var(--gold);
}

/* ---------- "Vivid" FAQs template: quick-nav pills + accordion polish ---------- */
.lumen-pill-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.lumen-pill-link:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #14141A;
}

.lumen-faq-accordion .elementor-accordion-item {
  margin-bottom: 12px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border) !important;
}
.lumen-faq-accordion .elementor-tab-title {
  padding: 18px 22px !important;
  font-weight: 600 !important;
  transition: background-color .2s ease;
}
.lumen-faq-accordion .elementor-tab-title:hover {
  background: var(--sand-soft);
}
.lumen-faq-accordion .elementor-tab-content {
  padding: 4px 22px 20px !important;
  color: var(--gray) !important;
  line-height: 1.7;
}

/* ---------- "Vivid" Privacy Policy template: sticky TOC + reading sections ---------- */
.lumen-toc {
  position: sticky;
  top: 110px;
}
.lumen-toc__list a {
  display: block;
  padding: 10px 0;
  font-size: 13.5px;
  color: var(--gray);
  border-left: 2px solid var(--border);
  padding-left: 16px;
  transition: color .2s ease, border-color .2s ease;
}
.lumen-toc__list a:hover {
  color: var(--ink);
  border-color: var(--gold);
}
@media (max-width: 900px) {
  .lumen-toc {
    position: static;
    margin-bottom: 40px;
  }
}

.lumen-policy-section {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.lumen-policy-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.lumen-policy-section h3 {
  font-size: 20px;
  margin-bottom: 12px;
}
.lumen-policy-section p {
  color: var(--gray);
  font-size: 14.5px;
  line-height: 1.75;
}

/* ---- Shipping & Returns: rates table ---- */
.lumen-ship-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.lumen-ship-table thead th {
  background: var(--ink);
  color: #fff;
  text-align: left;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 16px 20px;
  font-weight: 600;
}
.lumen-ship-table tbody td {
  padding: 16px 20px;
  font-size: 14.5px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--border);
}
.lumen-ship-table tbody tr:last-child td {
  border-bottom: none;
}
.lumen-ship-table tbody tr:nth-child(even) {
  background: var(--sand-soft);
}
.lumen-ship-table tbody td:first-child {
  font-weight: 600;
  color: var(--ink);
}
.lumen-ship-table .lumen-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(176, 141, 87, 0.12);
  color: var(--gold-dark);
}

/* ---- Shipping & Returns: numbered steps row ---- */
.lumen-steps-row {
  display: flex;
  gap: 32px;
  position: relative;
  flex-wrap: wrap;
}
.lumen-step {
  flex: 1 1 200px;
  position: relative;
  text-align: center;
  padding: 0 8px;
}
.lumen-step::before {
  content: "";
  position: absolute;
  top: 26px;
  left: calc(50% + 30px);
  right: calc(-50% + 30px);
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.lumen-step:last-child::before {
  display: none;
}
.lumen-step__num {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  transition: background 0.25s ease, transform 0.25s ease;
}
.lumen-step:hover .lumen-step__num {
  background: var(--gold);
  transform: translateY(-4px);
}
.lumen-step h4 {
  font-size: 16.5px;
  margin: 0 0 8px;
  color: var(--ink);
}
.lumen-step p {
  font-size: 13.5px;
  color: var(--gray);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 767px) {
  .lumen-steps-row {
    flex-direction: column;
    gap: 36px;
  }
  .lumen-step::before {
    display: none;
  }
}

/* ---- Shipping & Returns: policy checklist ---- */
.lumen-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lumen-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.lumen-check-list li:last-child {
  border-bottom: none;
}
.lumen-check-list li::before {
  content: "\2713";
  flex: 0 0 24px;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: var(--sage);
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.lumen-check-list.lumen-check-list--no {
  margin-top: 24px;
}
.lumen-check-list--no li::before {
  content: "\2715";
  background: var(--wine);
}





/* Fix: prevents horizontal swipe/scroll gap on mobile */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}