/* =========================================================
   SABANA GOLD — PREMIUM JEWELLERY DESIGN SYSTEM
   Functional selectors preserved for the existing HTML + app.v2.js.
   ========================================================= */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#f5f1e9;
  --paper:#fffdf8;
  --paper-2:#faf7f0;
  --ink:#211d18;
  --ink-2:#352d24;
  --mute:#756d62;
  --gold:#b8872f;
  --gold-2:#d8b35b;
  --gold-3:#f2d993;
  --gold-soft:#efe2c1;
  --line:rgba(46,37,27,.11);
  --line-strong:rgba(46,37,27,.19);
  --dark:#17110b;
  --dark-2:#22170d;
  --white:#fff;
  --shadow-sm:0 8px 28px rgba(43,32,20,.07);
  --shadow-md:0 18px 55px rgba(43,32,20,.12);
  --shadow-lg:0 28px 90px rgba(21,16,10,.18);
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:28px;
  --nav:74px;
  --pad:clamp(16px,4vw,72px);
  --max:1440px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --gg:linear-gradient(120deg,#f6dda1 0%,#cf9a3f 43%,#f1d47e 68%,#b67e24 100%);
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:90px;
  background:var(--bg);
}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at 90% -10%,rgba(216,179,91,.09),transparent 28rem),
    var(--bg);
  color:var(--ink);
  font:15px/1.65 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  overflow-x:hidden;
}

body::selection{background:var(--gold-soft)}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{font-size:16px}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

h1,h2,h3,.logo,.flogo,.sect,.dh h2,.login h2{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}

.inner{width:min(var(--max),100%);margin:auto}

/* ---------- subtle section rhythm ---------- */
.wrap{
  position:relative;
  padding:clamp(74px,9vw,130px) var(--pad) 26px;
}
.wrap + .wrap{padding-top:clamp(64px,8vw,110px)}

.eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  width:max-content;
  max-width:100%;
  font-size:10px;
  line-height:1;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-2);
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:28px;
  height:1px;
  background:currentColor;
  opacity:.8;
}
.eyebrow.dark{color:var(--gold);opacity:1}

.title{
  max-width:780px;
  font-size:clamp(38px,5.6vw,78px);
  line-height:.98;
  letter-spacing:-.035em;
  color:var(--ink);
  margin-bottom:28px;
}
.title.sm{font-size:clamp(34px,4.2vw,54px);margin-bottom:22px}

/* ---------- NAV ---------- */
.nav{
  position:fixed;
  inset:0 0 auto;
  height:var(--nav);
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 var(--pad);
  color:#fff;
  /* Keep the premium glass/blur treatment active for the entire hero.
     Only the foreground colour/background tone changes after the hero. */
  background:linear-gradient(180deg,rgba(10,7,4,.34),rgba(10,7,4,.18));
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 8px 28px rgba(0,0,0,.10);
  transition:background .35s ease, color .35s ease, border-color .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
}

.nav.scrolled{
  color:var(--ink);
  background:rgba(255,253,248,.86);
  border-bottom-color:var(--line);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 8px 24px rgba(39,30,20,.07);
}

.logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:0;
  font-size:21px;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
}
.logo img{width:34px;height:34px;object-fit:contain;flex:none}

.links{
  display:none;
  align-items:center;
  gap:32px;
  font-size:11px;
  letter-spacing:.19em;
  text-transform:uppercase;
}
.links a{position:relative;opacity:.82;transition:opacity .2s ease,color .2s ease}
.links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .25s var(--ease);
}
.links a:hover{opacity:1}
.links a:hover::after{transform:scaleX(1);transform-origin:left}

.nav-r{display:flex;align-items:center;gap:8px}

.pill{
  appearance:none;
  border:1px solid rgba(34,28,20,.16);
  background:rgba(255,255,255,.45);
  color:var(--ink);
  border-radius:999px;
  padding:0 15px;
  min-height:40px;
  font-size:12px;
  letter-spacing:.02em;
  transition:transform .18s ease,background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.nav .pill{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.08);color:#fff}
.nav.scrolled .pill{border-color:var(--line-strong);background:rgba(255,255,255,.6);color:var(--ink)}
.pill.on{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 7px 20px rgba(22,18,13,.12)}
.pill.dark{width:100%;background:var(--ink);border-color:var(--ink);color:#fff}

.link{
  appearance:none;
  background:none;
  border:0;
  color:var(--mute);
  text-decoration:underline;
  text-underline-offset:3px;
  font-size:12px;
  padding:8px 2px;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  color:#fff;
  padding:calc(var(--nav) + 34px) var(--pad) 56px;
  background:
    radial-gradient(ellipse 55% 55% at 72% 20%,rgba(218,173,81,.22),transparent 65%),
    radial-gradient(ellipse 80% 55% at 0% 100%,rgba(146,94,28,.18),transparent 70%),
    linear-gradient(135deg,#100c07 0%,#191109 48%,#28180b 100%);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(7,5,3,.8),rgba(7,5,3,.28) 55%,rgba(7,5,3,.54)),
    radial-gradient(circle at 70% 50%,rgba(247,218,145,.06),transparent 22rem);
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:160px;
  z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(5,3,2,.42));
  pointer-events:none;
}

.hero-in{
  width:min(var(--max),100%);
  margin:0 auto;
  display:grid;
  gap:42px;
  align-items:center;
}

.hero-c{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  min-width:0;
}
.hero-c .eyebrow{margin-bottom:12px}

.hlogo{
  position:relative;
  display:grid;
  place-items:center;
  width:clamp(112px,min(30vw,27svh),245px);
  margin-bottom:12px;
}
.hlogo::before{
  content:"";
  position:absolute;
  inset:-28%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(236,196,102,.24),transparent 66%);
  filter:blur(3px);
  z-index:-1;
}
.hlogo img{
  width:100%;
  height:auto;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.28)) drop-shadow(0 0 28px rgba(218,173,81,.22));
}

.hero h1{
  margin:10px 0 12px;
  max-width:100%;
  font-weight:600;
  font-size:clamp(34px,8vw,76px);
  line-height:.95;
  letter-spacing:.14em;
  padding-left:.14em;
  text-transform:uppercase;
  background:var(--gg);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hsub{
  font:italic 400 clamp(18px,4vw,31px)/1.2 Georgia,"Times New Roman",serif;
  color:#efd797;
  margin-bottom:14px;
}

.hero p{
  max-width:480px;
  font-size:14px;
  line-height:1.8;
  color:rgba(255,255,255,.76);
  margin-bottom:26px;
}

.hero-b{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}
.hero-b .btn{flex:1 1 150px;max-width:230px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 24px;
  border:1px solid rgba(255,255,255,.44);
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.btn.primary{background:var(--gg);border-color:transparent;color:#20180d;box-shadow:0 14px 32px rgba(182,126,31,.24)}

.hphotos{
  position:relative;
  width:min(100%,520px,62svh);
  aspect-ratio:1/1.12;
  margin:0 auto;
}
.hphotos::before{
  content:"";
  position:absolute;
  right:-3%;
  top:-3%;
  width:70%;
  aspect-ratio:3/4;
  border:1px solid rgba(239,212,131,.4);
  border-radius:46% 46% 11% 11% / 30% 30% 7% 7%;
}
.hphotos::after{
  content:"SABANA GOLD";
  position:absolute;
  right:2px;
  bottom:-14px;
  writing-mode:vertical-rl;
  font-size:9px;
  letter-spacing:.34em;
  color:rgba(239,212,131,.55);
}

.hphoto{
  position:absolute;
  margin:0;
  overflow:hidden;
  background:#2a1f12;
  border:1px solid rgba(239,212,131,.34);
  box-shadow:var(--shadow-lg);
}
.hphoto::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.05),transparent 40%,rgba(0,0,0,.12));
}
.hphoto.p1{
  right:0;
  top:0;
  width:70%;
  aspect-ratio:3/4;
  border-radius:48% 48% 10% 10% / 31% 31% 7% 7%;
}
.hphoto.p2{
  left:0;
  bottom:0;
  width:52%;
  aspect-ratio:1;
  border-radius:50%;
  z-index:2;
  border-color:rgba(239,212,131,.72);
  box-shadow:0 0 0 6px rgba(17,12,8,.94),0 0 0 7px rgba(239,212,131,.45),var(--shadow-lg);
}
.hphoto img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.hphoto:hover img{transform:scale(1.04)}
.hphoto.empty{background:var(--gg)}
.hphoto.empty img{display:none}

@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-c>*{animation:rise .85s var(--ease) both}
.hero-c>:nth-child(2){animation-delay:.06s}.hero-c>:nth-child(3){animation-delay:.12s}.hero-c>:nth-child(4){animation-delay:.18s}
.hero-c>:nth-child(5){animation-delay:.24s}.hero-c>:nth-child(6){animation-delay:.3s}
.hphoto{animation:rise .95s .22s var(--ease) both}.hphoto.p2{animation-delay:.38s}

/* ---------- SHOP / TOOLBAR ---------- */
.notice{
  background:linear-gradient(120deg,rgba(255,255,255,.86),rgba(246,237,216,.75));
  border:1px solid var(--gold-soft);
  color:var(--ink-2);
  padding:15px 18px;
  margin-bottom:26px;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
}

.toolbar{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  margin-bottom:14px;
}
.toolbar input,.toolbar select,.panel select{
  appearance:none;
  border:1px solid var(--line-strong);
  background:rgba(255,253,248,.94);
  color:var(--ink);
  border-radius:14px;
  box-shadow:0 4px 18px rgba(41,31,20,.035);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.toolbar input{
  grid-column:1/-1;
  height:52px;
  padding:0 17px;
}
.toolbar select{
  height:44px;
  padding:0 36px 0 14px;
  min-width:0;
  background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(100% - 16px) 18px,calc(100% - 12px) 18px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.toolbar .pill{height:44px}

.toolbar input:focus,.toolbar select:focus,.panel select:focus,
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;
  border-color:rgba(184,135,47,.65);
  box-shadow:0 0 0 4px rgba(184,135,47,.09);
}

.panel{
  display:none;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:16px;
  background:rgba(255,253,248,.96);
  border:1px solid var(--line);
  border-radius:16px;
  margin-bottom:12px;
  box-shadow:var(--shadow-sm);
}
.panel.open{display:grid}
.panel label{display:grid;gap:6px;font-size:11px;color:var(--mute);letter-spacing:.02em}
.panel select{height:44px;padding:0 12px}
.panel .link{grid-column:1/-1;justify-self:start}

.chips{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:5px 1px 14px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.chips::-webkit-scrollbar{display:none}
.chips .pill{
  flex:none;
  white-space:nowrap;
  background:rgba(255,253,248,.68);
  color:var(--ink);
}
.chips .pill.on{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
  box-shadow:0 7px 20px rgba(22,18,13,.12);
}
.count{font-size:12px;color:var(--mute);margin:2px 2px 16px}

/* ---------- PRODUCT GRID ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

.card{
  position:relative;
  min-width:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0 0 16px;
  background:rgba(255,253,248,.93);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 8px 26px rgba(42,32,21,.045);
  isolation:isolate;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s ease;
}
.card::after{
  content:"";
  position:absolute;
  inset:auto 12px 0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);
}
.card>:not(.pic){margin-left:14px;margin-right:14px}

.pic{
  position:relative;
  aspect-ratio:1/.98;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.94),transparent 30%),
    linear-gradient(135deg,#f6f0e4,#e9deca);
  overflow:hidden;
}
.pic::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 45%,rgba(101,73,31,.06));
}
.pic img{width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease)}
.card:hover .pic img{transform:scale(1.045)}

.tag{
  align-self:flex-start;
  margin-top:6px!important;
  margin-bottom:0;
  font-size:9px;
  line-height:1;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:#fff;
}
.tag.real{background:linear-gradient(120deg,#f3d991,#c79232);border-color:transparent;color:#24190a}
.tag.imit{background:#fff8ec;color:#6a522d}
.card h3{font-size:17px;line-height:1.2;color:var(--ink)}
.card small{
  min-height:33px;
  color:var(--mute);
  font-size:11.5px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto!important;padding-top:2px}
.price{font-size:15px;font-weight:800;letter-spacing:-.01em}
.add{
  border:1px solid var(--ink);
  background:var(--ink);
  color:#fff;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  transition:transform .18s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
}
.empty{grid-column:1/-1;text-align:center;color:var(--mute);padding:62px 20px;background:rgba(255,255,255,.4);border:1px dashed var(--line-strong);border-radius:18px}

/* ---------- PRODUCT CSS ART ---------- */
.real{--m:conic-gradient(#fff0b3,#c9973a,#8f6316,#f3d27a,#fff0b3);--c:#d9a83f}
.imit{--m:conic-gradient(#f6dda0,#c9a24a,#f6dda0,#a98530,#f6dda0);--c:#cfa94e}
.ring{width:46%;aspect-ratio:1;border-radius:50%;border:9px solid transparent;background:var(--m) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:drop-shadow(0 8px 8px rgba(120,80,10,.22))}
.ring.thick{width:56%;border-width:13px}
.pair{display:flex;gap:14%;width:62%;justify-content:center}.pair .ring{width:34%;border-width:6px}
.chain{width:60%;aspect-ratio:1;border:4px dashed var(--c);border-radius:50%/40% 40% 60% 60%}
.pend{position:relative;width:60%;aspect-ratio:1}.pend .chain{width:100%}
.disc{position:absolute;left:50%;bottom:6%;width:24%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:var(--m);box-shadow:0 6px 8px rgba(120,80,10,.35)}

/* ---------- PROMISES ---------- */
#about{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(239,231,214,.25))}
.trust{display:grid;grid-template-columns:1fr;gap:14px;margin-top:30px}
.trust div{
  position:relative;
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:linear-gradient(145deg,rgba(255,253,248,.96),rgba(249,244,235,.9));
  border:1px solid var(--line);
  border-radius:22px;
  padding:24px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.trust div::before{
  content:"";
  position:absolute;
  top:-40px;
  right:-20px;
  width:130px;
  height:130px;
  border-radius:50%;
  border:1px solid rgba(184,135,47,.16);
  box-shadow:0 0 0 16px rgba(184,135,47,.035),0 0 0 34px rgba(184,135,47,.02);
}
.trust div::after{
  content:"✦";
  position:absolute;
  top:24px;
  right:25px;
  color:var(--gold);
  font-size:18px;
}
.trust h3{font-size:24px;line-height:1.1;margin-bottom:8px}
.trust p{max-width:40ch;font-size:13.5px;color:var(--mute);line-height:1.7}

/* ---------- VISIT ---------- */
#visit{padding-top:clamp(78px,10vw,130px)}
.visit{
  display:grid;
  gap:0;
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:26px;
  box-shadow:var(--shadow-md);
}
.vmap{height:290px;background:#ebe3d4;overflow:hidden}
.vmap iframe{display:block;width:100%;height:100%;border:0;filter:saturate(.86) contrast(.95)}
.vinfo{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  min-width:0;
  padding:28px;
  background:linear-gradient(145deg,#24180e,#18100a);
  color:#fff;
}
.vinfo::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 88% 12%,rgba(216,179,91,.22),transparent 28%);
  pointer-events:none;
}
.vrow{position:relative;z-index:1;display:grid;grid-template-columns:76px 1fr;gap:12px;font-size:14px;margin:0}
.vrow b{font-weight:700;color:#dcb766;font-size:9px;letter-spacing:.16em;text-transform:uppercase;padding-top:3px}
.vrow span{min-width:0;overflow-wrap:anywhere;color:rgba(255,255,255,.82)}
.vbtns{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:9px;margin-top:7px}
.vbtns .solid{width:auto;min-height:44px;height:44px;padding:0 19px;font-size:12px;border-radius:999px}
.vbtns .pill{display:inline-flex;align-items:center;height:44px;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04);color:#fff}

/* ---------- FOOTER ---------- */
.foot{
  margin-top:92px;
  background:
    radial-gradient(circle at 78% 10%,rgba(210,169,77,.16),transparent 25rem),
    linear-gradient(135deg,#130e09,#1f1309);
  color:#fff;
  padding:64px var(--pad) 26px;
  border-top:1px solid rgba(231,194,112,.34);
}
.foot-top{display:grid;grid-template-columns:1fr;gap:38px}
.flogo{font-size:31px;letter-spacing:.14em;margin-bottom:14px;text-transform:uppercase}
.fb p{max-width:48ch;font-size:14px;color:rgba(255,255,255,.58);line-height:1.75}
.foot h5{font:400 18px Georgia,serif;color:#e9cb83;margin-bottom:10px}
.foot-top a{display:block;width:max-content;max-width:100%;padding:5px 0;color:rgba(255,255,255,.68);transition:color .2s ease}
.foot-top a:hover{color:#fff}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:42px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:11px;color:rgba(255,255,255,.45)}

/* ---------- MODAL ---------- */
.modal{position:fixed;inset:0;z-index:200;display:none;place-items:center;background:rgba(18,12,7,.62);padding:18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal.open{display:grid}
.login{
  position:relative;
  width:min(430px,100%);
  background:linear-gradient(145deg,#fffdf8,#f8f0df);
  padding:42px 24px 24px;
  border:1px solid rgba(184,135,47,.24);
  border-radius:26px;
  box-shadow:0 35px 100px rgba(0,0,0,.28);
}
.login::before{content:"";position:absolute;left:24px;right:24px;top:19px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft),transparent)}
.login h2{font-size:34px;text-align:center}
.login .s{text-align:center;color:var(--mute);margin:8px auto 22px;font-size:13.5px;max-width:34ch}
.x{position:absolute;right:12px;top:9px;width:40px;height:40px;background:none;border:0;border-radius:50%;font-size:27px;color:var(--mute);transition:background .2s,color .2s}
.solid,.gbtn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;height:52px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;letter-spacing:.02em;transition:transform .18s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
.solid:disabled{opacity:.5}
.gbtn{background:#fff;color:var(--ink);border:1px solid var(--line-strong)}
.me{display:flex;align-items:center;gap:13px;margin:12px 0 20px;padding:12px;border:1px solid var(--line);background:rgba(255,255,255,.62);border-radius:16px}
.me img{width:54px;height:54px;border-radius:50%;object-fit:cover;background:#efe2c4}
.me b{display:block}.me span{font-size:12px;color:var(--mute)}
.gbtn{gap:12px;font-size:14px}
.gbtn svg{flex:none}

/* ---------- DRAWER / CART / CHECKOUT ---------- */
.bg{position:fixed;inset:0;z-index:150;background:rgba(21,15,9,.56);opacity:0;visibility:hidden;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:opacity .3s,visibility .3s}
.bg.open{opacity:1;visibility:visible}
.drawer{
  position:fixed;
  z-index:160;
  top:0;
  right:0;
  height:100vh;
  height:100dvh;
  width:min(500px,100%);
  background:linear-gradient(180deg,#fffdf8,#faf6ee);
  display:flex;
  flex-direction:column;
  border-left:1px solid var(--line);
  box-shadow:-22px 0 70px rgba(35,25,16,.18);
  transform:translateX(105%);
  visibility:hidden;
  transition:transform .4s var(--ease),visibility 0s .4s;
}
.drawer.open{transform:none;visibility:visible;transition:transform .4s var(--ease),visibility 0s}
.dh{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line);background:rgba(255,253,248,.9)}
.dh h2{font-size:27px}
.x2{width:40px;height:40px;background:transparent;border:0;border-radius:50%;font-size:27px;color:var(--mute);transition:background .2s,color .2s}
.view{flex:1;display:flex;flex-direction:column;min-height:0}
.items{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.items>*{flex-shrink:0}
.item{display:flex;gap:11px;align-items:center;padding:12px;background:#f6f0e3;border:1px solid rgba(56,42,25,.07);border-radius:14px}
.th{width:58px;height:58px;flex:none;display:grid;place-items:center;background:#ece1cf;border-radius:12px;overflow:hidden}
.th img{width:100%;height:100%;object-fit:cover}
.th i{width:28px;height:28px;border-radius:50%;border:5px solid transparent;background:var(--m) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.nm{flex:1;min-width:0;font-size:12px;color:var(--mute)}
.nm b{display:block;font:400 15.5px Georgia,serif;color:var(--ink);margin-bottom:2px}
.qty{display:flex;align-items:center;gap:8px;margin-top:7px}
.qty button{width:30px;height:30px;border:1px solid var(--line-strong);border-radius:50%;background:#fff}
.rm{border:0;background:none;color:var(--mute);font-size:11px;text-decoration:underline;text-underline-offset:3px;padding:8px 2px}
.cempty{margin:auto;text-align:center;color:var(--mute);padding:30px}
.df{padding:13px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;gap:8px;background:rgba(255,253,248,.92)}
.total{display:flex;justify-content:space-between;font-weight:800;font-size:17px;padding:1px 0 7px}
.form{gap:13px}
.form label{display:grid;gap:6px;font-size:11px;color:var(--mute)}
.form input,.form select,.form textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--line-strong);
  background:#fff;
  border-radius:12px;
  color:var(--ink);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.note{font-size:11.5px;color:var(--mute);line-height:1.55}
.done{align-items:center;justify-content:center;text-align:center;gap:14px;padding:24px}
.done h2{font-size:34px}
.done .solid{max-width:300px}
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,150px);max-width:92%;padding:12px 18px;background:#20170e;color:#fff;z-index:300;font-size:13px;border:1px solid rgba(240,208,135,.28);border-radius:999px;box-shadow:0 14px 38px rgba(0,0,0,.2);transition:transform .3s var(--ease);text-align:center;pointer-events:none}
.toast.show{transform:translate(-50%,0)}

/* ---------- CHECKOUT MAP + PAYMENT ---------- */
.sect{font-size:20px;margin-top:8px;color:var(--ink)}
.mapbar{display:flex;gap:8px}
.mapbar input{flex:1;min-width:0;height:46px;padding:0 12px;border:1px solid var(--line-strong);background:#fff;border-radius:12px}
.mapbar .pill{flex:none}
.map{position:relative;isolation:isolate;flex:none;height:245px;background:#ece4d4;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.paybox{display:grid;gap:8px}
.form .pay{display:flex;gap:10px;align-items:flex-start;padding:13px;border:1px solid var(--line);background:#fff;font-size:13px;color:var(--ink);border-radius:13px;transition:border-color .2s,box-shadow .2s,background .2s}
.form .pay input{width:auto;margin-top:4px}
.pay small{display:block;color:var(--mute);font-size:11px;margin-top:2px}
.form .pay.off{opacity:.58;background:#f1ede4}

/* animated map pin */
.pin{position:relative;width:30px;height:30px;margin-bottom:8px;transform-origin:50% 100%}
.pin i{position:absolute;inset:0;border-radius:50% 50% 50% 0;background:#b8862c;border:3px solid #fff;transform:rotate(-45deg);box-shadow:0 3px 8px rgba(0,0,0,.4)}
.pin i::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}
.pin b{position:absolute;left:50%;bottom:-8px;width:18px;height:8px;margin-left:-9px;border-radius:50%;background:rgba(184,134,44,.55);animation:pinpulse 1.6s ease-out infinite}
.pin.drop{animation:pindrop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes pindrop{from{transform:translateY(-36px);opacity:0}to{transform:none;opacity:1}}
@keyframes pinpulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.8);opacity:0}}

/* ---------- INTERACTION ---------- */
.pill,.add,.btn,.solid,.gbtn,.qty button,.link,.rm,.x,.x2{transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .18s ease}
.pill:disabled,.add:disabled,.solid:disabled{opacity:.55;cursor:not-allowed}
.pill:active,.add:active,.solid:active,.btn:active,.qty button:active{transform:scale(.97)}

@media(hover:hover){
  .pill:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
  .nav .pill:hover{background:#fff;color:var(--ink);border-color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.14)}
  .nav.scrolled .pill:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
  .add:hover{background:var(--gold);border-color:var(--gold);color:#fff;box-shadow:0 8px 22px rgba(184,135,47,.18)}
  .solid:not(:disabled):hover{background:var(--gg);color:var(--ink);box-shadow:0 12px 28px rgba(184,135,47,.2)}
  .btn:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-1px)}
  .btn.primary:hover{background:linear-gradient(120deg,#ffe8a7,#d6a34a 55%,#f5dc91);color:var(--ink);box-shadow:0 16px 34px rgba(184,135,47,.32)}
  .card:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(42,32,21,.10);border-color:rgba(184,135,47,.24)}
  .qty button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
  .x:hover,.x2:hover{background:#efe9de;color:var(--ink)}
  .gbtn:hover{box-shadow:0 10px 24px rgba(26,21,16,.08);border-color:rgba(34,28,20,.3)}
}

/* ---------- RESPONSIVE ---------- */
@media(min-width:560px){
  .toolbar{grid-template-columns:1fr auto auto}
  .toolbar input{grid-column:auto}
  .panel{grid-template-columns:repeat(3,1fr) auto;align-items:end}
  .panel .link{grid-column:auto}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
  .trust{grid-template-columns:repeat(3,1fr)}
  .foot-top{grid-template-columns:2fr 1fr}
  .visit{grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr)}
  .vmap{height:100%;min-height:350px}
}

@media(min-width:900px){
  :root{--nav:82px}
  body{font-size:16px}
  .links{display:flex}
  .logo{font-size:24px}.logo img{width:42px;height:42px}

  .hero{padding-top:calc(var(--nav) + 26px);padding-bottom:64px}
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(440px,.95fr);gap:clamp(45px,7vw,110px)}
  .hero-c{align-items:flex-start;text-align:left}
  .hero h1{font-size:clamp(56px,6.5vw,104px);max-width:5.4em;line-height:.91}
  .hsub{font-size:clamp(22px,2.2vw,35px)}
  .hero-b{justify-content:flex-start}
  .hphotos{width:min(100%,630px,67svh)}

  .grid{grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:22px}
  .card h3{font-size:20px}
  .card small{font-size:12.5px}
  .price{font-size:16px}

  .trust div{padding:28px;min-height:250px}
  .vinfo{padding:36px}
  .foot-top{grid-template-columns:2.3fr 1fr 1fr}
}

@media(min-width:1200px){
  .hero-in{grid-template-columns:minmax(0,.9fr) minmax(500px,1fr)}
  .hphotos{width:min(100%,660px,70svh)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(265px,1fr))}
}

@media(min-width:1600px){html{font-size:17px}.hero h1{font-size:108px}}

@media(max-width:560px){
  .nav{height:62px}
  .logo{font-size:16px;letter-spacing:.12em}
  .logo img{width:29px;height:29px}
  .nav-r .pill{padding:0 12px;min-height:36px;font-size:11px}
  .hero{padding-top:84px}
  .hphotos{width:min(100%,420px,58svh)}
  .foot-bot{flex-direction:column}
}

@media(max-height:560px) and (orientation:landscape){
  .hero{min-height:0;padding-top:84px}
  .hlogo{width:78px}
  .hphotos{width:min(44vw,340px)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- product loading / offline cache states ---------- */
.grid-loading{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid-loading .skeleton{height:340px;border-radius:18px;background:linear-gradient(90deg,rgba(255,255,255,.45),rgba(255,255,255,.9),rgba(255,255,255,.45));background-size:220% 100%;animation:shimmer 1.35s linear infinite;border:1px solid var(--line)}
.catalog-status{grid-column:1/-1;padding:28px 20px;text-align:center;color:var(--mute);border:1px dashed var(--line-strong);border-radius:18px;background:rgba(255,255,255,.46)}
.catalog-status strong{display:block;color:var(--ink);font:400 22px/1.2 Georgia,serif;margin-bottom:6px}
@keyframes shimmer{to{background-position:-220% 0}}
@media(min-width:600px){.grid-loading{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}}
@media(min-width:900px){.grid-loading{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.grid-loading .skeleton{height:390px}}
@media(prefers-reduced-motion:reduce){.grid-loading .skeleton{animation:none}}

/* ---------- PREMIUM FILTER DROPDOWNS ---------- */
.panel label > select{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  border:0;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
}

.panel label{
  position:relative;
  min-width:0;
}

.custom-select{
  position:relative;
  z-index:20;
}
.custom-select.open{z-index:80}

.custom-select-button{
  width:100%;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 15px;
  border:1px solid rgba(35,28,20,.16);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,246,237,.96));
  color:var(--ink);
  box-shadow:0 5px 18px rgba(38,28,17,.045), inset 0 1px 0 rgba(255,255,255,.65);
  cursor:pointer;
  text-align:left;
  transition:border-color .2s ease,box-shadow .2s ease,transform .18s ease,background .2s ease;
}
.custom-select-button:hover{
  border-color:rgba(184,135,47,.42);
  box-shadow:0 7px 22px rgba(38,28,17,.065), inset 0 1px 0 rgba(255,255,255,.7);
}
.custom-select-button:focus-visible{
  outline:none;
  border-color:rgba(184,135,47,.68);
  box-shadow:0 0 0 4px rgba(184,135,47,.11),0 7px 22px rgba(38,28,17,.06);
}
.custom-select.open .custom-select-button{
  border-color:rgba(184,135,47,.68);
  background:#fffdfa;
  box-shadow:0 0 0 4px rgba(184,135,47,.09),0 9px 24px rgba(38,28,17,.08);
}
.custom-select-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:16px;
  font-weight:400;
  color:var(--ink);
}
.custom-select-button i{
  width:8px;
  height:8px;
  flex:none;
  border-right:1.5px solid #7b6f60;
  border-bottom:1.5px solid #7b6f60;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s ease,border-color .2s ease;
}
.custom-select.open .custom-select-button i{
  transform:rotate(225deg) translateY(-1px);
  border-color:var(--gold);
}

.custom-select-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  padding:7px;
  display:grid;
  gap:3px;
  max-height:min(270px,42vh);
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-5px) scale(.985);
  transform-origin:top center;
  border:1px solid rgba(34,28,20,.12);
  border-radius:16px;
  background:rgba(255,253,248,.98);
  box-shadow:0 20px 48px rgba(31,23,16,.16),0 4px 16px rgba(31,23,16,.07);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}
.custom-select.open .custom-select-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.custom-select-option{
  width:100%;
  min-height:44px;
  padding:0 11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:var(--ink);
  text-align:left;
  font-size:14px;
  cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.custom-select-option:hover{
  background:#f6efe1;
}
.custom-select-option.selected{
  background:linear-gradient(120deg,#f8edcf,#f1d692);
  color:#241b12;
  font-weight:600;
}
.custom-select-option.selected b{
  color:#8a611d;
  font-size:14px;
}

@media(max-width:599px){
  .custom-select-button{min-height:52px}
  .custom-select-label{font-size:15px}
  .custom-select-menu{max-height:230px}
}

/* ---------- scroll lock while drawer / sign-in is open ---------- */
body.lock{overflow:hidden}

/* ---------- payment options (Razorpay + COD) ---------- */
.paybox input[type=radio]{accent-color:var(--gold)}
.form .pay{cursor:pointer}
.form .pay.off{cursor:not-allowed}
.form .pay:has(input:checked){border-color:rgba(184,135,47,.7);background:linear-gradient(145deg,#fffdf8,#fbf3de);box-shadow:0 0 0 3px rgba(184,135,47,.1)}
.pay-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.pay-tags i{font:600 10px/1 Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:#f3e9d0;color:#6a522d;border:1px solid rgba(184,135,47,.22)}
.pay-tags i:first-child{background:var(--gg);color:#24190a;border-color:transparent}

/* ---------- performance: below-the-fold sections render lazily ---------- */
#about,#visit{content-visibility:auto;contain-intrinsic-size:auto 620px}

/* ---------- 3 columns on tablets ---------- */
@media(min-width:720px) and (max-width:899px){
  .grid,.grid-loading{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* ---------- ACCOUNT MENU / ORDERS ---------- */
.acct{display:grid;gap:8px;margin:0 0 16px}
.arow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 16px;text-align:left;border:1px solid var(--line);background:rgba(255,255,255,.7);border-radius:16px;color:var(--ink);font-size:15px;font-weight:700;text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .18s}
.arow:hover{border-color:var(--gold);box-shadow:var(--shadow-sm)}
.arow small{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--mute)}
.arow i{font-style:normal;font-size:24px;color:var(--gold);line-height:1}
.solid.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.ord{background:#f6f0e3;border:1px solid rgba(56,42,25,.07);border-radius:14px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.ord.open{border-color:var(--gold);box-shadow:var(--shadow-sm);background:#fbf6ea}
.ohd{position:relative;display:grid;gap:6px;width:100%;padding:14px 40px 14px 14px;text-align:left;background:none;border:0;cursor:pointer;color:inherit;font:inherit}
.oh{display:flex;justify-content:space-between;align-items:center;gap:10px}
.oh b{font:400 15.5px Georgia,serif;color:var(--ink);word-break:break-all}
.om{font-size:12px;color:var(--mute)}.om b{color:var(--ink)}
.chev{position:absolute;right:15px;top:50%;width:9px;height:9px;margin-top:-6px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .25s var(--ease)}
.ord.open .chev{transform:rotate(-135deg);margin-top:-2px}
.obody{padding:2px 14px 16px;display:grid;gap:12px;border-top:1px solid var(--line);animation:ordIn .25s var(--ease)}
.obody[hidden]{display:none}
@keyframes ordIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.st{flex:none;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:#e6efdc;color:#3d6b22}
.st.wait{background:#f8ecc9;color:#8a6410}
.st.bad{background:#f6dcd8;color:#a3362a}
.st.done{background:#dfe8f3;color:#2c5a8c}
.osec{margin-top:6px;font:400 17px Georgia,serif;color:var(--ink)}
.obanner{padding:11px 13px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:13px;line-height:1.5}
.obanner.wait{background:#fbf1d3;border-color:#ecd48a;color:#6e5210}
.obanner.bad{background:#fbe5e1;border-color:#ecb7af;color:#8c2e23}
.obox{padding:11px 13px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:13px;display:grid;gap:3px}
.tl{list-style:none;margin:2px 0 0;padding:0;display:grid}
.tl li{position:relative;display:flex;gap:12px;padding:0 0 14px;color:var(--mute);font-size:13px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:6px;top:15px;bottom:-1px;width:2px;background:var(--line-strong)}
.tl li:last-child::before{display:none}
.tl i{flex:none;width:14px;height:14px;margin-top:2px;border-radius:50%;border:2px solid var(--line-strong);background:#fff;position:relative;z-index:1}
.tl li.done{color:var(--ink)}.tl li.done::before{background:var(--gold)}
.tl li.done i{background:var(--gold);border-color:var(--gold)}
.tl li.now{color:var(--ink);font-weight:700}
.tl li.now i{border-color:var(--gold);box-shadow:0 0 0 4px rgba(184,135,47,.22)}
.tl small{display:block;font-weight:400;color:var(--mute);font-size:11.5px}
.oit{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.oit li{display:flex;align-items:center;gap:10px;font-size:13px}
.oit .th{width:46px;height:46px}
.onm{flex:1;min-width:0}.onm b{display:block;font:400 14px Georgia,serif;color:var(--ink)}.onm small{color:var(--mute);font-size:12px}
.odl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font-size:13px}
.odl dt{color:var(--mute)}.odl dd{margin:0;text-align:right;word-break:break-all}
.oadr{margin:0;font-size:13px;line-height:1.55}
.omap{display:grid;gap:8px}
.omap iframe{width:100%;height:210px;border:0;border-radius:12px;background:#ece1cf}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{padding:7px 12px;font-size:12px;font-weight:600;border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer}
.seg button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.oact{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.oact .pill{font-size:12px;min-height:38px;text-decoration:none;display:inline-flex;align-items:center}

/* ---------- FIRST-ORDER GUIDE (coach marks) ---------- */
.cm{position:fixed;inset:0;z-index:400}
.cm::before{content:"";position:absolute;inset:0}
.cm-spot{position:fixed;border-radius:16px;box-shadow:0 0 0 9999px rgba(18,12,7,.66),0 0 0 3px #f3d27a;pointer-events:none;transition:all .25s var(--ease);animation:cmPulse 1.8s ease-in-out infinite}
@keyframes cmPulse{50%{box-shadow:0 0 0 9999px rgba(18,12,7,.66),0 0 0 7px rgba(243,210,122,.55)}}
.cm-tip{position:fixed;width:min(300px,calc(100vw - 20px));padding:16px 16px 14px;background:var(--paper);color:var(--ink);border-radius:16px;box-shadow:var(--shadow-lg);animation:sgsIn .3s var(--ease)}
.cm-tip::before{content:"";position:absolute;left:var(--ax,50%);width:14px;height:14px;background:var(--paper);transform:translateX(-50%) rotate(45deg)}
.cm-tip[data-pos=below]::before{top:-6px}.cm-tip[data-pos=above]::before{bottom:-6px}
.cm-tip small{color:var(--gold);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.cm-tip b{display:block;font:400 19px Georgia,serif;margin:3px 0 4px}
.cm-tip p{margin:0 0 12px;font-size:13px;color:var(--mute);line-height:1.5}
.cm-btns{display:flex;justify-content:space-between;gap:8px}
.cm-skip{background:none;border:0;color:var(--mute);font-size:13px;cursor:pointer;padding:8px 4px}
.cm-go{padding:10px 18px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:13px;cursor:pointer}
body.touring .sgs-launch,body.touring .sgs-tip{display:none}
@media(prefers-reduced-motion:reduce){.cm-spot,.obody,.cm-tip{animation:none;transition:none}}

/* ---------- FLOATING SUPPORT CHAT ---------- */
.sgs-launch{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:120;width:58px;height:58px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--ink);color:#f3d27a;box-shadow:0 12px 34px rgba(21,16,10,.32),0 0 0 3px rgba(184,135,47,.35);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s}
.sgs-launch:hover{transform:translateY(-2px) scale(1.04)}
.sgs-launch:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
body.lock .sgs-launch,body.lock .sgs-tip{opacity:0;pointer-events:none;visibility:hidden}
.sgs-tip{position:fixed;right:84px;bottom:calc(30px + env(safe-area-inset-bottom));z-index:120;max-width:210px;padding:10px 14px;background:var(--paper);color:var(--ink);font-size:13px;font-weight:600;border:1px solid var(--line-strong);border-radius:14px 14px 4px 14px;box-shadow:var(--shadow-md);cursor:pointer;animation:sgsIn .35s var(--ease)}
.sgs-tip[hidden]{display:none}
.sgs-panel{position:fixed;right:18px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:130;width:min(390px,calc(100vw - 24px));height:min(600px,calc(100dvh - 120px));display:flex;flex-direction:column;background:var(--paper);border:1px solid rgba(184,135,47,.28);border-radius:22px;box-shadow:var(--shadow-lg);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);transform-origin:bottom right;transition:opacity .22s,transform .26s var(--ease),visibility 0s .26s}
.sgs-panel.open{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .26s var(--ease),visibility 0s}
.sgs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 16px;background:var(--ink);color:#fff}
.sgs-who b{display:block;font:400 18px Georgia,serif;color:#f3d27a}
.sgs-who span{font-size:12px;color:rgba(255,255,255,.7)}
.sgs-x{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer}
.sgs-x:hover{background:rgba(255,255,255,.2)}
.sgs-log{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;background:var(--bg);-webkit-overflow-scrolling:touch}
.sgs-msg{max-width:86%;padding:10px 13px;font-size:14px;line-height:1.5;border-radius:16px;word-wrap:break-word;animation:sgsIn .25s var(--ease)}
.sgs-msg.bot{align-self:flex-start;background:#fff;color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:4px}
.sgs-msg.user{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.sgs-chips{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-start;max-width:96%;animation:sgsIn .25s var(--ease)}
.sgs-chip{display:inline-block;padding:9px 13px;font:600 13px/1.3 inherit;text-align:left;color:var(--ink);background:#fff;border:1px solid var(--gold);border-radius:999px;cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.sgs-chip:hover{background:var(--gold-soft)}
.sgs-chip.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.sgs-chip.primary:hover{background:#2b241c}
.sgs-form{display:flex;gap:8px;padding:11px 12px;border-top:1px solid var(--line);background:var(--paper)}
.sgs-form input{flex:1;min-width:0;height:44px;padding:0 14px;font-size:14px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--ink)}
.sgs-form input:focus{outline:2px solid var(--gold);outline-offset:1px}
.sgs-send{height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--gold);color:#fff;font-weight:700;cursor:pointer}
.sgs-send:hover{filter:brightness(1.08)}
@keyframes sgsIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:520px){
  .sgs-panel{right:8px;left:8px;width:auto;bottom:calc(8px + env(safe-area-inset-bottom));height:min(84dvh,640px);border-radius:20px}
  body.sgs-open .sgs-launch,body.sgs-open .sgs-tip{opacity:0;pointer-events:none;visibility:hidden}
}
@media (prefers-reduced-motion:reduce){.sgs-panel,.sgs-msg,.sgs-chips,.sgs-tip,.sgs-launch{transition:none;animation:none}}