/* ===========================================================================
   Amarnath Arvinder Mahajan Store — page & component styles
   =========================================================================== */

/* =========================================================== cinematic === */
.cine{ 
  position:relative; height:250vh; background:var(--maroon-d); 
  width: 100%; max-width: 100vw; 
  clip-path: inset(0); /* Animation safe clipping */
}
.cine-stage{
  position:sticky; top:0; height:100vh; 
  width: 100%; max-width: 100vw; 
  overflow:hidden; clip-path: inset(0);
  --p:0;                       /* scroll progress 0 -> 1, set by JS */
}
.cine-layer{ position:absolute; inset:0; will-change:transform,opacity; }

/* dawn sky wash */
.cine-sky{
  background:
    radial-gradient(120% 78% at 50% 104%, #f7bd52 0%, #de8a1e 26%, #a8480d 56%, #4d1509 84%, #2c0c06 100%);
  transform:scale(calc(1 + var(--p) * .12));
}
.cine-glow{
  background:radial-gradient(46% 40% at 50% 62%, rgba(255,224,150,.62), transparent 70%);
  opacity:calc(.35 + var(--p) * .55);
  transform:scale(calc(.85 + var(--p) * .5));
  mix-blend-mode:screen;
}
.cine-rays{
  background:
    repeating-conic-gradient(from calc(var(--p) * 30deg) at 50% 66%,
      rgba(255,226,163,.10) 0deg 4deg, transparent 4deg 15deg);
  opacity:calc(.30 + var(--p) * .3);
  mix-blend-mode:screen;
  transform:scale(1.6);
}
/* silhouetted bazaar arches */
.cine-arch{
  background-repeat:no-repeat; background-position:center bottom; background-size:cover;
}
.cine-arch-1{ opacity:.9;  transform:translateY(calc(var(--p) * -6vh)) scale(calc(1 + var(--p)*.08)); }
.cine-arch-2{ opacity:.95; transform:translateY(calc(var(--p) * 9vh))  scale(calc(1 + var(--p)*.22)); }
.cine-arch-3{ transform:translateY(calc(var(--p) * 24vh)) scale(calc(1 + var(--p)*.42)); }

/* hero platter - Adjusted for mobile width without breaking */
.cine-plate{
  position:absolute; left:50%; bottom:-14vh; 
  width:min(1180px, 115vw); /* Adjusted from 142vw to 115vw for mobile safety */
  transform:translateX(-50%) translateY(calc(var(--p) * -22vh)) scale(calc(.92 + var(--p)*.30))
            rotate(calc(var(--p) * -4deg));
  filter:drop-shadow(0 40px 70px rgba(40,12,4,.55));
  opacity:calc(.15 + var(--p) * 1.6);
}
.cine-arch svg,.cine-plate img{ width:100%; height:auto; display:block; }
.cine-arch{ display:flex; align-items:flex-end; }
.cine-arch svg{ width:100%; height:auto; }

/* grain + vignette over the whole stage */
.cine-grain{
  opacity:.16; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.cine-vig{
  pointer-events:none;
  background:radial-gradient(120% 100% at 50% 46%, transparent 42%, rgba(30,8,3,.55) 100%);
}

/* headline block */
.cine-copy{
  position:absolute; inset:0; display:grid; place-items:center;
  text-align:center; padding:0 var(--gut); color:#fff6e2;
  opacity:calc(1 - var(--p) * 1.55);
  transform:translateY(calc(var(--p) * -7vh)) scale(calc(1 - var(--p) * .05));
}
.cine-copy-in{ max-width:850px; display:grid; gap:clamp(14px,2vw,24px); justify-items:center; }
.cine-copy .eyebrow{ color:#ffdda0; }
.cine-copy h1{
  text-shadow:0 3px 34px rgba(48,14,2,.5);
  font-size:clamp(2.5rem,7.4vw,5.6rem);
}
.cine-copy p{
  color:#ffeed4; max-width:600px; opacity:.94;
  text-shadow:0 2px 18px rgba(48,14,2,.42);
}
.since{
  display:inline-flex; align-items:center; gap:11px;
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:#ffd89a;
}
.since::before,.since::after{
  content:""; width:34px; height:1px; background:rgba(255,216,154,.55);
}

/* second-beat copy, fades in as first fades out */
.cine-copy-2{
  position:absolute; inset:auto 0 clamp(56px,9vh,110px); display:grid;
  place-items:center; text-align:center; padding:0 var(--gut); color:#fff6e2;
  opacity:calc((var(--p) - .48) * 3.1);
  transform:translateY(calc((1 - var(--p)) * 4vh));
}
.cine-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:grid; justify-items:center; gap:9px; color:#ffdda0;
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
  opacity:calc(1 - var(--p) * 3.4);
}
.cine-cue i{
  display:block; width:1px; height:44px;
  background:linear-gradient(180deg,rgba(255,221,160,.9),transparent);
  animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{
  0%{ transform:scaleY(.25); transform-origin:top; opacity:0; }
  35%{ transform:scaleY(1); opacity:1; }
  100%{ transform:scaleY(1); transform-origin:bottom; opacity:0; }
}

/* steam wisps */
.steam{ position:absolute; inset:0; overflow:hidden; opacity:calc(.5 + var(--p)*.3); }
.steam span{
  position:absolute; bottom:16%; width:130px; height:130px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,246,226,.30),transparent 66%);
  filter:blur(11px); animation:steam 11s ease-in infinite;
}
@keyframes steam{
  0%{ transform:translateY(0) scale(.55); opacity:0; }
  22%{ opacity:.75; }
  100%{ transform:translateY(-62vh) scale(1.7); opacity:0; }
}

/* =============================================================== marquee == */
.marquee{
  background:var(--maroon); color:#f3ddb6; padding:13px 0;
  width: 100%; max-width: 100vw; overflow: hidden; /* Prevent marquee bleed */
  box-shadow:inset 0 1px 0 rgba(233,210,149,.14);
}
.marquee-in{ display:flex; gap:52px; width:max-content; animation:mq 34s linear infinite; }
.marquee:hover .marquee-in{ animation-play-state:paused; }
.marquee span{
  display:inline-flex; align-items:center; gap:52px; white-space:nowrap;
  font-size:.76rem; letter-spacing:.26em; text-transform:uppercase;
}
.marquee span::after{ content:"◆"; color:var(--gold); font-size:.6rem; letter-spacing:0; }
@keyframes mq{ to{ transform:translateX(-50%); } }

/* ========================================================= section heads == */
.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:22px; flex-wrap:wrap; margin-bottom:clamp(24px,3.6vw,44px);
}
.sec-head .stack{ gap:10px; max-width:640px; }
.sec-head.center{ flex-direction:column; align-items:center; text-align:center; }
.sec-head.center .stack{ justify-items:center; }

/* ========================================================= product card == */
.pcard{
  position:relative; display:flex; flex-direction:column;
  background:var(--paper); border-radius:var(--r-l); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-s);
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.pcard:hover{ transform:translateY(-7px); box-shadow:inset 0 0 0 1px var(--gold-l), var(--sh-l); }
.pcard-img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--cream-2); }
.pcard-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.05s var(--ease-out), opacity .5s; }
.pcard:hover .pcard-img img{ transform:scale(1.075); }
.pcard-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 52%,rgba(52,26,6,.30)); opacity:0; transition:opacity .6s var(--ease); }
.pcard:hover .pcard-img::after{ opacity:1; }
.pcard-flags{ position:absolute; top:11px; left:11px; display:grid; gap:6px; justify-items:start; }
.pcard-quick{ position:absolute; left:11px; right:11px; bottom:11px; transform:translateY(14px); opacity:0; transition:transform .55s var(--ease-out), opacity .45s var(--ease); }
.pcard:hover .pcard-quick{ transform:none; opacity:1; }
.pcard-bd{ display:grid; gap:9px; padding:16px 18px 18px; flex:1; }
.pcard-bd h3{ font-family:var(--display); font-size:1.14rem; font-weight:600; letter-spacing:-.01em; line-height:1.22; }
.pcard-note{ font-size:.815rem; color:var(--ink-3); line-height:1.5; }
.pcard-ft{ display:flex; align-items:baseline; gap:8px; margin-top:auto; padding-top:4px; }
.pcard-ft .price{ font-size:1.06rem; color:var(--maroon); }
.pcard-ft small{ color:var(--ink-3); font-size:.755rem; }

/* ========================================================= category tile == */
.cat-tile{ position:relative; display:flex; align-items:flex-end; min-height:270px; border-radius:var(--r-l); overflow:hidden; color:#fff6e4; box-shadow:var(--sh-m); }
.cat-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease-out), filter .7s; }
.cat-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(48,18,4,.05) 30%,rgba(48,18,4,.78)); }
.cat-tile:hover img{ transform:scale(1.09); }
.cat-tile-bd{ position:relative; z-index:1; padding:22px 24px; display:grid; gap:5px; }
.cat-tile-bd h3{ font-family:var(--display); font-size:1.42rem; font-weight:600; }
.cat-tile-bd small{ font-size:.775rem; letter-spacing:.13em; text-transform:uppercase; color:#ffd79a; }
.cat-tile.tall{ min-height:390px; }

/* ============================================================== feature == */
.split{ display:grid; gap:clamp(26px,4.4vw,66px); align-items:center; grid-template-columns:1.02fr 1fr; }
.split.rev > *:first-child{ order:2; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } .split.rev > *:first-child{ order:0; } }
.stat-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2.4vw,30px); text-align:center; }
.stat b{ display:block; font-family:var(--display); font-size:clamp(1.9rem,3.4vw,2.9rem); font-weight:600; line-height:1; color:var(--maroon); }
.stat small{ display:block; margin-top:8px; font-size:.7rem; letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3); }
.quote{ font-family:var(--display); font-size:clamp(1.28rem,2.5vw,1.95rem); line-height:1.42; font-weight:500; color:var(--ink); }

/* ============================================================ page head === */
.phead{ position:relative; padding-block:clamp(34px,5vw,62px) clamp(26px,3.4vw,40px); background:linear-gradient(180deg,var(--cream-2),var(--cream)); border-bottom:1px solid var(--line-2); overflow:hidden; }
.phead::before{ content:""; position:absolute; top:-40%; right:-8%; width:46vw; height:46vw; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(224,138,23,.13),transparent 66%); }
.phead .stack{ position:relative; max-width:720px; gap:12px; }
.crumbs{ display:flex; gap:8px; align-items:center; font-size:.775rem; color:var(--ink-3); }
.crumbs a:hover{ color:var(--maroon); }
.crumbs i{ font-style:normal; opacity:.5; }

/* =============================================================== shop ==== */
.shop-grid{ display:grid; gap:clamp(20px,3vw,38px); grid-template-columns:246px minmax(0,1fr); align-items:start; }
.side{ position:sticky; top:92px; display:grid; gap:20px; }
.side h4{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:11px; }
.side-list{ display:grid; gap:2px; }
.side-list button{ display:flex; justify-content:space-between; gap:10px; align-items:center; padding:9px 12px; border-radius:9px; text-align:left; font-size:.9rem; color:var(--ink-2); transition:all .3s var(--ease); }
.side-list button:hover{ background:var(--cream-2); color:var(--maroon); }
.side-list button.on{ background:var(--maroon); color:#fdf2dd; font-weight:500; }
.side-list button small{ opacity:.6; font-variant-numeric:tabular-nums; }
.side-list button.on small{ opacity:.8; }
.shop-bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid var(--line-2); }
.filter-toggle{ display:none; }
@media (max-width:900px){ .shop-grid{ grid-template-columns:1fr; } .side{ position:static; } .side.collapsed{ display:none; } .filter-toggle{ display:inline-flex; } }

/* ============================================================ product ==== */
.pdp{ display:grid; gap:clamp(26px,4vw,58px); grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); align-items:start; }
@media (max-width:900px){ .pdp{ grid-template-columns:1fr; } }
.gal{ display:grid; gap:12px; position:sticky; top:92px; }
@media (max-width:900px){ .gal{ position:static; } }
.gal-main{ position:relative; border-radius:var(--r-l); overflow:hidden; background:var(--cream-2); aspect-ratio:4/3; cursor:zoom-in; }
.gal-main img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out), opacity .4s; }
.gal-main.zoom img{ transform:scale(1.85); cursor:zoom-out; }
.gal-main::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(141,108,17,.18); }
.gal-thumbs{ display:flex; gap:10px; }
.gal-thumbs button{ width:82px; aspect-ratio:4/3; border-radius:10px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--line); opacity:.62; transition:opacity .35s, box-shadow .35s, transform .35s var(--ease); }
.gal-thumbs button:hover{ opacity:.9; transform:translateY(-2px); }
.gal-thumbs button.on{ opacity:1; box-shadow:inset 0 0 0 2px var(--saffron); }
.gal-thumbs img{ width:100%; height:100%; object-fit:cover; }
.pdp-info{ display:grid; gap:clamp(16px,2.2vw,24px); }
.pdp-price{ display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; }
.pdp-price .price{ font-size:clamp(1.7rem,3vw,2.2rem); color:var(--maroon); }
.pdp-price .strike{ font-size:1.06rem; }
.variants{ display:grid; gap:10px; }
.variant-opts{ display:flex; gap:10px; flex-wrap:wrap; }
.vopt{ display:grid; gap:2px; padding:11px 17px; border-radius:12px; text-align:left; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); cursor:pointer; transition:all .35s var(--ease); min-width:104px; }
.vopt:hover{ box-shadow:inset 0 0 0 1px var(--gold-l); transform:translateY(-2px); }
.vopt b{ font-size:.92rem; font-weight:500; }
.vopt span{ font-size:.8rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.vopt.on{ background:linear-gradient(180deg,#fffdf6,#fdf3e0); box-shadow:inset 0 0 0 1.6px var(--saffron), var(--sh-s); }
.vopt.on span{ color:var(--saffron-d); }
.spec{ display:grid; gap:0; }
.spec div{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px dashed var(--line); font-size:.88rem; }
.spec div:last-child{ border-bottom:0; }
.spec dt,.spec span:first-child{ color:var(--ink-3); }
.acc{ display:grid; }
.acc-item{ border-top:1px solid var(--line-2); }
.acc-item:last-child{ border-bottom:1px solid var(--line-2); }
.acc-hd{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:14px; padding:16px 2px; text-align:left; font-size:.95rem; font-weight:500; color:var(--ink); }
.acc-hd i{ font-style:normal; color:var(--saffron-d); transition:transform .4s var(--ease); }
.acc-item.open .acc-hd i{ transform:rotate(45deg); }
.acc-bd{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.acc-item.open .acc-bd{ grid-template-rows:1fr; }
.acc-bd > div{ overflow:hidden; }
.acc-bd p{ padding:0 2px 18px; color:var(--ink-2); font-size:.9rem; }

/* ============================================================== cart ===== */
.cart-grid{ display:grid; gap:clamp(22px,3.4vw,44px); grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); align-items:start; }
@media (max-width:900px){ .cart-grid{ grid-template-columns:1fr; } }
.cline{ display:grid; gap:16px; align-items:center; grid-template-columns:96px minmax(0,1fr) auto; padding:16px 0; border-bottom:1px solid var(--line-2); }
.cline:first-child{ padding-top:0; }
.cline-img{ width:96px; aspect-ratio:4/3; border-radius:11px; overflow:hidden; background:var(--cream-2); box-shadow:inset 0 0 0 1px var(--line-2); }
.cline-img img{ width:100%; height:100%; object-fit:cover; }
.cline-bd{ display:grid; gap:5px; min-width:0; }
.cline-bd b{ font-weight:500; font-size:.98rem; }
.cline-bd small{ color:var(--ink-3); font-size:.79rem; }
.cline-end{ display:grid; gap:9px; justify-items:end; }
@media (max-width:560px){ .cline{ grid-template-columns:76px minmax(0,1fr); } .cline-img{ width:76px; } .cline-end{ grid-column:1/-1; justify-items:start; display:flex; align-items:center; gap:16px; } }
.summary{ position:sticky; top:92px; display:grid; gap:15px; background:var(--paper); border-radius:var(--r-l); padding:clamp(18px,2.4vw,26px); box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-s); }
@media (max-width:900px){ .summary{ position:static; } }
.sum-line{ display:flex; justify-content:space-between; gap:14px; font-size:.92rem; }
.sum-line.total{ padding-top:14px; margin-top:2px; border-top:1px solid var(--line); font-size:1.12rem; font-weight:600; }
.sum-line.total span:last-child{ color:var(--maroon); }
.sum-line.off span:last-child{ color:var(--ok); }
.coupon-row{ display:flex; gap:9px; }
.coupon-row .input{ flex:1; }
.coupon-on{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; border-radius:11px; background:#eaf3e7; color:#2a6740; font-size:.86rem; }
.coupon-on button{ color:#2a6740; opacity:.6; font-size:.78rem; }
.coupon-on button:hover{ opacity:1; text-decoration:underline; }
.free-bar{ display:grid; gap:7px; }
.free-track{ height:5px; border-radius:9px; background:var(--cream-3); overflow:hidden; }
.free-fill{ height:100%; border-radius:9px; background:var(--warm-grad); transition:width .7s var(--ease-out); }

/* ============================================================ checkout === */
.co-grid{ display:grid; gap:clamp(22px,3.4vw,46px); grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:start; }
@media (max-width:900px){ .co-grid{ grid-template-columns:1fr; } }
.co-step{ display:grid; gap:16px; margin-bottom:clamp(26px,3.4vw,40px); }
.co-step-hd{ display:flex; align-items:center; gap:12px; }
.co-num{ width:29px; height:29px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--maroon); color:#fdf0d8; font-size:.82rem; font-weight:600; }
.form-grid{ display:grid; gap:14px; grid-template-columns:1fr 1fr; }
.form-grid .full{ grid-column:1/-1; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }
.bank-box{ display:grid; gap:9px; padding:16px 18px; border-radius:var(--r-m); background:var(--cream-2); font-size:.88rem; }
.bank-box div{ display:flex; justify-content:space-between; gap:14px; }
.bank-box b{ font-weight:500; font-variant-numeric:tabular-nums; }
.pay-opts{ display:grid; gap:11px; }
.pay-opt{ display:grid; gap:4px; padding:15px 18px; border-radius:var(--r-m); text-align:left; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); cursor:pointer; transition:all .35s var(--ease); }
.pay-opt:hover{ box-shadow:inset 0 0 0 1px var(--gold-l); }
.pay-opt b{ font-weight:500; font-size:.95rem; display:flex; align-items:center; gap:9px; }
.pay-opt small{ color:var(--ink-3); font-size:.82rem; line-height:1.55; }
.pay-opt.on{ background:linear-gradient(180deg,#fffdf6,#fdf3e0); box-shadow:inset 0 0 0 1.6px var(--saffron), var(--sh-s); }
.pay-opt .dot{ width:16px; height:16px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1.5px var(--line); transition:all .3s var(--ease); }
.pay-opt.on .dot{ background:var(--warm-grad); box-shadow:inset 0 0 0 1.5px var(--saffron-d); }
.err{ color:#a3281c; font-size:.78rem; }
.input.bad,.select.bad,.textarea.bad{ box-shadow:inset 0 0 0 1.5px #e0a79c; }
.mini-line{ display:flex; justify-content:space-between; gap:12px; font-size:.85rem; padding:7px 0; border-bottom:1px dashed var(--line-2); }
.mini-line:last-of-type{ border-bottom:0; }

/* =============================================================== order === */
.ok-seal{ width:76px; height:76px; border-radius:50%; margin-inline:auto; display:grid; place-items:center; background:var(--gold-grad); color:var(--maroon-d); box-shadow:var(--sh-m); animation:seal .8s var(--ease-out) both; }
@keyframes seal{ from{ transform:scale(.4) rotate(-24deg); opacity:0; } to{ transform:none; opacity:1; } }
.ok-card{ max-width:660px; margin-inline:auto; }
.ord-line{ display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px dashed var(--line); font-size:.9rem; }
.ord-line:last-child{ border-bottom:0; }

/* =============================================================== admin === */
.adm-gate{ min-height:74vh; display:grid; place-items:center; padding:40px var(--gut); }
.adm-gate .card{ width:min(410px,100%); }
.pin-in{ width:100%; text-align:center; letter-spacing:.7em; font-size:1.5rem; padding:.6em .2em .6em .9em; font-variant-numeric:tabular-nums; }
.adm-shell{ display:grid; grid-template-columns:216px minmax(0,1fr); min-height:100vh; }
.adm-side{ background:var(--maroon-d); color:#eddcb9; padding:22px 16px; display:grid; gap:22px; align-content:start; position:sticky; top:0; height:100vh; overflow-y:auto; }
.adm-side .brand-txt b{ color:#fff3da; }
.adm-nav{ display:grid; gap:3px; }
.adm-nav button{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; text-align:left; font-size:.9rem; color:#eddcb9; opacity:.82; transition:all .3s var(--ease); }
.adm-nav button:hover{ background:rgba(255,240,205,.09); opacity:1; }
.adm-nav button.on{ background:var(--gold-grad); color:var(--maroon-d); opacity:1; font-weight:500; }
.adm-main{ padding:clamp(20px,3vw,38px); background:var(--cream); min-width:0; }
.adm-hd{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:24px; }
@media (max-width:820px){ .adm-shell{ grid-template-columns:1fr; } .adm-side{ position:static; height:auto; } .adm-nav{ grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; } }
.kpi-row{ display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){ .kpi-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.kpi{ background:var(--paper); border-radius:var(--r-m); padding:17px 19px; box-shadow:inset 0 0 0 1px var(--line-2); }
.kpi b{ display:block; font-family:var(--display); font-size:1.75rem; font-weight:600; line-height:1.1; color:var(--maroon); }
.kpi small{ display:block; margin-top:4px; font-size:.68rem; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-3); }
.tbl-wrap{ overflow-x:auto; border-radius:var(--r-m); background:var(--paper); box-shadow:inset 0 0 0 1px var(--line-2); }
.tbl{ min-width:640px; font-size:.88rem; }
.tbl th{ text-align:left; padding:12px 14px; font-size:.67rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); font-weight:500; border-bottom:1px solid var(--line-2); white-space:nowrap; }
.tbl td{ padding:12px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl tbody tr{ transition:background .25s; }
.tbl tbody tr:hover{ background:var(--cream); }
.tbl-img{ width:52px; aspect-ratio:4/3; border-radius:7px; object-fit:cover; background:var(--cream-2); }
.act-row{ display:flex; gap:6px; }
.mini{ padding:5px 10px; border-radius:8px; font-size:.72rem; letter-spacing:.06em; box-shadow:inset 0 0 0 1px var(--line); color:var(--ink-2); transition:all .3s var(--ease); white-space:nowrap; }
.mini:hover{ background:var(--cream-2); color:var(--maroon); }
.mini.del:hover{ background:#fbe6e2; color:#a3281c; box-shadow:inset 0 0 0 1px #f0c8c0; }

.modal{ position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:20px; background:rgba(36,22,10,.5); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .35s var(--ease); }
.modal.open{ opacity:1; pointer-events:auto; }
.modal-in{ width:min(620px,100%); max-height:88vh; overflow-y:auto; background:var(--paper); border-radius:var(--r-l); padding:clamp(20px,3vw,30px); box-shadow:var(--sh-l); transform:translateY(16px) scale(.98); transition:transform .45s var(--ease-out); }
.modal.open .modal-in{ transform:none; }
.drop{ display:grid; place-items:center; gap:7px; padding:22px; text-align:center; border-radius:var(--r-m); border:1.6px dashed var(--line); background:var(--cream); color:var(--ink-3); font-size:.85rem; cursor:pointer; transition:all .3s var(--ease); }
.drop:hover,.drop.hot{ border-color:var(--saffron); background:#fdf4e2; color:var(--saffron-d); }
.img-prev{ width:100%; aspect-ratio:4/3; border-radius:var(--r-m); object-fit:cover; background:var(--cream-2); box-shadow:inset 0 0 0 1px var(--line-2); }
.f2,.f3{ display:grid; gap:13px; }
.f2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.f3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:640px){ .f2,.f3{ grid-template-columns:1fr; } }
.vrow{ display:grid; gap:7px; align-items:center; grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,.9fr) auto; }
.vrow .input{ padding:.55em .7em; font-size:.88rem; }
.adm-main .tbl .select{ padding:.45em 2em .45em .7em; font-size:.82rem; }
.adm-main h4{ font-size:.95rem; font-weight:500; }
.adm-nav button{ width:100%; }
.toast.err{ background:linear-gradient(135deg,#8e1c15,#611210); }
.warn{ display:flex; gap:11px; padding:14px 16px; border-radius:var(--r-m); background:#fdf2dc; box-shadow:inset 0 0 0 1px #efdcae; font-size:.84rem; color:#7a5410; line-height:1.55; }
.warn.good{ background:#eaf6ec; box-shadow:inset 0 0 0 1px #c4e3cb; color:#245c33; }
.warn svg{ flex:none; margin-top:2px; }

/* =========================================== explore more categories === */
.explore{ margin-top:clamp(18px,2.6vw,28px); padding:clamp(16px,2vw,22px); border-radius:var(--r-m); background:rgba(255,255,255,.62); box-shadow:inset 0 0 0 1px rgba(120,72,20,.11); }
.explore-hd{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
.explore-hd a{ color:var(--maroon); text-decoration:none; font-weight:500; }
.explore-hd a:hover{ text-decoration:underline; text-underline-offset:3px; }
.explore-row{ display:flex; flex-wrap:wrap; gap:9px; }
.explore-row a{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; padding:.5em .95em; border-radius:999px; background:#fff; color:var(--ink); font-size:.86rem; box-shadow:inset 0 0 0 1px rgba(120,72,20,.16); transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); }
.explore-row a:hover{ transform:translateY(-2px); background:var(--saffron); color:#fff; box-shadow:0 8px 18px -8px rgba(140,29,32,.5); }
.explore-row a b{ font-weight:500; }
.explore-row a small{ opacity:.62; font-size:.78rem; }
.explore-row a:hover small{ opacity:.85; }
.lnk{ background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.lnk:hover{ opacity:.72; }

/* ============================================================== policy === */
.doc{ max-width:760px; padding:0 15px; }
.doc h2{ font-family:var(--display); font-size:clamp(1.3rem,2.2vw,1.65rem); font-weight:600; margin-top:clamp(28px,3.4vw,42px); margin-bottom:11px; }
.doc h3{ font-size:1.02rem; font-weight:500; margin-top:22px; margin-bottom:7px; }
.doc p{ margin-bottom:14px; color:var(--ink-2); }
.doc ul{ margin:0 0 16px 20px; }
.doc li{ margin-bottom:8px; color:var(--ink-2); }
.doc-toc{ display:grid; gap:7px; padding:18px 20px; border-radius:var(--r-m); background:var(--paper); box-shadow:inset 0 0 0 1px var(--line-2); margin-bottom:12px; }
.doc-toc a{ font-size:.88rem; color:var(--ink-2); }
.doc-toc a:hover{ color:var(--maroon); }

/* --------------------------------------------------- bento + visit card -- */
.cat-bento{ display:grid; gap:clamp(14px,2vw,24px); grid-template-columns:repeat(6,minmax(0,1fr)); }
.cat-bento > *:nth-child(1), .cat-bento > *:nth-child(2){ grid-column:span 3; }
.cat-bento > *:nth-child(n+3){ grid-column:span 2; }
@media (max-width:900px){ .cat-bento{ grid-template-columns:repeat(2,minmax(0,1fr)); } .cat-bento > *{ grid-column:span 1 !important; } }
@media (max-width:560px){ .cat-bento{ grid-template-columns:1fr; } }
.visit{ display:grid; grid-template-columns:1.1fr 1fr; overflow:hidden; }
.map-frame{ background: radial-gradient(120% 100% at 18% 0%, rgba(240,203,124,.5), transparent 62%), var(--cream-2); }
.map-note{ position:absolute; inset:0; z-index:1; display:grid; align-content:center; justify-items:start; gap:11px; padding:clamp(20px,3.2vw,34px); }
.map-addr{ margin:0; color:var(--ink-2); line-height:1.65; }
.map-live{ position:absolute; inset:0; z-index:2; width:100%; height:100%; border:0; display:block; opacity:0; transition:opacity .6s ease; }
.map-frame.map-ready .map-live{ opacity:1; }
.map-frame.map-ready .map-note{ display:none; }
@media (max-width:820px){ .visit{ grid-template-columns:1fr; } .visit > .frame{ order:-1; min-height:220px; } .visit > .map-frame{ min-height:270px; } }

/* ============================================================== empty ==== */
.empty{ display:grid; place-items:center; gap:14px; text-align:center; padding:clamp(46px,8vw,90px) 20px; color:var(--ink-3); }
.empty svg{ opacity:.35; }
.skel{ border-radius:var(--r-l); background:linear-gradient(100deg, var(--cream-2) 30%, var(--cream-3) 48%, var(--cream-2) 66%); background-size:220% 100%; animation:skel 1.5s linear infinite; aspect-ratio:4/3; }
@keyframes skel{ to{ background-position:-120% 0; } }

/* ============================================================ reviews ==== */
.rev-top{ display:grid; gap:clamp(20px,3vw,40px); align-items:end; grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr) auto; padding-bottom:clamp(20px,2.6vw,30px); border-bottom:1px solid var(--line-2); }
.rev-dist{ display:grid; gap:5px; }
.rev-bar{ display:grid; grid-template-columns:14px 1fr 26px; gap:9px; align-items:center; }
.rev-bar small{ font-size:.76rem; color:var(--ink-3); text-align:right; }
.rev-track{ height:6px; border-radius:99px; background:var(--cream-2); overflow:hidden; box-shadow:inset 0 0 0 1px var(--line-2); }
.rev-fill{ display:block; height:100%; border-radius:99px; background:var(--warm-grad); transition:width .8s var(--ease); }
.rev-cta{ justify-self:end; }
.rev-list{ display:grid; gap:clamp(14px,1.8vw,20px); margin-top:clamp(24px,3vw,36px); grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); }
.rev{ display:grid; gap:11px; align-content:start; padding:clamp(18px,2.2vw,24px); border-radius:var(--r-l); background:var(--paper); box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-s); }
.rev p{ margin:0; font-size:.92rem; line-height:1.68; color:var(--ink-2); }
.rev-who{ color:var(--ink); font-weight:500; }
.rev-form{ display:grid; gap:15px; margin-top:clamp(22px,2.6vw,32px); padding:clamp(20px,2.6vw,30px); border-radius:var(--r-l); background:var(--cream); box-shadow:inset 0 0 0 1px var(--line); animation:revIn .45s var(--ease-out) both; }
@keyframes revIn{ from{ opacity:0; transform:translateY(-10px); } }
.rev-form h3{ margin:0; }
.rev-form textarea.input{ resize:vertical; font-family:var(--sans); }
.pick-stars{ display:flex; gap:4px; }
.pick-stars button{ display:grid; place-items:center; width:38px; height:38px; padding:0; border:0; border-radius:var(--r-s); cursor:pointer; color:#cfc0a4; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line-2); transition:color .18s var(--ease), transform .18s var(--ease); }
.pick-stars button svg{ width:19px; height:19px; }
.pick-stars button.on{ color:#d9a626; transform:translateY(-2px); }
.pick-stars button:focus-visible{ outline:2px solid var(--saffron); outline-offset:2px; }
@media (max-width:860px){ .rev-top{ grid-template-columns:1fr; align-items:start; } .rev-cta{ justify-self:start; } }

/* ======================================================= LOADING SCREEN === */
#kaint-loader { position: fixed; inset: 0; background-color: var(--maroon-d); z-index: 999999; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.6s var(--ease-out), visibility 0.6s var(--ease-out); }
.loader-spinner { width: 55px; height: 55px; border: 4px solid rgba(233, 210, 149, 0.15); border-top: 4px solid var(--gold-l); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 24px; }
.loader-text { color: #fff6e2; font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 600; font-style: italic; letter-spacing: 0.02em; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
body.loaded #kaint-loader { opacity: 0; visibility: hidden; }

/* =========================================================================
   MOBILE OPTIMIZATION FIXES (SAFE MODE)
   ========================================================================= */

/* Use clip to safely contain horizontal overflow without breaking sticky */
html, body {
  width: 100%; max-width: 100vw;
  overflow-x: clip !important; /* Standard fix for mobile overflow + sticky */
  -webkit-text-size-adjust: 100%;
  margin: 0; padding: 0;
}

/* Prevent Auto-Zoom on iOS */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], textarea, select {
  font-size: 16px !important;
}

/* Modal specific fixes to prevent box-model overflow */
.auth-box, .orders-box { width: 90vw !important; max-width: 400px; margin: 0 auto; box-sizing: border-box; }
.orders-box { max-width: 600px; }
.tbl-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 600px) { .row-w, .between { gap: 10px; } }

/* MODALS FOR AUTH & MY ORDERS */
#authModal, #ordersModal { position: fixed; inset: 0; z-index: 99999; display: flex; place-items: center; justify-content: center; padding: 20px; background: rgba(36,22,10,.7); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
#authModal.open, #ordersModal.open { opacity: 1; pointer-events: auto; }
.auth-box, .orders-box { background: var(--paper); border-radius: var(--r-l); padding: 30px 24px; box-shadow: var(--sh-l); transform: translateY(16px); transition: transform .45s ease-out; text-align: center; max-height: 85vh; overflow-y: auto; }
#authModal.open .auth-box, #ordersModal.open .orders-box { transform: none; }
.orders-box { text-align: left; }
.my-order-item { background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 12px; display: grid; gap: 6px; box-sizing: border-box; }
.google-btn { display: flex; align-items: center; justify-content: center; gap: 12px; background: #fff; color: #3c4043; border: 1px solid #dadce0; padding: 12px; border-radius: 8px; font-weight: 500; cursor: pointer; transition: background 0.3s; width: 100%; font-size: 1rem; font-family: var(--sans); box-sizing: border-box; }
.google-btn:hover { background: #f8f9fa; }

.google-btn img {
  width: 24px;
  height: 24px;
}