/* ====================================================================
   Luxuria Moment — Clean Lux Theme (White Canvas + Classic Footer)
   ==================================================================== */

:root{
  --lm-black: #1f2328;
  --lm-text:  #2a2f36;
  --lm-muted: #6b7280;
  --lm-line:  #eaecef;

  --lm-gold:       #c6a664;
  --lm-gold-light: #eadcb9;

  --lm-header-h: 64px;
  --lm-max-w: 1200px;
  --lm-radius: 14px;
}

/* ---------------- Base ---------------- */
html, body { height: 100%; }
* { box-sizing: border-box; }
body{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  color: var(--lm-text);
  background: #ffffff; /* clean white */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-top: var(--lm-header-h);
}
.font-serif{ font-family: 'Playfair Display', Georgia, serif; }
a{ color: inherit; text-decoration: none; }

/* Headings */
h1,h2,h3{ color: var(--lm-black); letter-spacing: .2px; }
h1{ font-family: 'Playfair Display', Georgia, serif; font-weight: 600; line-height: 1.12; }
h2{ font-weight: 600; line-height: 1.18; }
h3{ font-weight: 600; line-height: 1.2; }

p{ line-height: 1.7; color: var(--lm-text); }
.section{ padding: 56px 0; }
.container{ max-width: var(--lm-max-w); margin: 0 auto; padding: 0 20px; }

/* ---------------- Fixed Header ---------------- */
.lm-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--lm-header-h);
  background: rgba(255,255,255,.75);
  border-bottom: 1px solid var(--lm-line);
  backdrop-filter: blur(10px);
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.lm-header.scrolled{
  background: rgba(255,255,255,.95);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Header layout */
.lm-header .bar-inner{
  max-width: var(--lm-max-w);
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 16px;
}

/* Brand */
.lm-brand{
  display:flex; align-items:center; gap:12px;
  color: var(--lm-black);
}
.lm-brand img{ height: 40px; width: auto; display: block; }
.lm-brand .text-gold{ color: var(--lm-gold); }

/* Center Nav */
.lm-primary-nav{
  display: flex; align-items: center; justify-content: center;
  gap: 22px;
}
.lm-navlink{
  position: relative;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 600;
  color: var(--lm-black);
  opacity: .92;
  transition: color .2s ease, opacity .2s ease, transform .2s ease;
}
.lm-navlink:hover{ color: var(--lm-gold); opacity: 1; transform: translateY(-1px); }
.lm-navlink::after{
  content: ""; position: absolute; left: 50%; bottom: 4px;
  width: 0; height: 2px; transform: translateX(-50%);
  border-radius: 2px; background: var(--lm-gold);
  transition: width .25s ease;
}
.lm-navlink:hover::after{ width: 60%; }
.lm-navlink.is-active{ color: var(--lm-gold); opacity: 1; }
.lm-navlink.is-active::after{ width: 70%; }

/* Actions */
.lm-rightcell{ display: flex; align-items: center; justify-content: end; gap: 10px; }
.lm-actions-desktop{ display: flex; align-items: center; gap: 10px; }

/* Buttons */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .95rem;
  padding: .6rem 1.05rem;
  border-radius: .85rem;
  border: 1.4px solid var(--lm-line);
  background: #fff;
  color: var(--lm-black);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.08); border-color: #dadde3; }

/* GLOBAL LM GOLD BUTTON */

.btn-gold {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: .85rem 1.25rem;
  width: 100%;
  font-weight: 600;
  font-size: .95rem;

  /* core luxuria color spec */
  background: linear-gradient(180deg, #D4AF37 0%, #b18d2a 100%); /* darker LM gold */
  color: var(--lm-black) !important;  /* black font */
  border-radius: 0.75rem;
  border: 1px solid #b18d2a;
  transition: all .15s ease;
}

.btn-gold:hover {
  background: linear-gradient(180deg, #c09d33 0%, #9b7a22 100%);
  transform: translateY(-1px);
}

.lm-navbtn{
  display:inline-flex; align-items:center; gap:6px;
  padding:.55rem .95rem; border-radius:.8rem;
  background: #fff;
  border: 1.6px solid rgba(198,166,100,.55);
  color: var(--lm-black);
  box-shadow: 0 2px 8px rgba(198,166,100,.10), inset 0 0 0 1px rgba(255,255,255,.3);
}
.lm-navbtn:hover{ transform: translateY(-1px); border-color: rgba(198,166,100,.8); box-shadow: 0 8px 22px rgba(198,166,100,.28); }

/* Mobile Nav */
#lm-burger{ display: none; }
@media (max-width: 768px){
  .lm-actions-desktop{ display: none; }
  .lm-primary-nav{ display: none; }
  #lm-burger{ display: inline-flex; }
}
#lm-drawer{
  position: fixed; left: 0; right: 0; top: var(--lm-header-h);
  z-index: 999;
  display: none;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lm-line);
}
#lm-drawer.is-open{ display: block; }
#lm-drawer .lm-menulink{
  display: block; padding: .7rem 1rem; border-radius: 10px;
  color: var(--lm-black);
  transition: background .2s ease, color .2s ease;
}
#lm-drawer .lm-menulink:hover{ background: #f6f7f9; color: var(--lm-gold); }

/* ---------------- Cards / Tiles ---------------- */
.lm-card{
  background: #fff; color: var(--lm-text);
  border: 1px solid var(--lm-line);
  border-radius: var(--lm-radius);
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}
.lm-tile{
  border: 1px solid var(--lm-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lm-tile:hover{ transform: translateY(-4px); border-color: #e2e5ea; box-shadow: 0 10px 28px rgba(0,0,0,.10); }

/* ---------------- Footer (previous luxury version restored) ---------------- */
footer{
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(246,243,236,0.9));
  border-top: 1px solid rgba(198,166,100,0.25);
  padding: 2rem 0;
  text-align: center;
  color: var(--lm-black);
  box-shadow: 0 -4px 20px rgba(198,166,100,0.07);
}
footer a{
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  margin: 0 .75rem;
}
footer a::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 0;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--lm-gold);
  transition: width .25s ease;
}
footer a:hover{ color: var(--lm-gold); }
footer a:hover::after{ width: 60%; }

/* ---------------- Reveal Animation ---------------- */
.reveal{ opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ---------------- Utilities ---------------- */
.text-gold{ color: var(--lm-gold); }

/* =========================
   Nav button alignment fix
   ========================= */

/* Make header buttons compact, same height, and baseline-aligned */
.lm-header .btn,
.lm-header .lm-navbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 36px;           /* consistent compact height */
  min-height: 36px;
  padding: 0 12px;        /* slimmer padding */
  border-radius: 10px;    /* less pill-y */
  line-height: 1;
  margin: 0;              /* ensure no accidental vertical shift */
  box-shadow: 0 1px 6px rgba(0,0,0,.08);   /* subtle */
  border-width: 1px;      /* lighter edge */
}

/* Tone down the gold CTA inside the header */
.lm-header .btn-gold{
  border-color: rgba(198,166,100,.45);
  background: linear-gradient(135deg, var(--lm-gold), var(--lm-gold-light));
  color: #fff;
  box-shadow: 0 2px 10px rgba(198,166,100,.22);   /* smaller glow */
}

/* Remove the heavy “framed” look inside header */
.lm-header .btn-framed{
  border-width: 1px !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.08) !important;
}

/* Account button should look like a clean control, not an input */
.lm-header .lm-navbtn{
  background: #fff;                           /* flat white */
  border-color: rgba(198,166,100,.35);
  box-shadow: 0 1px 3px rgba(0,0,0,.06), inset 0 0 0 0 rgba(255,255,255,0);
}
.lm-header .lm-navbtn:hover{
  transform: translateY(-1px);
  border-color: rgba(198,166,100,.55);
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
}

/* Keep spacing on the right tidy */
.lm-rightcell{ gap: 12px; }

/* Optional: keep the header’s bottom border from “fighting” the controls’ shadows */
.lm-header{
  border-bottom-color: rgba(198,166,100,0.18);
}
/* ============================================================
   NAV: make CTA + account control feel integrated with the bar
   ============================================================ */

/* Same compact height + padding for both controls */
.lm-header .btn,
.lm-header .lm-navbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;              /* compact, aligns with nav text */
  min-height:36px;
  padding:0 12px;           /* slimmer padding */
  line-height:1;
  border-radius:10px;       /* less pill-y */
  margin:0;
  vertical-align:middle;
}

/* Tone down the gold CTA so it doesn't overpower the nav */
.lm-header .btn-gold{
  border:1px solid rgba(198,166,100,.45);
  background:linear-gradient(135deg,var(--lm-gold),var(--lm-gold-light));
  color:#fff;
  box-shadow:0 2px 10px rgba(198,166,100,.18);
}
.lm-header .btn-framed{      /* remove the heavy double-framed look in header */
  border-width:1px !important;
  box-shadow:0 1px 6px rgba(0,0,0,.08) !important;
}

/* Account button: look like a clean control, not an input */
.lm-header .lm-navbtn{
  background:#fff;
  border:1px solid rgba(198,166,100,.35);
  color:var(--lm-black);
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  gap:8px;                  /* space between name and chevron */
}
.lm-header .lm-navbtn svg{  /* keep chevron vertically centered and subtle */
  width:16px; height:16px; opacity:.65;
}
.lm-header .lm-navbtn:hover{
  transform:translateY(-1px);
  border-color:rgba(198,166,100,.55);
  box-shadow:0 4px 12px rgba(0,0,0,.10);
}

/* Consistent spacing on the right group */
.lm-rightcell{ gap:12px !important; }

/* Ensure the logo and brand don't force tall header */
.lm-brand img{
  height:40px; width:auto; display:block;
}
.lm-header .bar-inner{ align-items:center; }

/* Optional: when header gains tint, keep controls crisp */
.lm-header.scrolled .lm-navbtn{ background:#fff; }

/* Tighten the right side spacing a bit */
.lm-rightcell { gap: 10px; }
.lm-actions   { display:flex; align-items:center; gap:10px; }

/* Compact, elegant CTA */
.lm-cta-new{
  display:inline-flex; align-items:center; gap:6px;
  height:32px;                 /* smaller */
  min-height:32px;
  padding:0 10px;              /* slimmer */
  border-radius:8px;           /* less pill-y */
  font-weight:600; font-size:.90rem; line-height:1;
  white-space:nowrap;          /* never wraps to a new line */
  color:#fff; text-decoration:none;

  background:linear-gradient(135deg,var(--lm-gold),var(--lm-gold-light));
  border:1px solid rgba(198,166,100,.45);
  box-shadow:0 2px 8px rgba(198,166,100,.18);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.lm-cta-new__icon{ width:16px; height:16px; opacity:.95; display:block; }
.lm-cta-new:hover{ transform:translateY(-1px); filter:brightness(1.04); box-shadow:0 6px 14px rgba(198,166,100,.24); }

/* Keep the account button visually balanced with the new CTA */
.lm-header .lm-navbtn{
  height:32px; min-height:32px; padding:0 10px; border-radius:8px;
  gap:8px; font-size:.92rem;
}

/* Prevent crowding: on medium screens keep CTA icon-only */
@media (max-width: 1024px){
  .lm-cta-new__label{ display:none; }
  .lm-cta-new{ padding:0 8px; }            /* a little tighter when icon-only */
}

/* On mobile, hide the CTA in the top bar (it's in the drawer already) */
@media (max-width: 768px){
  .lm-cta-new{ display:none; }
}