/* =====================================================================
   Lumière — Foundation layer (Phase 1)
   Design tokens · typography · global chrome · base components
   Loads AFTER core stylesheet.css, so these rules take precedence.
   ===================================================================== */

/* ---------- TOKENS ---------- */
:root{
  /* warm neutrals */
  --lum-bg:#F6F2EA;
  --lum-surface:#FCFAF4;
  --lum-surface-2:#EFE8DB;
  --lum-ink:#211C16;
  --lum-ink-2:#6E6559;
  --lum-line:#E3DACB;
  --lum-shadow:0 1px 2px rgba(33,28,22,.05), 0 14px 34px -14px rgba(33,28,22,.16);
  --lum-shadow-lg:0 24px 50px -20px rgba(33,28,22,.28);

  /* Clay accent */
  --lum-accent:#C0774E;
  --lum-accent-deep:#A65E38;
  --lum-accent-tint:rgba(192,119,78,.12);
  --lum-accent-line:rgba(192,119,78,.32);
  --lum-gold:#B08A5B;
  --lum-ok:#5E7F55;

  --lum-radius:14px;
  --lum-radius-s:9px;
  --lum-ease:cubic-bezier(.22,.61,.36,1);

  /* map Bootstrap theme onto Lumière so all BS components inherit the accent */
  --bs-primary:#C0774E;
  --bs-primary-rgb:192,119,78;
  --bs-link-color:#A65E38;
  --bs-link-color-rgb:166,94,56;
  --bs-link-hover-color:#C0774E;
  --bs-body-color:#211C16;
  --bs-body-bg:#F6F2EA;
  --bs-border-radius:12px;
  --bs-font-sans-serif:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
html.lumiere-dark{
  --lum-bg:#17120E;
  --lum-surface:#201A15;
  --lum-surface-2:#2A231B;
  --lum-ink:#F1EADF;
  --lum-ink-2:#A99D8D;
  --lum-line:#332A20;
  --lum-shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -16px rgba(0,0,0,.6);
  --lum-shadow-lg:0 26px 54px -20px rgba(0,0,0,.7);
  --bs-body-color:#F1EADF;
  --bs-body-bg:#17120E;
  --bs-border-color:#332A20;
}

/* ---------- BASE ---------- */
body{
  background:var(--lum-bg)!important;
  color:var(--lum-ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:450;
  line-height:1.6;
  letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
  transition:background .4s var(--lum-ease), color .4s var(--lum-ease);
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5{
  font-family:"Fraunces",Georgia,serif;
  color:var(--lum-ink);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.1;
  text-wrap:balance;
}
a{color:var(--lum-accent-deep); text-decoration:none; transition:color .2s var(--lum-ease)}
a:hover{color:var(--lum-accent)}
::selection{background:var(--lum-accent-tint)}
:focus-visible{outline:2px solid var(--lum-accent); outline-offset:2px; border-radius:4px}
hr{border-color:var(--lum-line)}

/* ---------- TOP BAR ---------- */
#top{
  background:var(--lum-ink);
  color:var(--lum-surface);
  font-size:13px;
  border:0;
  padding:9px 0;
}
#top a,#top .dropdown-toggle{color:var(--lum-surface)!important}
#top a:hover{color:var(--lum-accent)!important}
html.lumiere-dark #top{background:#0F0C09}

/* ---------- HEADER ---------- */
header{background:var(--lum-surface); border-bottom:1px solid var(--lum-line); padding:14px 0}
#logo h1{font-size:30px; margin:0}
#logo a{color:var(--lum-ink)!important; letter-spacing:-.02em}
.is-stuck header{position:sticky; top:0; z-index:1020; box-shadow:var(--lum-shadow)}

/* search + inputs */
.form-control,.form-select{
  border-radius:var(--lum-radius-s);
  border:1px solid var(--lum-line);
  background:var(--lum-surface);
  color:var(--lum-ink);
  padding:.6rem .85rem;
  transition:border-color .2s, box-shadow .2s;
}
.form-control::placeholder{color:var(--lum-ink-2)}
.form-control:focus,.form-select:focus{
  border-color:var(--lum-accent);
  box-shadow:0 0 0 4px var(--lum-accent-tint);
  background:var(--lum-surface);
  color:var(--lum-ink);
}

/* ---------- BUTTONS (drive Bootstrap vars) ---------- */
.btn{border-radius:26px; font-weight:600; letter-spacing:.01em; padding:.62rem 1.3rem; transition:transform .18s var(--lum-ease), box-shadow .25s, background .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{
  --bs-btn-bg:var(--lum-accent); --bs-btn-border-color:var(--lum-accent);
  --bs-btn-hover-bg:var(--lum-accent-deep); --bs-btn-hover-border-color:var(--lum-accent-deep);
  --bs-btn-active-bg:var(--lum-accent-deep); --bs-btn-active-border-color:var(--lum-accent-deep);
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff;
  box-shadow:0 8px 20px -10px var(--lum-accent);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 26px -10px var(--lum-accent)}
.btn-secondary,.btn-light,.btn-default{
  --bs-btn-bg:transparent; --bs-btn-border-color:var(--lum-line);
  --bs-btn-color:var(--lum-ink); --bs-btn-hover-bg:var(--lum-accent-tint);
  --bs-btn-hover-border-color:var(--lum-accent); --bs-btn-hover-color:var(--lum-accent-deep);
}

/* ---------- PRODUCT CARDS ---------- */
.product-thumb{
  background:var(--lum-surface);
  border:1px solid var(--lum-line);
  border-radius:var(--lum-radius);
  overflow:hidden;
  box-shadow:var(--lum-shadow);
  transition:transform .3s var(--lum-ease), box-shadow .3s var(--lum-ease);
  height:100%;
}
.product-thumb:hover{transform:translateY(-6px); box-shadow:var(--lum-shadow-lg)}
.product-thumb .image{overflow:hidden; background:var(--lum-surface-2)}
.product-thumb .image img{transition:transform .5s var(--lum-ease); width:100%}
.product-thumb:hover .image img{transform:scale(1.06)}
.product-thumb .caption{padding:16px}
.product-thumb .caption h4{font-size:17px; margin-bottom:6px}
.product-thumb .caption h4 a{color:var(--lum-ink)!important}
.product-thumb .price{color:var(--lum-ink); font-weight:600; font-family:"Inter"; font-variant-numeric:tabular-nums}
.product-thumb .price-old{color:var(--lum-ink-2); text-decoration:line-through; font-weight:450}
.product-thumb .price-new{color:var(--lum-accent-deep)}
.product-thumb .rating{color:var(--lum-accent)}
.product-thumb .button-group{border-top:1px solid var(--lum-line); background:var(--lum-surface)}

/* generic cards / panels */
.card{background:var(--lum-surface); border:1px solid var(--lum-line); border-radius:var(--lum-radius); box-shadow:var(--lum-shadow)}
.list-group-item{background:var(--lum-surface); border-color:var(--lum-line); color:var(--lum-ink)}

/* ---------- FOOTER ---------- */
footer{background:var(--lum-ink); color:var(--lum-surface); margin-top:60px; padding:56px 0 30px}
footer h5,footer h4{color:var(--lum-surface); font-family:"Fraunces"; margin-bottom:16px}
footer a{color:rgba(255,255,255,.72)}
footer a:hover{color:var(--lum-accent)}
html.lumiere-dark footer{background:#0F0C09; border-top:1px solid var(--lum-line)}

/* ---------- ALERTS / BADGES ---------- */
.alert{border-radius:var(--lum-radius-s); border:1px solid var(--lum-line)}
.badge.bg-primary{background:var(--lum-accent)!important}

/* ---------- LOADERS: skeleton + top progress ---------- */
.lum-skel{border-radius:8px; background:linear-gradient(90deg,var(--lum-surface-2) 25%,var(--lum-line) 37%,var(--lum-surface-2) 63%); background-size:400% 100%; animation:lum-shimmer 1.4s infinite linear}
@keyframes lum-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
#lum-progress{position:fixed; top:0; left:0; height:2px; width:0; background:var(--lum-accent); z-index:3000; transition:width .3s var(--lum-ease), opacity .3s; box-shadow:0 0 8px var(--lum-accent)}

/* ---------- SCROLL REVEAL ---------- */
html.lum-js .lum-reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--lum-ease), transform .7s var(--lum-ease)}
html.lum-js .lum-reveal.in{opacity:1; transform:none}

/* ---------- UTILITY CONTROLS (dark toggle, back-to-top) ---------- */
.lum-toggle{background:transparent; border:0; color:inherit; cursor:pointer; font-size:14px; padding:0 4px; line-height:1; opacity:.85; transition:opacity .2s, transform .2s}
.lum-toggle:hover{opacity:1; transform:scale(1.1)}
#lum-top{position:fixed; right:20px; bottom:20px; width:44px; height:44px; border-radius:50%; border:1px solid var(--lum-line); background:var(--lum-surface); color:var(--lum-ink); box-shadow:var(--lum-shadow); cursor:pointer; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .3s var(--lum-ease), transform .3s var(--lum-ease), background .2s; z-index:1030; display:grid; place-items:center; font-size:18px}
#lum-top.show{opacity:1; transform:none; pointer-events:auto}
#lum-top:hover{background:var(--lum-accent); color:#fff; border-color:var(--lum-accent)}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; transition-duration:.001ms!important}
  html.lum-js .lum-reveal{opacity:1!important; transform:none!important}
  .lum-skel{animation:none}
}

/* =====================================================================
   PHASE 2 — GLOBAL CHROME (header, mega-menu, cart drawer, footer)
   ===================================================================== */

/* ---- Search as a pill ---- */
#search .input-group{border-radius:30px; overflow:hidden; background:var(--lum-surface); border:1px solid var(--lum-line); box-shadow:var(--lum-shadow); margin-bottom:0}
#search .form-control{border:0!important; background:transparent; padding-left:1.15rem; box-shadow:none!important}
#search .btn{border:0; border-radius:0; background:var(--lum-accent); color:#fff; padding-inline:1.25rem}
#search .btn:hover{background:var(--lum-accent-deep); color:#fff}

/* ---- Mega menu ---- */
#menu.navbar{background:transparent!important; border-top:1px solid var(--lum-line); border-bottom:1px solid var(--lum-line); padding:0; margin-top:8px; border-radius:0}
#menu .navbar-nav{gap:0; margin:0 auto; justify-content:center; flex-wrap:wrap}
#menu .nav-link{color:var(--lum-ink)!important; font-family:"Inter"; font-weight:500; font-size:14.5px; padding:14px 18px!important; position:relative}
#menu .nav-item > .nav-link::after{content:""; position:absolute; left:18px; right:18px; bottom:8px; height:2px; background:var(--lum-accent); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--lum-ease)}
#menu .nav-item:hover > .nav-link::after,#menu .nav-item.show > .nav-link::after{transform:scaleX(1)}
#menu .dropdown-toggle::after{display:none}
#menu #category{color:var(--lum-ink); font-family:"Fraunces"; font-size:18px; padding:10px 0}
@media (min-width:992px){
  #menu .nav-item.dropdown{position:static}
  #menu .dropdown-menu{
    left:0; right:0; width:100%; margin:0; border:0; border-top:1px solid var(--lum-line);
    border-radius:0 0 var(--lum-radius) var(--lum-radius); box-shadow:var(--lum-shadow-lg);
    background:var(--lum-surface); padding:28px 32px; display:block; opacity:0; visibility:hidden;
    transform:translateY(10px); transition:opacity .25s var(--lum-ease), transform .25s var(--lum-ease), visibility .25s; pointer-events:none;
  }
  #menu .nav-item.dropdown:hover .dropdown-menu{opacity:1; visibility:visible; transform:none; pointer-events:auto}
  #menu .dropdown-inner{display:flex; gap:48px; flex-wrap:wrap; max-width:1140px; margin:0 auto}
}
#menu .dropdown-inner ul{margin:0}
#menu .dropdown-item{color:var(--lum-ink-2)!important; padding:6px 0; font-size:14px; background:transparent!important; transition:padding .2s var(--lum-ease), color .2s}
#menu .dropdown-item:hover{color:var(--lum-accent-deep)!important; padding-left:6px}
@media (max-width:991px){
  #menu .navbar-toggler{border:1px solid var(--lum-line); color:var(--lum-ink); border-radius:10px; margin:8px 0}
  #menu #navbar-menu{background:var(--lum-surface); border-radius:var(--lum-radius); margin:8px 0; padding:10px; box-shadow:var(--lum-shadow)}
  #menu .nav-link{padding:12px 14px!important}
  #menu .dropdown-menu{border:0; box-shadow:none; background:var(--lum-surface-2); border-radius:10px; margin:4px 0; padding:10px}
}

/* ---- Cart drawer ---- */
#cart .btn-dark{background:var(--lum-ink); border:0; border-radius:26px}
#cart .btn-dark:hover{background:var(--lum-accent)}
#lum-overlay{position:fixed; inset:0; background:rgba(20,15,10,.45); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .35s var(--lum-ease), visibility .35s; z-index:1040}
#lum-overlay.show{opacity:1; visibility:visible}
#cart .dropdown-menu{
  position:fixed!important; top:0!important; right:0!important; left:auto!important; bottom:auto!important;
  transform:translateX(100%)!important; width:min(410px,92vw); max-width:none; height:100vh; margin:0!important;
  border:0!important; border-radius:0!important; box-shadow:var(--lum-shadow-lg); background:var(--lum-surface);
  padding:0!important; overflow-y:auto; display:block!important; visibility:hidden;
  transition:transform .42s var(--lum-ease), visibility .42s; z-index:1050;
}
#cart .dropdown-menu.show{transform:translateX(0)!important; visibility:visible}
#cart .dropdown-menu::before{content:"Your bag"; display:block; font-family:"Fraunces"; font-size:22px; color:var(--lum-ink); padding:24px 24px 16px; border-bottom:1px solid var(--lum-line)}
#cart .dropdown-menu > li{padding:18px 22px}
#cart .table{color:var(--lum-ink); margin-bottom:1rem}
#cart .table-striped>tbody>tr:nth-of-type(odd)>*{background:transparent}
#cart .table img.img-thumbnail{border-radius:8px; border:1px solid var(--lum-line); padding:3px}
#cart .dropdown-menu p.text-end{display:flex; gap:10px; margin:14px 0 0}
#cart .dropdown-menu p.text-end a{flex:1; text-align:center; padding:12px; border-radius:24px; background:var(--lum-accent-tint); color:var(--lum-accent-deep)!important; font-family:"Inter"; font-weight:600}
#cart .dropdown-menu p.text-end a:last-child{background:var(--lum-accent); color:#fff!important}
.lum-drawer-close{position:absolute; top:20px; right:20px; background:transparent; border:0; font-size:24px; line-height:1; color:var(--lum-ink-2); cursor:pointer; z-index:3}
.lum-drawer-close:hover{color:var(--lum-accent)}

/* ---- Footer: fixed light text (footer ground is always dark) ---- */
footer{color:#E6DDCE}
footer h5,footer h4{color:#F3ECE0; font-family:"Fraunces"; font-weight:500}
footer a{color:rgba(255,255,255,.7)}
footer a:hover{color:var(--lum-accent)}
.lum-newsletter{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--lum-radius); padding:32px; display:flex; gap:26px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:0 0 44px}
.lum-newsletter h3{font-family:"Fraunces"; font-size:25px; color:#F3ECE0; margin:0 0 4px}
.lum-newsletter p{color:rgba(255,255,255,.6); margin:0; font-size:14px}
.lum-news-form{display:flex; gap:10px; flex:1; min-width:280px; max-width:470px}
.lum-news-form input{flex:1; border-radius:26px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); padding:.72rem 1.15rem; color:#fff}
.lum-news-form input::placeholder{color:rgba(255,255,255,.5)}
.lum-news-form input:focus{outline:none; border-color:var(--lum-accent); box-shadow:0 0 0 4px var(--lum-accent-tint)}
.lum-trust{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:0 0 40px; padding:26px 0; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12)}
.lum-trust div{display:flex; gap:13px; align-items:center}
.lum-trust i{font-size:22px; color:var(--lum-accent)}
.lum-trust b{display:block; font-family:"Fraunces"; font-weight:500; font-size:15px; color:#F3ECE0}
.lum-trust span{font-size:12px; color:rgba(255,255,255,.55)}
.lum-footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px}
.lum-pay{display:flex; gap:13px; align-items:center; font-size:27px; color:rgba(255,255,255,.72); flex-wrap:wrap}
.lum-pay .pill{font-size:11px; letter-spacing:.07em; border:1px solid rgba(255,255,255,.3); border-radius:6px; padding:4px 9px; font-family:"Inter"; font-weight:600}
@media (max-width:767px){ .lum-trust{grid-template-columns:1fr 1fr} .lum-newsletter{padding:24px} }

/* ---- Toast ---- */
#lum-toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,140%); background:var(--lum-ink); color:var(--lum-surface); padding:13px 22px; border-radius:30px; box-shadow:var(--lum-shadow-lg); z-index:3000; font-size:14px; font-weight:500; opacity:0; transition:transform .4s var(--lum-ease), opacity .4s; max-width:90vw}
#lum-toast.show{transform:translate(-50%,0); opacity:1}
#lum-toast i{color:var(--lum-accent); margin-right:7px}