:root{
  --paper:#f3ebde;--paper2:#fff9f0;--ink:#31251f;--muted:#776960;
  --wine:#81251f;--wine2:#591712;--red:#aa302b;--gold:#c89b4d;
  --line:#d8c7a8;--province:#d7cab3;--white:#fffdf8;
  --display:"Noto Serif",Georgia,"Times New Roman",serif;--body:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.04;background-image:radial-gradient(circle,#5d4939 0 .5px,transparent .6px);background-size:22px 22px}
.shell{width:min(1280px,calc(100% - 44px));margin:auto}.topline{background:var(--wine2);color:#efd8a4;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.topline-inner{height:29px;display:flex;align-items:center;justify-content:space-between}
.site-header{position:sticky;top:0;z-index:80;background:rgba(255,249,240,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.header-inner{height:82px;display:grid;grid-template-columns:260px 1fr auto;align-items:center;gap:22px}.brand{display:flex;align-items:center;gap:11px}.brand img{width:44px;height:44px;border-radius:50%;object-fit:cover}.brand b{display:block;font:400 20px/1 var(--display)}.brand small{display:block;margin-top:4px;font-size:8px;font-weight:800;letter-spacing:.1em;color:var(--muted)}
.desktop-nav{display:flex;justify-content:center;gap:29px}.desktop-nav a{font-size:10px;font-weight:800;letter-spacing:.11em;white-space:nowrap}.desktop-nav a.active{color:var(--wine)}
.header-actions{display:flex;gap:8px;align-items:center}.icon-btn,.menu-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--wine);font-size:10px;font-weight:800}.account-btn{height:36px;padding:0 13px;background:var(--wine);color:#fff;border:1px solid var(--wine);font-size:9px;font-weight:800;letter-spacing:.08em}.menu-btn{display:none}.mobile-nav{display:none;padding:0 14px 12px;gap:8px;overflow:auto}.mobile-nav a{white-space:nowrap;border:1px solid var(--line);background:#fff;padding:9px 11px;font-size:9px;font-weight:800;letter-spacing:.08em}.mobile-nav a.active{background:var(--wine);border-color:var(--wine);color:#fff}
.eyebrow{font-size:9px;font-weight:800;letter-spacing:.18em;color:var(--wine);text-transform:uppercase}.eyebrow.light{color:#efc976}
.intro{padding:61px 0 35px;position:relative;overflow:hidden}.intro:after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;border:1px solid rgba(200,155,77,.14);right:-190px;top:-260px;box-shadow:0 0 0 36px rgba(200,155,77,.025),0 0 0 76px rgba(129,37,31,.018)}
.intro-grid{display:grid;grid-template-columns:1.14fr .86fr;gap:56px;align-items:end;position:relative;z-index:2}.intro h1{font:400 clamp(54px,5.6vw,80px)/.94 var(--display);margin:11px 0 19px}.intro p{max-width:760px;margin:0;color:var(--muted);font-size:14px;line-height:1.8}
.journey-summary{background:rgba(255,253,248,.9);border:1px solid var(--line);padding:24px;position:relative}.journey-summary:before,.journey-summary:after{content:"";position:absolute;width:23px;height:23px}.journey-summary:before{top:7px;left:7px;border-left:1px solid var(--gold);border-top:1px solid var(--gold)}.journey-summary:after{right:7px;bottom:7px;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.journey-number{display:flex;align-items:baseline;gap:9px;margin-top:15px}.journey-number strong{font:400 54px var(--display);color:var(--wine)}.journey-number span{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.progress{height:5px;background:#eadfce;margin:10px 0 15px}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--wine),var(--gold));width:5.88%;transition:.25s}.summary-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:transparent;padding:11px 13px;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.btn.primary{background:var(--wine);border-color:var(--wine);color:#fff}.btn.full{width:100%}.btn:hover{background:#fff}.btn.primary:hover{background:#6b1e1a}
.atlas{padding:10px 0 30px}.atlas-frame{border:1px solid var(--line);background:#f8f0e2;box-shadow:0 22px 58px rgba(73,48,29,.1);position:relative}.atlas-frame:before{content:"";position:absolute;inset:8px;border:1px solid rgba(200,155,77,.2);pointer-events:none;z-index:6}
.atlas-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 20px 17px;background:var(--paper2);border-bottom:1px solid var(--line);position:relative;z-index:7}.atlas-heading h2{font:400 31px var(--display);margin:3px 0 0}.atlas-heading p{margin:4px 0 0;color:var(--muted);font-size:10px}
.map-controls{display:flex;gap:7px}.map-controls button{width:37px;height:35px;background:#fff;border:1px solid var(--line);color:var(--wine);font-weight:800}
.atlas-toolbar{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:10px 16px;background:#fbf6ed;border-bottom:1px solid var(--line);position:relative;z-index:7}.legend{display:flex;gap:16px;flex-wrap:wrap}.legend span{display:flex;align-items:center;gap:6px;font-size:8px;font-weight:800;letter-spacing:.06em;color:var(--muted)}.dot{width:8px;height:8px;border-radius:50%;border:1px solid rgba(60,40,25,.15)}.dot.unlocked{background:var(--red)}.dot.unlockable{background:var(--gold)}.dot.soon{background:var(--province)}
.map-search{position:relative;width:min(280px,100%)}.map-search input{width:100%;height:34px;border:1px solid var(--line);background:#fff;padding:0 11px 0 31px;outline:none;font-size:10px}.map-search span{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--wine)}
.map-stage{display:grid;grid-template-columns:minmax(0,1.62fr) 350px;min-height:735px}.map-area{position:relative;overflow:hidden;background:linear-gradient(rgba(81,61,42,.052) 1px,transparent 1px),linear-gradient(90deg,rgba(81,61,42,.052) 1px,transparent 1px),#eae1d1;background-size:52px 52px;touch-action:none;cursor:grab}.map-area.dragging{cursor:grabbing}#vnMap{width:100%;height:100%;display:block;user-select:none}.province{fill:var(--province);stroke:#fffdf8;stroke-width:1.35;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .13s,opacity .13s,filter .13s}.province:hover,.province:focus{fill:#ead8b1;outline:none;filter:drop-shadow(0 2px 2px rgba(63,39,24,.18))}.province.unlocked{fill:var(--red)}.province.unlockable{fill:var(--gold)}.province.selected{stroke:var(--wine2);stroke-width:2.8;filter:drop-shadow(0 4px 6px rgba(76,31,21,.25))}.province.dimmed{opacity:.18}.map-label{font:800 10px var(--body);letter-spacing:.07em;fill:#fff;pointer-events:none;paint-order:stroke;stroke:rgba(91,29,25,.28);stroke-width:1px}.sea-label{font:800 11px var(--body);letter-spacing:.27em;fill:var(--wine)}.island-ring{fill:none;stroke:var(--wine);stroke-width:1.25;stroke-dasharray:5 4}.island-line{stroke:var(--wine);stroke-width:1.25}.island-text{font:800 10px var(--body);letter-spacing:.1em;fill:var(--wine)}
.map-tip{position:absolute;display:none;pointer-events:none;background:#2f211b;color:#fff;padding:7px 9px;font-size:9px;z-index:12;box-shadow:0 8px 20px rgba(0,0,0,.16)}.compass{position:absolute;left:18px;bottom:18px;width:67px;height:67px;border-radius:50%;border:1px solid rgba(129,37,31,.24);background:rgba(255,249,240,.76);display:grid;place-items:center;color:var(--wine)}.compass span{position:absolute;top:5px;font-size:7px;font-weight:800}.compass b{font:400 27px var(--display)}
.place-card{background:#fffaf2;border-left:1px solid var(--line);display:flex;flex-direction:column;position:relative;z-index:7}.place-image-wrap{height:260px;background:#eee4d3;border-bottom:1px solid var(--line);position:relative;overflow:hidden}.place-image-wrap img{width:100%;height:100%;object-fit:cover}.collection-tag{position:absolute;left:14px;top:14px;background:rgba(255,250,242,.95);border:1px solid var(--line);padding:7px 9px;font-size:8px;font-weight:800;letter-spacing:.1em;color:var(--wine)}.place-content{padding:24px;position:relative;display:flex;flex-direction:column;flex:1}.place-status{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;border:1px solid var(--line);padding:7px 9px;font-size:8px;font-weight:800;letter-spacing:.09em}.place-status:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--province)}.place-status.unlocked:before{background:var(--red)}.place-status.unlockable:before{background:var(--gold)}.place-index{position:absolute;right:22px;top:23px;font:400 19px var(--display);color:#ad9473}.place-content h3{font:400 40px/1 var(--display);margin:14px 0 5px}.place-subtitle{font:italic 18px var(--display);color:var(--muted);margin:0 0 14px}.place-desc{font-size:11px;line-height:1.72;color:var(--muted);margin:0}.place-actions{display:grid;gap:8px;margin-top:auto;padding-top:20px}
.mobile-sheet{display:none}.province-section{padding-top:20px}.province-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:12px}.province-heading h2{font:400 36px var(--display);margin:4px 0 0}.filters{display:flex;gap:6px;flex-wrap:wrap}.filters button{border:1px solid var(--line);background:#fff;padding:9px 10px;font-size:8px;font-weight:800;letter-spacing:.08em;color:var(--muted)}.filters button.active{background:var(--wine);border-color:var(--wine);color:#fff}.province-grid{display:grid;grid-template-columns:repeat(6,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}.province-card{min-height:72px;padding:10px;background:#fbf7ef;border-right:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer}.province-card:hover{background:#fff}.province-card.selected{background:#efe0c7;box-shadow:inset 0 0 0 1px var(--gold)}.province-card.hidden{display:none}.province-card .num{font-size:7px;color:#a58c6b}.province-card b{display:block;font:400 13px var(--display);margin:5px 0 3px}.province-card small{font-size:7px;font-weight:800;letter-spacing:.08em;color:var(--muted)}.province-card.unlocked b,.province-card.unlocked small{color:var(--wine)}
.experience{padding:48px 0 70px}.experience-card{display:grid;grid-template-columns:.9fr 1.1fr;border:1px solid var(--line);background:#fff}.experience-copy{padding:44px;background:var(--wine2);color:#fff;position:relative;overflow:hidden}.experience-copy:after{content:"";position:absolute;right:-92px;bottom:-92px;width:220px;height:220px;border-radius:50%;border:1px solid rgba(235,204,132,.2);box-shadow:0 0 0 27px rgba(235,204,132,.03)}.experience-copy h2{font:400 46px/1.01 var(--display);margin:10px 0 15px}.experience-copy p{max-width:500px;color:#ddcbc0;font-size:12px;line-height:1.7}.experience-steps{display:grid;grid-template-rows:repeat(3,1fr)}.experience-steps article{display:grid;grid-template-columns:48px 125px 1fr;gap:16px;align-items:center;padding:24px 30px;border-bottom:1px solid var(--line)}.experience-steps article:last-child{border-bottom:0}.experience-steps b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#f1e4d2;color:var(--wine);font-size:9px}.experience-steps strong{font-size:9px;letter-spacing:.11em;color:var(--wine)}.experience-steps p{font-size:11px;color:var(--muted);line-height:1.58}
.footer{background:var(--wine2);color:#ddcdc1;padding:40px 0 30px}.footer-grid{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:35px}.footer-brand b{color:#fff}.footer-brand small{color:#bca89d}.footer-grid>div>strong{display:block;color:#efca73;font-size:9px;letter-spacing:.11em;margin-bottom:11px}.footer a,.footer span{display:block;font-size:10px;line-height:1.9}
.modal-backdrop{display:none;position:fixed;inset:0;z-index:200;background:rgba(35,21,16,.64);place-items:center;padding:18px}.modal-backdrop.show{display:grid}.modal{width:min(430px,100%);background:var(--paper2);border:1px solid var(--line);padding:27px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.28)}.modal-close{position:absolute;right:11px;top:9px;border:0;background:transparent;color:var(--wine);font-size:21px}.modal h3{font:400 35px var(--display);margin:9px 0}.modal p{font-size:11px;line-height:1.6;color:var(--muted)}.modal input{width:100%;height:43px;border:1px solid var(--line);background:#fff;padding:0 11px;outline:none;margin:10px 0}.demo-code{background:#f0e3cd;border-left:2px solid var(--gold);padding:9px;font-size:9px;color:var(--muted)}.form-message{min-height:16px;margin-bottom:0!important}
@media(max-width:1000px){.header-inner{grid-template-columns:1fr auto}.desktop-nav{display:none}.menu-btn{display:block}.intro-grid{grid-template-columns:1fr}.map-stage{grid-template-columns:1fr}.place-card{display:none}.province-grid{grid-template-columns:repeat(4,1fr)}.experience-card{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){
  .shell{width:min(100% - 28px,1280px)}.topline-inner span:last-child{display:none}.header-inner{height:69px;grid-template-columns:1fr auto}.brand img{width:38px;height:38px}.brand b{font-size:18px}.account-btn{display:none}.mobile-nav.open{display:flex}.intro{padding:30px 0 22px}.intro h1{font-size:43px}.intro p{font-size:11px}.journey-summary{padding:17px}.journey-number strong{font-size:39px}.atlas-heading{padding:14px;align-items:flex-start}.atlas-heading h2{font-size:25px}.atlas-heading p{display:none}.atlas-toolbar{display:block;padding:10px 12px}.map-search{width:100%;margin-top:10px}.map-stage{display:block}.map-area{height:550px}.atlas-frame:before{display:none}.mobile-sheet{display:block;position:sticky;bottom:0;z-index:40;background:rgba(255,249,240,.98);border-top:1px solid var(--line);padding:12px 15px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -14px 30px rgba(56,37,24,.12)}.mobile-sheet.closed{display:none}.sheet-handle{width:38px;height:4px;background:#d5c5aa;border-radius:4px;margin:0 auto 10px}.sheet-row{display:flex;justify-content:space-between;gap:14px}.sheet-row h3{font:400 29px var(--display);margin:7px 0 2px}.sheet-row p{margin:0;font:italic 14px var(--display);color:var(--muted)}.sheet-close{border:0;background:transparent;color:var(--wine);font-size:18px}.sheet-actions{display:flex;gap:7px;margin-top:11px}.sheet-actions .btn{flex:1;padding:10px 7px}.province-heading{display:block}.filters{overflow:auto;flex-wrap:nowrap;margin-top:10px;scrollbar-width:none}.filters::-webkit-scrollbar{display:none}.filters button{white-space:nowrap}.province-grid{grid-template-columns:repeat(2,1fr)}.experience{padding:35px 0 50px}.experience-copy{padding:28px}.experience-copy h2{font-size:37px}.experience-steps article{grid-template-columns:42px 95px 1fr;padding:18px}.footer-grid{grid-template-columns:1fr}
}

.place-image-wrap.empty{display:grid;place-items:center;background:radial-gradient(circle at center,rgba(200,155,77,.15),transparent 40%),repeating-radial-gradient(circle at 72% 100%,transparent 0 24px,rgba(129,37,31,.05) 25px 26px,transparent 27px 48px),#eee4d3}
.place-image-wrap.empty:after{content:"✦";font:400 62px var(--display);color:rgba(129,37,31,.2)}

/* v5.2 — Click province => open/update right information panel */
.place-card{
  min-width:0;
  transform:translateX(0);
  opacity:1;
  transition:transform .24s ease, opacity .18s ease;
}
.place-card.closed{
  transform:translateX(104%);
  opacity:0;
  pointer-events:none;
}
.place-content{position:relative}
.panel-close{
  position:absolute;
  right:16px;
  top:16px;
  z-index:3;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,250,242,.92);
  color:var(--wine);
  font-size:18px;
  line-height:1;
}
.panel-close:hover{background:#fff}
.province.selected{
  stroke:#551410;
  stroke-width:3.3;
  filter:drop-shadow(0 5px 7px rgba(75,31,22,.30));
}
@media(max-width:1000px){
  .place-card{
    display:flex;
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:min(370px,46%);
    z-index:30;
    box-shadow:-18px 0 38px rgba(55,35,23,.14);
  }
  .map-stage{position:relative}
}
@media(max-width:700px){
  .place-card{display:none!important}
}

/* ===========================
   v5.3 INTERACTION FIX
   =========================== */
.map-stage{
  grid-template-columns:minmax(0,1fr);
  transition:grid-template-columns .22s ease;
}
.map-stage.panel-open{
  grid-template-columns:minmax(0,1.62fr) 350px;
}
.place-card.closed{display:none}
.map-stage.panel-open .place-card{display:flex}
.selection-toast{
  position:absolute;
  left:50%;
  top:15px;
  transform:translate(-50%,-8px);
  z-index:40;
  background:rgba(46,32,26,.95);
  color:#fff;
  padding:8px 11px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
  pointer-events:none;
  opacity:0;
  transition:.18s ease;
}
.selection-toast.show{
  opacity:1;
  transform:translate(-50%,0);
}
.province{pointer-events:all}
.province.selected{
  stroke:#52130f;
  stroke-width:3.4;
  filter:drop-shadow(0 5px 7px rgba(76,31,21,.30));
}
@media(max-width:1000px){
  .map-stage,.map-stage.panel-open{grid-template-columns:1fr}
  .map-stage.panel-open .place-card{
    display:flex;
    position:absolute;
    top:0;right:0;bottom:0;
    width:min(370px,46%);
    z-index:35;
    box-shadow:-18px 0 38px rgba(55,35,23,.14);
  }
  .map-stage{position:relative}
}
@media(max-width:700px){
  .map-stage.panel-open .place-card{display:none!important}
}

/* ===========================
   v5.4 — better selected colors
   =========================== */
.province{
  transition:fill .14s ease, stroke .14s ease, opacity .14s ease, filter .14s ease;
}
.province:hover,.province:focus{
  fill:#e9dbc0;
  stroke:#ffffff;
  stroke-width:1.6;
  filter:drop-shadow(0 2px 3px rgba(65,41,25,.16));
}
.province.selected{
  stroke-width:3.8;
  vector-effect:non-scaling-stroke;
}
.province.selected.unlocked{
  fill:#b3242a;
  stroke:#f0cf7c;
  filter:
    drop-shadow(0 0 0 rgba(0,0,0,0))
    drop-shadow(0 0 8px rgba(240,207,124,.34))
    drop-shadow(0 5px 10px rgba(82,27,19,.22));
}
.province.selected.unlockable{
  fill:#d0a448;
  stroke:#6d1d17;
  filter:
    drop-shadow(0 0 8px rgba(109,29,23,.16))
    drop-shadow(0 5px 10px rgba(82,27,19,.18));
}
.province.selected.soon{
  fill:#b9856e;
  stroke:#6d1d17;
  filter:
    drop-shadow(0 0 8px rgba(109,29,23,.14))
    drop-shadow(0 5px 10px rgba(82,27,19,.16));
}
.map-label{
  text-transform:uppercase;
}
.selection-toast{
  border:1px solid rgba(240,207,124,.35);
}

/* ===========================
   v5.5 — refined active province state
   =========================== */
.province.selected{
  stroke-linejoin:round;
  stroke-linecap:round;
  stroke-width:2.7;
  animation:lmSelectIn .22s ease-out;
}
.province.selected.unlocked{
  fill:#ad302c;
  stroke:#f0d18a;
  filter:
    drop-shadow(0 0 2px rgba(240,209,138,.90))
    drop-shadow(0 0 7px rgba(128,37,31,.28))
    drop-shadow(0 4px 8px rgba(69,38,26,.20));
}
.province.selected.unlockable{
  fill:#d0aa58;
  stroke:#7a241f;
  filter:
    drop-shadow(0 0 2px rgba(240,209,138,.75))
    drop-shadow(0 0 7px rgba(128,37,31,.20))
    drop-shadow(0 4px 8px rgba(69,38,26,.16));
}
.province.selected.soon{
  fill:#dfd1b8;
  stroke:#8b302a;
  filter:
    drop-shadow(0 0 2px rgba(239,211,151,.82))
    drop-shadow(0 0 7px rgba(128,37,31,.17))
    drop-shadow(0 4px 8px rgba(69,38,26,.14));
}
@keyframes lmSelectIn{
  from{opacity:.76}
  to{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .province.selected{animation:none}
}


/* =========================================================
   v5.6 — Typography synchronized with the main Lạc Miên shop
   Display: Noto Serif
   UI/body: Be Vietnam Pro
   ========================================================= */
html,body{
  font-family:var(--body);
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,
.intro h1,
.atlas-heading h2,
.province-heading h2,
.experience-copy h2,
.place-content h3,
.sheet-row h3,
.journey-number strong,
.brand b{
  font-family:var(--display);
  font-weight:500;
}
.desktop-nav a,
.mobile-nav a,
.account-btn,
.icon-btn,
.menu-btn,
.btn,
.eyebrow,
.legend span,
.filters button,
.place-status,
.collection-tag,
.province-card small,
.topline{
  font-family:var(--body);
}
.desktop-nav{
  gap:32px;
}
.desktop-nav a{
  color:#5c4135;
  font-family:var(--body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.desktop-nav a.active{
  color:var(--wine);
}
.account-btn{
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
}
.icon-btn{
  font-size:11px;
  font-weight:600;
}
.brand b{
  letter-spacing:.035em;
}
.intro h1{
  letter-spacing:-.012em;
}
.atlas-heading h2,
.province-heading h2,
.experience-copy h2,
.place-content h3{
  letter-spacing:-.01em;
}


/* =========================================================
   HEADER CLONE — match the main lacmien.shop header
   This block only affects the top navigation.
   ========================================================= */
.main-header-clone{
  position:sticky;
  top:0;
  z-index:80;
  background:#fbf7ef;
  border-bottom:1px solid rgba(112,65,45,.10);
  backdrop-filter:none;
}
.main-header-shell{
  width:min(1540px,calc(100% - 76px));
  height:98px;
  margin:0 auto;
  display:grid;
  grid-template-columns:330px minmax(0,1fr) auto;
  align-items:center;
  gap:32px;
}
.main-brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.main-brand img{
  width:60px;
  height:60px;
  flex:0 0 60px;
  object-fit:cover;
  border-radius:0;
}
.main-brand-copy{
  display:block;
  min-width:0;
}
.main-brand-copy b{
  display:block;
  color:#721f1d;
  font-family:"Noto Serif",Georgia,"Times New Roman",serif;
  font-size:22px;
  font-weight:500;
  line-height:1;
  letter-spacing:.015em;
  white-space:nowrap;
}
.main-brand-copy small{
  display:block;
  margin-top:8px;
  color:#c69a45;
  font-family:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;
  font-size:8px;
  font-weight:500;
  letter-spacing:.12em;
  white-space:nowrap;
}
.main-desktop-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:38px;
  min-width:0;
}
.main-desktop-nav a{
  color:#5d4338;
  font-family:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;
  font-size:11px;
  font-weight:600;
  line-height:1;
  letter-spacing:.055em;
  text-transform:uppercase;
  white-space:nowrap;
}
.main-desktop-nav a:hover{
  color:#922c27;
}
.main-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:17px;
  white-space:nowrap;
}
.discover-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:47px;
  padding:0 20px;
  border:1px solid #a94b42;
  background:transparent;
  color:#922c27;
  font-family:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.discover-btn:hover,
.discover-btn.active{
  background:transparent;
  color:#922c27;
}
.main-language{
  display:flex;
  align-items:center;
  gap:7px;
  font-family:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;
  font-size:11px;
}
.main-language button{
  padding:0;
  border:0;
  background:transparent;
  color:#a39389;
  font:inherit;
  font-weight:500;
  cursor:pointer;
}
.main-language button.active{
  color:#922c27;
  font-weight:700;
}
.main-language span{
  color:#b8aaa1;
}
.main-menu-btn{
  display:none;
  width:40px;
  height:40px;
  border:1px solid #d8c7a8;
  background:transparent;
  color:#81251f;
}
.main-mobile-nav{
  display:none;
}

@media(max-width:1240px){
  .main-header-shell{
    width:min(100% - 40px,1540px);
    grid-template-columns:270px 1fr auto;
  }
  .main-desktop-nav{gap:22px}
  .main-desktop-nav a{font-size:10px}
  .main-brand img{width:52px;height:52px;flex-basis:52px}
  .main-brand-copy b{font-size:20px}
}
@media(max-width:1000px){
  .main-header-shell{
    height:76px;
    grid-template-columns:1fr auto;
  }
  .main-desktop-nav{display:none}
  .discover-btn{display:none}
  .main-menu-btn{display:block}
  .main-mobile-nav.open{
    display:flex;
    padding:10px 20px 16px;
    gap:8px;
    overflow:auto;
    background:#fbf7ef;
    border-top:1px solid #eadfce;
  }
  .main-mobile-nav a{
    flex:0 0 auto;
    padding:9px 11px;
    border:1px solid #d8c7a8;
    background:#fff;
    color:#5d4338;
    font-family:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;
    font-size:9px;
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .main-mobile-nav a.active{
    border-color:#922c27;
    color:#922c27;
  }
}
@media(max-width:620px){
  .main-header-shell{
    width:calc(100% - 24px);
    height:70px;
  }
  .main-brand img{
    width:44px;height:44px;flex-basis:44px;
  }
  .main-brand-copy b{font-size:17px}
  .main-brand-copy small{
    max-width:160px;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:7px;
  }
  .main-language{display:none}
}


/* =========================================================
   v5.9 — final header match with lacmien.shop
   ========================================================= */
.main-header-clone{
  background:#fbf7ef !important;
  border-bottom:1px solid rgba(111,71,50,.10) !important;
}

.main-header-shell{
  width:min(1780px,calc(100% - 88px)) !important;
  height:112px !important;
  grid-template-columns:360px minmax(0,1fr) auto !important;
  gap:36px !important;
}

.main-brand img{
  width:67px !important;
  height:67px !important;
  flex-basis:67px !important;
}

.main-brand{
  gap:14px !important;
}

.main-brand-copy b{
  font-family:"Noto Serif",Georgia,"Times New Roman",serif !important;
  font-size:23px !important;
  font-weight:500 !important;
  line-height:1 !important;
  color:#74231f !important;
  letter-spacing:0 !important;
}

.main-brand-copy small{
  margin-top:8px !important;
  font-family:"Be Vietnam Pro","Segoe UI",Arial,sans-serif !important;
  font-size:8px !important;
  font-weight:500 !important;
  letter-spacing:.10em !important;
  color:#c69a49 !important;
}

.main-desktop-nav{
  gap:37px !important;
  align-items:center !important;
}

.main-header-clone .main-desktop-nav a{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  height:112px !important;
  color:#5f463a !important;
  font-family:"Be Vietnam Pro","Segoe UI",Arial,sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.055em !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

.main-header-clone .main-desktop-nav a::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  bottom:31px !important;
  width:0 !important;
  height:1px !important;
  background:#b6594e !important;
  border:0 !important;
  opacity:1 !important;
  transition:width .20s ease !important;
}

.main-header-clone .main-desktop-nav a:hover::after,
.main-header-clone .main-desktop-nav a:focus-visible::after{
  width:100% !important;
}

.main-header-clone .main-desktop-nav a:hover,
.main-header-clone .main-desktop-nav a:focus-visible{
  color:#8e2b27 !important;
}

.main-header-actions{
  gap:17px !important;
}

.discover-btn{
  height:54px !important;
  padding:0 22px !important;
  border:1px solid #b4574e !important;
  color:#922c27 !important;
  background:transparent !important;
  font-family:"Be Vietnam Pro","Segoe UI",Arial,sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.055em !important;
}

.discover-btn:hover{
  background:#922c27 !important;
  color:#fff !important;
}

.main-language{
  gap:7px !important;
  font-size:12px !important;
}

@media(max-width:1240px){
  .main-header-shell{
    width:min(100% - 40px,1780px) !important;
    height:92px !important;
    grid-template-columns:290px minmax(0,1fr) auto !important;
  }
  .main-header-clone .main-desktop-nav a{
    height:92px !important;
    font-size:10px !important;
  }
  .main-header-clone .main-desktop-nav a::after{
    bottom:23px !important;
  }
  .main-desktop-nav{gap:22px !important}
  .main-brand img{
    width:54px !important;
    height:54px !important;
    flex-basis:54px !important;
  }
}


/* =========================================================
   v6.0 — Supabase account + activation
   ========================================================= */
.account-state{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:2px;
  margin-bottom:13px;
  color:var(--muted);
  font-size:9px;
}
.account-state span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.account-state button{
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:var(--wine);
  padding:0;
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.field-label{
  display:block;
  margin:12px 0 0;
  color:var(--muted);
  font-size:9px;
  font-weight:700;
  letter-spacing:.04em;
}
.field-label input{
  display:block;
  width:100%;
  margin-top:6px;
  height:43px;
  border:1px solid var(--line);
  background:#fff;
  padding:0 11px;
  color:var(--ink);
  outline:none;
}
.field-label input:focus,
#activationCode:focus{
  border-color:var(--gold);
}
.auth-switch{
  display:block;
  width:100%;
  margin-top:12px;
  padding:8px 4px;
  border:0;
  background:transparent;
  color:var(--wine);
  font-size:9px;
  font-weight:700;
  cursor:pointer;
}
.form-message{
  min-height:18px;
}
.form-message.success{color:#4f6f42}
.form-message.error{color:#9a2924}
.collection-list{
  display:grid;
  gap:7px;
  margin:16px 0;
  max-height:300px;
  overflow:auto;
}
.collection-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--line);
  background:#fff;
  padding:11px 12px;
}
.collection-item b{
  font-family:var(--display);
  font-size:14px;
  font-weight:500;
}
.collection-item span{
  color:var(--wine);
  font-size:8px;
  font-weight:800;
  letter-spacing:.07em;
}
.collection-empty{
  border:1px dashed var(--line);
  padding:17px;
  color:var(--muted);
  font-size:10px;
  line-height:1.6;
}
.collection-actions{margin-top:10px}
.btn[disabled]{
  opacity:.58;
  cursor:not-allowed;
}


/* =========================================================
   v6.2 — polished login/logout + feedback system
   ========================================================= */

.account-state{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0 16px;
  margin:0 0 4px;
  border-top:1px solid rgba(137,90,57,.10);
  border-bottom:1px solid rgba(137,90,57,.10);
}

.account-state-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.account-state-kicker{
  color:#9a6e52;
  font-family:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;
  font-size:7px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

#accountLabel{
  display:block;
  max-width:330px;
  color:#4f3a31;
  font-family:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;
  font-size:10px;
  font-weight:500;
  line-height:1.45;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.account-action-btn{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  min-width:126px;
  height:42px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  border:1px solid #8f2723;
  border-radius:0;
  background:#fffaf2;
  color:#8f2723;

  font-family:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:.075em;
  text-transform:uppercase;

  cursor:pointer;
  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.account-action-btn span:first-child{
  font-size:13px;
  line-height:1;
  transition:transform .18s ease;
}

.account-action-btn:hover{
  background:#8f2723;
  color:#fff;
  box-shadow:0 8px 18px rgba(143,39,35,.13);
  transform:translateY(-1px);
}

.account-action-btn:hover span:first-child{
  transform:translateX(2px);
}

.account-action-btn.logout{
  border-color:#6f5a4f;
  color:#6f5a4f;
  background:transparent;
}

.account-action-btn.logout:hover{
  border-color:#6f1d1a;
  background:#6f1d1a;
  color:#fff;
}

.account-action-btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* ---- Auth feedback banner ---- */
.auth-feedback{
  margin-top:13px;
  padding:11px 12px;
  display:grid;
  grid-template-columns:25px 1fr;
  gap:9px;
  align-items:start;
  border:1px solid #d7b9a7;
  border-left:3px solid #9a2924;
  background:#fff4ef;
}

.auth-feedback[hidden]{
  display:none !important;
}

.auth-feedback-icon{
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#9a2924;
  color:#fff;
  font-size:11px;
  font-weight:800;
}

.auth-feedback strong{
  display:block;
  color:#7d211d;
  font-family:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:.03em;
}

.auth-feedback p{
  margin:4px 0 0 !important;
  color:#795c4e !important;
  font-size:9px !important;
  line-height:1.55 !important;
}

.auth-feedback.success{
  border-color:#b7c7ad;
  border-left-color:#5a774b;
  background:#f4f8f1;
}

.auth-feedback.success .auth-feedback-icon{
  background:#5a774b;
}

.auth-feedback.success strong{
  color:#45613a;
}

/* ---- Global toast ---- */
.lm-toast{
  position:fixed;
  top:22px;
  right:22px;
  z-index:9999;
  width:min(390px,calc(100vw - 28px));
  min-height:74px;
  padding:13px 42px 13px 13px;
  display:grid;
  grid-template-columns:31px 1fr;
  gap:10px;
  align-items:center;

  border:1px solid #d9c7ac;
  border-left:3px solid #8f2723;
  background:rgba(255,250,242,.98);
  box-shadow:0 16px 38px rgba(66,40,26,.14);

  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;
  transition:opacity .20s ease, transform .20s ease;
}

.lm-toast.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.lm-toast.success{
  border-left-color:#5a774b;
}

.lm-toast.error{
  border-left-color:#9a2924;
}

.lm-toast.info{
  border-left-color:#c89b4d;
}

.lm-toast-icon{
  width:29px;
  height:29px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#8f2723;
  color:#fff;
  font-size:12px;
  font-weight:800;
}

.lm-toast.success .lm-toast-icon{background:#5a774b}
.lm-toast.error .lm-toast-icon{background:#9a2924}
.lm-toast.info .lm-toast-icon{background:#c89b4d;color:#402d24}

.lm-toast-copy strong{
  display:block;
  color:#4a342b;
  font-size:10px;
  font-weight:700;
  margin-bottom:3px;
}

.lm-toast-copy span{
  display:block;
  color:#776960;
  font-size:9px;
  line-height:1.5;
}

#lmToastClose{
  position:absolute;
  right:10px;
  top:10px;
  border:0;
  background:transparent;
  color:#8a7568;
  font-size:17px;
  cursor:pointer;
}

@media(max-width:620px){
  .account-state{
    align-items:flex-start;
    flex-direction:column;
  }
  .account-action-btn{
    width:100%;
  }
  #accountLabel{
    max-width:100%;
  }
  .lm-toast{
    top:12px;
    right:14px;
    left:14px;
    width:auto;
  }
}


/* v6.3 final auth UI safeguard */
#accountAction.account-action-btn{
  appearance:none;
  -webkit-appearance:none;
}
.auth-feedback:not([hidden]){
  display:grid;
}
.lm-toast.show{
  display:grid;
}