/* ============================================================
   CHOCO'S BITES — exact build
   Dark nav + hero, WHITE content area below.
   ============================================================ */
:root{
  --amber:#E0A73C;
  --amber-2:#D4952B;
  --amber-deep:#B87E1C;
  --dark:#100C08;
  --dark-2:#1A1410;
  --page:#FAF8F5;
  --white:#FFFFFF;
  --line:#EAE4DC;
  --line-dark:#2A2118;
  --text:#2B2622;
  --text-2:#6E655C;
  --muted:#9A9088;
  --ok:#4FB877;
  --bad:#E5484D;
  --f-display:"Bebas Neue","Anton",Impact,sans-serif;
  --f-script:"Sacramento","Kaushan Script",cursive;
  --f-body:"Nunito Sans","Nunito",system-ui,sans-serif;
  --shadow-sm:0 1px 3px rgba(30,25,20,.08);
  --shadow:0 4px 18px rgba(30,25,20,.10);
  --shadow-lg:0 14px 44px rgba(30,25,20,.16);
}

*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  width:100%;
  max-width:100%;
}
body{
  font-family:var(--f-body);background:var(--page);color:var(--text);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  max-width:100%;
  position:relative;
}
/* nothing may ever exceed the screen width */
img,video,iframe,table{max-width:100%}
img{max-width:100%;display:block}
button,input,textarea,select{font-family:inherit;font-size:inherit}
button{cursor:pointer;border:none;background:none;color:inherit}
a{text-decoration:none;color:inherit}

.wrap{width:min(1240px,100%);margin:0 auto;padding:0 1.4rem}

/* ============ NAV ============ */
.nav{background:var(--dark);position:sticky;top:0;z-index:200}
.nav-in{display:flex;align-items:center;gap:1.4rem;height:62px;max-width:100%;overflow:hidden}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:52px;width:auto;object-fit:contain}
.brand .fallback{
  width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#E8C173,#B87E1C 55%,#4A2F10);
  display:grid;place-items:center;font-size:1.4rem;
  border:2px solid #D4A24A;
}
.nav-links{display:flex;gap:1.55rem;margin-left:1.2rem}
.nav-links a{
  font-size:.925rem;font-weight:600;color:#D8D2CB;padding:.35rem 0;
  position:relative;transition:color .16s;white-space:nowrap;
}
.nav-links a:hover{color:#fff}
.nav-links a.on{color:var(--amber)}
.nav-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;background:var(--amber);border-radius:2px}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:.55rem}
.nico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#E4DED7;font-size:1.05rem;position:relative;transition:.16s}
.nico:hover{background:rgba(255,255,255,.08);color:var(--amber)}
.cart-count{
  position:absolute;top:1px;right:1px;min-width:18px;height:18px;padding:0 5px;
  border-radius:99px;background:var(--amber);color:#211705;font-size:.66rem;font-weight:800;
  display:grid;place-items:center;line-height:1;
}
.nav-cta{
  background:var(--amber);color:#211705;font-weight:800;font-size:.82rem;letter-spacing:.03em;
  padding:.62rem 1.35rem;border-radius:7px;margin-left:.5rem;transition:.16s;white-space:nowrap;
}
.nav-cta:hover{background:var(--amber-2)}
.burger-b{display:none;color:#E4DED7;font-size:1.35rem;width:40px;height:40px}

/* ============ HERO ============ */
.hero{
  position:relative;background:var(--dark);overflow:hidden;
  min-height:clamp(360px,32vw,470px);display:flex;align-items:center;
}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:right center;
  display:block;
}
/* banner is already dark on the left, so only a soft blend is needed */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,
    rgba(16,12,8,.92) 0%,
    rgba(16,12,8,.78) 22%,
    rgba(16,12,8,.34) 38%,
    rgba(16,12,8,0) 52%);
}
.hero-nobg{
  position:absolute;inset:0;
  background:
    radial-gradient(760px 420px at 74% 48%, rgba(224,167,60,.20), transparent 62%),
    linear-gradient(120deg,#100C08 0%,#1C1510 52%,#241A12 100%);
}
.hero-in{position:relative;z-index:2;padding:3rem 1.4rem 4.2rem;width:min(1240px,100%);margin:0 auto}
.hero-copy{max-width:min(560px,100%)}
.script{
  font-family:var(--f-script);font-size:2.7rem;color:var(--amber);
  line-height:1;margin-bottom:-.15rem;letter-spacing:.01em;
}
.hero h1{
  font-family:var(--f-display);font-size:clamp(3.2rem,8.2vw,5.6rem);
  color:#fff;line-height:.92;letter-spacing:.012em;text-transform:uppercase;
  margin-bottom:.85rem;
  text-shadow:0 4px 24px rgba(0,0,0,.5);
}
.hero .lede{color:#D6CFC7;font-size:1rem;line-height:1.55;max-width:34ch;margin-bottom:1.5rem}
.hero-btns{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:2rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.78rem 1.5rem;border-radius:8px;font-weight:800;font-size:.86rem;
  letter-spacing:.03em;transition:transform .15s,background .15s,box-shadow .15s,border-color .15s;
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-amber{background:var(--amber);color:#211705;box-shadow:0 4px 16px rgba(184,126,28,.35)}
.btn-amber:hover{background:var(--amber-2)}
.btn-dark-out{border:1.6px solid rgba(255,255,255,.55);color:#fff}
.btn-dark-out:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-lg{padding:.9rem 1.7rem;font-size:.92rem}
.btn-sm{padding:.5rem 1rem;font-size:.8rem}
.btn-block{width:100%}

.hero-feats{display:flex;gap:0;flex-wrap:wrap;align-items:center}
.hf{display:flex;align-items:center;gap:.6rem;padding-right:1.5rem;margin-right:1.5rem;border-right:1px solid rgba(255,255,255,.18)}
.hf:last-child{border-right:none;margin-right:0;padding-right:0}
.hf .i{font-size:1.5rem;color:var(--amber);flex-shrink:0}
.hf b{display:block;font-size:.74rem;font-weight:800;letter-spacing:.055em;color:#fff;text-transform:uppercase}
.hf span{font-size:.74rem;color:#A79E95}

/* ============ TRUST STRIP (white card over hero edge) ============ */
.trust-hold{position:relative;z-index:10;margin-top:-2.6rem}
.trust{
  background:#fff;border-radius:12px;box-shadow:var(--shadow-lg);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:100%;overflow:hidden;
}
.tr{display:flex;align-items:center;gap:.85rem;padding:1.15rem 1.3rem;border-right:1px solid var(--line)}
.tr:last-child{border-right:none}
.tr .ti{
  width:44px;height:44px;border-radius:50%;background:var(--dark);color:var(--amber);
  display:grid;place-items:center;font-size:1.1rem;flex-shrink:0;
}
.tr b{display:block;font-size:.82rem;font-weight:800;letter-spacing:.04em;color:#1D1915;text-transform:uppercase}
.tr span{font-size:.78rem;color:var(--text-2)}

/* ============ SHOP (white area) ============ */
.shop{display:grid;grid-template-columns:196px minmax(0,1fr) 268px;gap:1.5rem;padding:2.4rem 0 3rem;align-items:start;max-width:100%}

.panel{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm);max-width:100%;min-width:0;overflow:hidden}
.rail{position:sticky;top:78px}

.cat-head{font-size:.68rem;font-weight:800;letter-spacing:.13em;color:var(--text-2);padding:1rem 1.1rem .6rem}
.cats{padding:0 .55rem .8rem}
.cat{
  display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;
  padding:.6rem .65rem;border-radius:8px;font-size:.855rem;font-weight:600;color:#4A423A;transition:.14s;
}
.cat:hover{background:#F6F2EC}
.cat.on{background:#F5EAD6;color:#8A5F10;font-weight:700}
.cat .ci{font-size:1.05rem;width:20px;text-align:center;color:var(--amber-deep)}
.cat .ch{margin-left:auto;color:#BDB3A8;font-size:.85rem}

.special-tile{
  margin:.3rem .8rem 1rem;background:var(--dark);border-radius:10px;
  padding:1rem .9rem;display:flex;align-items:center;gap:.7rem;
}
.special-tile .s{font-size:1.5rem;color:var(--amber)}
.special-tile b{display:block;font-size:.74rem;font-weight:800;letter-spacing:.06em;color:var(--amber);text-transform:uppercase}
.special-tile span{font-size:.76rem;color:#B0A79E}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.9rem}
.sec-head h2{font-family:var(--f-body);font-weight:800;font-size:1.22rem;color:#1F1B17}
.sec-head a{font-size:.8rem;color:var(--amber-deep);font-weight:700}

/* dish cards */
.dishes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(176px,100%),1fr));gap:.9rem}
.dish{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column;min-width:0;max-width:100%}
.dish:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.dish-img{aspect-ratio:1.4;position:relative;background:#F2ECE4;display:grid;place-items:center;font-size:2.6rem;overflow:hidden;min-width:0}
.dish-img img{width:100%;height:100%;object-fit:cover}
.fav{
  position:absolute;top:.45rem;right:.45rem;width:27px;height:27px;border-radius:50%;
  background:rgba(255,255,255,.92);color:#8A8078;display:grid;place-items:center;font-size:.85rem;
  box-shadow:0 1px 5px rgba(0,0,0,.14);transition:.15s;
}
.fav:hover,.fav.on{color:#E5484D}
.tag{
  position:absolute;top:.45rem;left:.45rem;background:var(--amber);color:#211705;
  font-size:.62rem;font-weight:800;letter-spacing:.05em;padding:.16rem .48rem;border-radius:4px;
}
.dish-b{padding:.7rem .75rem .75rem;display:flex;flex-direction:column;flex:1}
.dish-b .nm{font-size:.845rem;font-weight:700;color:#231F1B;line-height:1.32;margin-bottom:.35rem;min-height:2.2em}
.dish-b .pr{font-family:var(--f-body);font-weight:800;font-size:1.02rem;color:#1F1B17;margin-bottom:.55rem}
.add{
  width:100%;background:var(--amber);color:#211705;border-radius:6px;padding:.48rem;
  font-weight:800;font-size:.78rem;display:flex;align-items:center;justify-content:center;gap:.35rem;transition:.15s;
}
.add:hover{background:var(--amber-2)}

/* promo tiles */
.promos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.9rem;margin-top:1.1rem;max-width:100%}
.promo{
  border-radius:11px;overflow:hidden;position:relative;min-height:148px;min-width:0;max-width:100%;
  display:flex;align-items:center;padding:1.3rem;
  background:linear-gradient(100deg,#241A12 0%,#3A2716 62%,#4A3016 100%);
}
.promo.sweet{background:linear-gradient(100deg,#241218 0%,#3E1C2A 62%,#52243A 100%)}
.promo-bg{position:absolute;inset:0;background-size:cover;background-position:center right;opacity:.55}
.promo-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(20,14,10,.95) 12%,rgba(20,14,10,.35) 58%,transparent 82%)}
.promo-c{position:relative;z-index:2;max-width:60%}
.promo h3{font-family:var(--f-display);font-size:1.22rem;color:#fff;line-height:1.06;text-transform:uppercase;letter-spacing:.01em}
.promo h3 em{color:var(--amber);font-style:normal;display:block}
.promo p{font-size:.78rem;color:#CFC6BC;margin:.35rem 0 .75rem}
.promo .em{position:absolute;right:.6rem;bottom:.2rem;font-size:4.4rem;opacity:.5;z-index:1}

/* ============ ORDER PANEL ============ */
.order-p{padding:1.1rem;position:sticky;top:78px}
.op-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem}
.op-head h3{font-family:var(--f-body);font-weight:800;font-size:.98rem;letter-spacing:.02em;color:#1F1B17}
.op-head button{font-size:.78rem;color:var(--amber-deep);font-weight:700}
.op-empty{text-align:center;padding:1.8rem .5rem;color:var(--muted)}
.op-empty .e{font-size:2.2rem;display:block;margin-bottom:.4rem;opacity:.5}
.op-empty span{font-size:.82rem}
.oi{display:flex;gap:.65rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.oi-img{width:44px;height:44px;border-radius:7px;flex-shrink:0;background:#F2ECE4;display:grid;place-items:center;font-size:1.2rem;overflow:hidden}
.oi-img img{width:100%;height:100%;object-fit:cover}
.oi-b{flex:1;min-width:0}
.oi-b .n{font-size:.79rem;font-weight:600;color:#2B2622;line-height:1.3}
.oi-b .p{font-size:.82rem;font-weight:800;color:var(--amber-deep);margin-top:.1rem}
.oi-x{color:#B5ABA1;font-size:.85rem;align-self:flex-start;padding:0 .1rem}
.oi-x:hover{color:var(--bad)}
.stepper{display:inline-flex;align-items:center;gap:.15rem;background:#F6F2EC;border:1px solid var(--line);border-radius:99px;padding:.1rem;margin-top:.35rem}
.stepper button{width:22px;height:22px;border-radius:50%;color:#6E655C;font-weight:800;font-size:.82rem;display:grid;place-items:center}
.stepper button:hover{background:#fff;color:var(--amber-deep)}
.stepper span{font-size:.78rem;font-weight:700;min-width:18px;text-align:center}
.op-sum{padding-top:.85rem}
.op-line{display:flex;justify-content:space-between;font-size:.83rem;color:var(--text-2);padding:.26rem 0}
.op-line b{color:#2B2622;font-weight:700}
.op-total{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0 .95rem;margin-top:.35rem;border-top:1px solid var(--line)}
.op-total span{font-size:.9rem;font-weight:800;color:#1F1B17}
.op-total b{font-family:var(--f-body);font-weight:800;font-size:1.35rem;color:#1F1B17}

/* ============ SECTIONS ============ */
.sec{padding:3.2rem 0}
.sec.tint{background:#F4EFE8}
.sec.dark{background:var(--dark)}
.sec-title{text-align:center;margin-bottom:1.9rem}
.sec-title h2{font-family:var(--f-display);font-size:2.1rem;color:#1B1713;text-transform:uppercase;letter-spacing:.01em}
.sec.dark .sec-title h2{color:#fff}
.sec-title p{color:var(--text-2);font-size:.93rem;margin-top:.25rem}
.sec.dark .sec-title p{color:#A79E95}

.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.4rem;align-items:center;max-width:100%}
.about-art{
  aspect-ratio:1.35;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);
  background:linear-gradient(150deg,#2A1E14,#3E2A18 55%,#4A3016);
  display:grid;place-items:center;
}
.about-art span{font-size:5.5rem;opacity:.85;filter:drop-shadow(0 6px 18px rgba(0,0,0,.4))}
.about-art img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.about h2{font-family:var(--f-display);font-size:2rem;text-transform:uppercase;margin-bottom:.7rem;color:#1B1713}
.about p{color:var(--text-2);margin-bottom:.9rem;font-size:.95rem}
.about-stats{display:flex;gap:2.2rem;margin-top:1.3rem}
.about-stats b{display:block;font-family:var(--f-display);font-size:1.9rem;color:var(--amber-deep)}
.about-stats span{font-size:.79rem;color:var(--muted)}

.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:.9rem}
.rev{background:#fff;border:1px solid var(--line);border-radius:11px;padding:1.15rem;box-shadow:var(--shadow-sm)}
.rev .st{color:var(--amber);font-size:.88rem;letter-spacing:.08em;margin-bottom:.45rem}
.rev p{font-size:.86rem;color:var(--text-2);margin-bottom:.8rem;line-height:1.55}
.rev .who{display:flex;align-items:center;gap:.6rem}
.rev .av{width:34px;height:34px;border-radius:50%;background:var(--amber);color:#211705;display:grid;place-items:center;font-weight:800;font-size:.82rem}
.rev .who b{display:block;font-size:.83rem;color:#231F1B}
.rev .who span{font-size:.73rem;color:var(--muted)}

.contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:.9rem}
.cc{background:#fff;border:1px solid var(--line);border-radius:11px;padding:1.3rem;text-align:center;box-shadow:var(--shadow-sm)}
.cc .i{font-size:1.6rem;color:var(--amber-deep);margin-bottom:.4rem}
.cc b{display:block;font-size:.87rem;color:#231F1B;margin-bottom:.15rem}
.cc span{font-size:.84rem;color:var(--text-2)}

/* ============ FOOTER ============ */
.foot{background:var(--dark);padding:2.4rem 0 1.5rem;text-align:center}
.foot .brand{justify-content:center;margin-bottom:.9rem}
.foot .fl{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin:.9rem 0}
.foot .fl a{font-size:.85rem;color:#B0A79E}
.foot .fl a:hover{color:var(--amber)}
.foot p{font-size:.82rem;color:#7E766E}

/* ============ MODAL ============ */
.modal{position:fixed;inset:0;z-index:500;background:rgba(20,14,10,.7);backdrop-filter:blur(5px);display:none;place-items:center;padding:1.2rem}
.modal.open{display:grid}
.mcard{background:#fff;border-radius:16px;padding:1.6rem;width:min(450px,100%);max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:mIn .28s cubic-bezier(.2,.9,.3,1.2)}
@keyframes mIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.mcard h3{font-family:var(--f-body);font-weight:800;font-size:1.15rem;color:#1F1B17;margin-bottom:.25rem}
.mcard .sub{color:var(--text-2);font-size:.86rem;margin-bottom:1.1rem}
.macts{display:flex;gap:.65rem;margin-top:1.2rem}
.macts .btn{flex:1}
.btn-out{border:1.5px solid var(--line);color:#4A423A}
.btn-out:hover{border-color:var(--amber);color:var(--amber-deep)}

.field{margin-bottom:.8rem}
.field label{display:block;font-size:.78rem;font-weight:700;color:var(--text-2);margin-bottom:.3rem}
.field input,.field textarea{
  width:100%;background:#FBF9F6;border:1px solid var(--line);border-radius:8px;
  padding:.68rem .85rem;color:var(--text);outline:none;transition:border-color .15s;
}
.field input:focus,.field textarea:focus{border-color:var(--amber);background:#fff}
.field input::placeholder{color:#B5ABA1}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.msg{font-size:.83rem;margin-top:.5rem;min-height:1.2em}
.msg.err{color:var(--bad)}
.msg.ok{color:var(--ok)}
.pills{display:flex;gap:.5rem;flex-wrap:wrap}
.pill{border:1.5px solid var(--line);border-radius:99px;padding:.45rem .95rem;font-size:.82rem;font-weight:700;color:var(--text-2);transition:.15s}
.pill.on{background:var(--amber);border-color:var(--amber);color:#211705}
.bank{background:#FBF7F0;border:1px solid var(--line);border-radius:10px;padding:.9rem;margin-top:.7rem}
.bank .r{display:flex;justify-content:space-between;font-size:.85rem;padding:.25rem 0;color:var(--text-2)}
.bank .r b{color:#231F1B}
.copy{background:#fff;border:1px solid var(--line);border-radius:5px;padding:.08rem .4rem;font-size:.68rem;color:var(--amber-deep);margin-left:.35rem}

.toast{position:fixed;left:50%;bottom:1.3rem;transform:translateX(-50%);z-index:700;background:#211A14;color:#fff;border-radius:10px;padding:.75rem 1.15rem;font-size:.86rem;font-weight:600;box-shadow:var(--shadow-lg);animation:tIn .28s ease;max-width:calc(100vw - 2rem);text-align:center}
@keyframes tIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---- LOGO PRELOADER ---- */
.load{display:grid;place-items:center;padding:2.4rem;gap:.7rem}
.spin{
  width:58px;height:58px;border-radius:50%;
  background:url('../images/logo.jpg') center/cover no-repeat;
  animation:logoPulse 1.15s ease-in-out infinite;
  box-shadow:0 4px 18px rgba(184,126,28,.35);
}
@keyframes logoPulse{
  0%,100%{transform:scale(.9);opacity:.65}
  50%{transform:scale(1.06);opacity:1}
}
.load small{font-size:.76rem;color:var(--muted);font-weight:600}

/* full-screen overlay while something is working */
.cb-loading{
  position:fixed;inset:0;z-index:900;
  background:rgba(16,12,8,.72);backdrop-filter:blur(4px);
  display:grid;place-items:center;gap:.8rem;
  animation:fadeIn .18s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.cb-loading .mark{
  width:74px;height:74px;border-radius:50%;
  background:url('../images/logo.jpg') center/cover no-repeat;
  animation:logoPulse 1.15s ease-in-out infinite;
  box-shadow:0 6px 26px rgba(0,0,0,.5);
}
.cb-loading .txt{
  color:#F0E9E0;font-size:.85rem;font-weight:700;letter-spacing:.02em;
  text-align:center;
}

/* small inline spinner for buttons */
.btn-spin{
  width:16px;height:16px;border-radius:50%;display:inline-block;
  background:url('../images/logo.jpg') center/cover no-repeat;
  animation:logoPulse .9s ease-in-out infinite;vertical-align:-3px;
}

/* ============ SEARCH ============ */
.search-wrap{
  position:fixed;inset:0;z-index:450;background:rgba(16,12,8,.82);
  backdrop-filter:blur(6px);display:none;padding:1.2rem;
}
.search-wrap.open{display:block}
.search-box{
  width:min(620px,100%);margin:4.5rem auto 0;background:#fff;
  border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden;
  animation:mIn .26s cubic-bezier(.2,.9,.3,1.2);
}
.search-bar{display:flex;align-items:center;gap:.6rem;padding:.9rem 1rem;border-bottom:1px solid var(--line)}
.search-bar .si{font-size:1.05rem;color:var(--muted)}
.search-bar input{
  flex:1;border:none;outline:none;font-size:1rem;color:var(--text);
  background:transparent;min-width:0;
}
.search-bar input::placeholder{color:#B5ABA1}
.search-bar .sx{color:var(--muted);font-size:1rem;padding:.2rem .3rem}
.search-bar .sx:hover{color:var(--text)}
.search-res{max-height:60vh;overflow-y:auto;padding:.4rem}
.sr{
  display:flex;align-items:center;gap:.75rem;padding:.6rem .7rem;
  border-radius:9px;width:100%;text-align:left;transition:background .14s;
}
.sr:hover{background:#F6F2EC}
.sr-img{
  width:46px;height:46px;border-radius:8px;flex-shrink:0;background:#F2ECE4;
  display:grid;place-items:center;font-size:1.3rem;overflow:hidden;
}
.sr-img img{width:100%;height:100%;object-fit:cover}
.sr-b{flex:1;min-width:0}
.sr-b b{display:block;font-size:.86rem;color:#231F1B;line-height:1.3}
.sr-b span{font-size:.74rem;color:var(--text-2)}
.sr-p{font-weight:800;font-size:.9rem;color:var(--amber-deep);flex-shrink:0}
.sr-add{
  background:var(--amber);color:#211705;border-radius:6px;
  padding:.35rem .7rem;font-size:.72rem;font-weight:800;flex-shrink:0;
}
.search-empty{text-align:center;padding:2rem 1rem;color:var(--muted)}
.search-empty .e{font-size:2rem;display:block;margin-bottom:.4rem;opacity:.5}
.search-empty span{font-size:.85rem}
.search-hint{padding:.6rem 1rem .9rem;font-size:.74rem;color:var(--muted);border-top:1px solid var(--line)}

/* ============ MOBILE DRAWER ============ */
.drawer{position:fixed;inset:0;z-index:400;background:rgba(16,12,8,.72);display:none}
.drawer.open{display:block}
.drawer-in{position:absolute;top:0;right:0;bottom:0;width:min(272px,80vw);background:var(--dark-2);padding:1.3rem;display:flex;flex-direction:column;gap:.2rem;animation:dIn .26s ease}
@keyframes dIn{from{transform:translateX(100%)}to{transform:none}}
.drawer-in a{padding:.78rem .6rem;border-radius:8px;font-weight:600;color:#D0C9C1;font-size:.92rem}
.drawer-in a:hover,.drawer-in a.on{background:rgba(255,255,255,.07);color:var(--amber)}
.drawer-x{align-self:flex-end;font-size:1.25rem;color:#8A8078;margin-bottom:.5rem}

/* ============ RESPONSIVE ============ */
@media(max-width:1120px){
  .shop{grid-template-columns:180px 1fr}
  .order-p{position:static}
  .op-hold{grid-column:1/-1}
}
@media(max-width:960px){
  .nav-links{display:none}
  .burger-b{display:grid;place-items:center}
  .nav-cta{display:none}
  .hero{min-height:400px}
  .hero-bg img{object-position:72% center}
  .hero-bg::after{background:linear-gradient(180deg,rgba(16,12,8,.62) 0%,rgba(16,12,8,.80) 45%,rgba(16,12,8,.93) 100%)}
  .hero-in{padding:2.4rem 1.4rem 3.4rem}
  .hero-copy{max-width:100%}
  .trust{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tr:nth-child(2){border-right:none}
  .tr:nth-child(1),.tr:nth-child(2){border-bottom:1px solid var(--line)}
  .shop{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;order:-1}
  .cats{
    display:flex;gap:.4rem;overflow-x:auto;overflow-y:hidden;
    padding:0 .8rem .9rem;-webkit-overflow-scrolling:touch;
    max-width:100%;
    scrollbar-width:none;
  }
  .cats::-webkit-scrollbar{display:none}
  /* fade on the right edge hints that it scrolls */
  .rail{position:relative}
  .rail::after{
    content:"";position:absolute;right:0;top:2.4rem;bottom:0;width:32px;
    background:linear-gradient(90deg,rgba(255,255,255,0),#fff 72%);
    pointer-events:none;border-radius:0 12px 12px 0;
  }
  .cat{width:auto;white-space:nowrap;flex-shrink:0;background:#F6F2EC}
  .cat .ch{display:none}
  .special-tile{
    display:flex;margin:0 .8rem .8rem;padding:.7rem .85rem;
    border-radius:9px;gap:.55rem;align-items:center;
  }
  .special-tile .s{font-size:1.2rem}
  .special-tile b{font-size:.68rem}
  .special-tile span{font-size:.68rem}
  .about{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .promos{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .wrap{padding:0 .85rem}

  /* ---- NAV ---- */
  .nav-in{gap:.4rem;height:56px}
  .brand img{height:38px}
  .nico{width:34px;height:34px;font-size:.95rem}
  .cart-count{min-width:16px;height:16px;font-size:.6rem}

  /* ---- HERO ---- */
  .hero{min-height:auto}
  .hero-in{padding:1.8rem .85rem 2.2rem}
  .script{font-size:1.75rem;margin-bottom:.1rem}
  .hero h1{font-size:2.25rem;line-height:.95;margin-bottom:.6rem}
  .hero .lede{font-size:.86rem;max-width:100%;margin-bottom:1.1rem}
  .hero .lede br{display:none}
  .hero-btns{gap:.5rem;margin-bottom:1.2rem}
  .hero-btns .btn{flex:1;min-width:0;padding:.7rem .5rem;font-size:.78rem;gap:.3rem}

  .hero-feats{display:grid;grid-template-columns:1fr 1fr;gap:.7rem .6rem}
  .hf{padding:0;margin:0;border:none;width:auto;min-width:0;gap:.45rem}
  .hf .i{font-size:1.15rem}
  .hf b{font-size:.63rem;letter-spacing:.03em}
  .hf span{font-size:.63rem;line-height:1.3}

  /* ---- TRUST STRIP: 2x2, compact ---- */
  .trust-hold{margin-top:-1rem}
  .trust{grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:10px}
  .tr{padding:.7rem .6rem;gap:.5rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .tr:nth-child(2n){border-right:none}
  .tr:nth-child(3),.tr:nth-child(4){border-bottom:none}
  .tr .ti{width:30px;height:30px;font-size:.82rem}
  .tr b{font-size:.66rem;letter-spacing:.02em;line-height:1.2}
  .tr span{font-size:.6rem;line-height:1.25}

  /* ---- SHOP ---- */
  .shop{padding:1.4rem 0 1.8rem;gap:.9rem}

  /* categories: scrollable with a visible hint */
  .cat-head{padding:.8rem .9rem .45rem;font-size:.62rem}
  .cats{padding:0 .9rem .7rem;gap:.35rem}
  .cat{padding:.45rem .7rem;font-size:.78rem;gap:.35rem;border:1px solid var(--line)}
  .cat .ci{font-size:.9rem;width:auto}
  .cat.on{border-color:var(--amber)}

  .sec-head{margin-bottom:.7rem}
  .sec-head h2{font-size:1.05rem}
  .sec-head a{font-size:.75rem}

  /* ---- DISH CARDS: compact 2-up ---- */
  .dishes{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  .dish{border-radius:9px}
  .dish-img{aspect-ratio:1.15;font-size:1.9rem}
  .tag{font-size:.54rem;padding:.12rem .35rem;top:.35rem;left:.35rem}
  .fav{width:22px;height:22px;font-size:.7rem;top:.35rem;right:.35rem}
  .dish-b{padding:.5rem .55rem .55rem}
  .dish-b .nm{font-size:.72rem;line-height:1.25;min-height:1.8em;margin-bottom:.2rem}
  .dish-b .pr{font-size:.85rem;margin-bottom:.35rem}
  .add{font-size:.66rem;padding:.38rem .2rem;gap:.15rem;border-radius:5px}

  /* ---- PROMOS ---- */
  .promos{gap:.55rem;margin-top:.8rem}
  .promo{min-height:104px;padding:.9rem;border-radius:9px}
  .promo-c{max-width:76%}
  .promo h3{font-size:.92rem;line-height:1.08}
  .promo p{font-size:.68rem;margin:.25rem 0 .55rem}
  .promo .btn{padding:.42rem .8rem;font-size:.7rem}
  .promo .em{font-size:2.8rem;right:.3rem;bottom:.1rem}

  /* ---- ORDER PANEL ---- */
  .order-p{padding:.9rem}
  .op-head h3{font-size:.88rem}
  .op-head button{font-size:.72rem}
  .op-empty{padding:1.3rem .4rem}
  .op-empty .e{font-size:1.8rem}
  .op-empty span{font-size:.76rem}
  .oi-img{width:38px;height:38px;font-size:1rem}
  .oi-b .n{font-size:.74rem}
  .oi-b .p{font-size:.76rem}
  .op-line{font-size:.78rem}
  .op-total b{font-size:1.15rem}

  /* ---- SECTIONS ---- */
  .sec{padding:1.9rem 0}
  .sec-title{margin-bottom:1.2rem}
  .sec-title h2{font-size:1.4rem}
  .sec-title p{font-size:.8rem}

  .about{gap:1.1rem}
  .about-art{aspect-ratio:1.5;border-radius:10px}
  .about h2{font-size:1.4rem;margin-bottom:.5rem}
  .about p{font-size:.85rem;margin-bottom:.6rem}
  .about-stats{gap:.8rem;justify-content:space-between;margin-top:1rem}
  .about-stats b{font-size:1.35rem}
  .about-stats span{font-size:.66rem}

  .revs,.contacts{grid-template-columns:minmax(0,1fr);gap:.6rem}
  .rev{padding:.9rem;border-radius:9px}
  .rev p{font-size:.8rem;margin-bottom:.6rem}
  .rev .av{width:28px;height:28px;font-size:.72rem}
  .rev .who b{font-size:.76rem}

  .cc{padding:.9rem;border-radius:9px}
  .cc .i{font-size:1.3rem;margin-bottom:.25rem}
  .cc b{font-size:.8rem}
  .cc span{font-size:.78rem}

  /* ---- MODAL ---- */
  .modal{padding:.8rem}
  .mcard{padding:1.1rem;border-radius:12px}
  .mcard h3{font-size:1.02rem}
  .mcard .sub{font-size:.78rem;margin-bottom:.8rem}
  .frow{grid-template-columns:minmax(0,1fr);gap:0}
  .field label{font-size:.72rem}
  .field input{padding:.6rem .75rem;font-size:.86rem}
  .pill{padding:.4rem .8rem;font-size:.76rem}
  .macts{flex-direction:column-reverse;gap:.5rem}
  .macts .btn{width:100%}
  .bank .r{font-size:.78rem}

  /* ---- FOOTER ---- */
  .foot{padding:1.8rem 0 1.2rem}
  .foot .brand img{height:44px}
  .foot .fl{gap:.7rem 1rem;margin:.7rem 0}
  .foot .fl a{font-size:.76rem}
  .foot p{font-size:.72rem}
}

/* ---- SMALL PHONES ---- */
@media(max-width:380px){
  .hero h1{font-size:1.95rem}
  .script{font-size:1.5rem}
  .hero-btns{flex-direction:column;gap:.45rem}
  .hero-btns .btn{width:100%}
  .hero-feats{grid-template-columns:1fr}
  .trust{grid-template-columns:minmax(0,1fr)}
  .tr{border-right:none}
  .tr:nth-child(3){border-bottom:1px solid var(--line)}
  .dishes{gap:.45rem}
  .dish-b{padding:.45rem}
  .dish-b .nm{font-size:.68rem}
  .add{font-size:.62rem}
  .about-stats{flex-wrap:wrap;gap:.7rem 1.2rem}
}


/* ============ SEARCH ============ */
.search-wrap{
  position:fixed;inset:0;z-index:600;background:rgba(16,12,8,.78);
  backdrop-filter:blur(6px);display:none;padding:4.5rem 1rem 1rem;
}
.search-wrap.open{display:block}
.search-box{
  width:min(560px,100%);margin:0 auto;background:#fff;
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg);
  max-height:calc(100vh - 6rem);display:flex;flex-direction:column;
}
.search-bar{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border-bottom:1px solid var(--line)}
.search-bar .si{font-size:1.05rem;color:var(--muted)}
.search-bar input{
  flex:1;border:none;outline:none;font-size:1rem;color:var(--text);
  background:transparent;min-width:0;
}
.search-bar input::placeholder{color:#B5ABA1}
.search-bar .sx{color:var(--muted);font-size:1.1rem;padding:.2rem .4rem}
.search-bar .sx:hover{color:var(--text)}
.search-res{overflow-y:auto;padding:.5rem}
.sr{
  display:flex;align-items:center;gap:.7rem;padding:.6rem .65rem;
  border-radius:9px;width:100%;text-align:left;transition:.14s;
}
.sr:hover{background:#F6F2EC}
.sr-img{
  width:44px;height:44px;border-radius:8px;flex-shrink:0;background:#F2ECE4;
  display:grid;place-items:center;font-size:1.25rem;overflow:hidden;
}
.sr-img img{width:100%;height:100%;object-fit:cover}
.sr-b{flex:1;min-width:0}
.sr-b b{display:block;font-size:.86rem;color:#231F1B;line-height:1.3}
.sr-b span{font-size:.76rem;color:var(--muted)}
.sr-p{font-weight:800;font-size:.9rem;color:var(--amber-deep);flex-shrink:0}
.sr-add{
  background:var(--amber);color:#211705;border-radius:6px;
  padding:.35rem .6rem;font-size:.72rem;font-weight:800;flex-shrink:0;
}
.search-empty{text-align:center;padding:2rem 1rem;color:var(--muted)}
.search-empty .e{font-size:2rem;display:block;margin-bottom:.4rem;opacity:.6}
.search-empty span{font-size:.85rem}
.search-hint{padding:.6rem 1rem .8rem;font-size:.72rem;color:var(--muted);border-top:1px solid var(--line)}

@media(max-width:560px){
  .search-wrap{padding:3.6rem .8rem .8rem}
  .search-bar{padding:.7rem .85rem}
  .search-bar input{font-size:.95rem}
  .sr{padding:.5rem .55rem;gap:.55rem}
  .sr-img{width:38px;height:38px;font-size:1.05rem}
  .sr-b b{font-size:.8rem}
  .sr-p{font-size:.82rem}
}

/* ============================================================
   LOGO PRELOADER
   ============================================================ */
.cb-load{
  position:fixed;inset:0;z-index:9000;
  background:rgba(16,12,8,.82);backdrop-filter:blur(5px);
  display:none;place-items:center;
}
.cb-load.on{display:grid}
.cb-load .lg{
  width:96px;height:96px;border-radius:50%;
  animation:cbSpin 1.1s cubic-bezier(.5,0,.5,1) infinite,
            cbPulse 1.6s ease-in-out infinite;
  box-shadow:0 0 0 3px rgba(224,167,60,.25), 0 10px 34px rgba(0,0,0,.5);
  object-fit:cover;
}
@keyframes cbSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes cbPulse{0%,100%{box-shadow:0 0 0 3px rgba(224,167,60,.22),0 10px 34px rgba(0,0,0,.5)}
                   50%{box-shadow:0 0 0 9px rgba(224,167,60,.08),0 10px 34px rgba(0,0,0,.5)}}
.cb-load .txt{
  position:absolute;bottom:calc(50% - 92px);left:0;right:0;text-align:center;
  color:var(--amber);font-size:.82rem;font-weight:700;letter-spacing:.06em;
}

/* small inline spinner for buttons */
.btn-wait{position:relative;color:transparent !important}
.btn-wait::after{
  content:"";position:absolute;inset:0;margin:auto;width:17px;height:17px;
  border:2.5px solid rgba(33,23,5,.3);border-top-color:#211705;border-radius:50%;
  animation:cbSpin .7s linear infinite;
}

/* ============================================================
   SEARCH
   ============================================================ */
.search-wrap{
  position:fixed;inset:0;z-index:600;background:rgba(16,12,8,.78);
  backdrop-filter:blur(6px);display:none;padding:1.2rem;
}
.search-wrap.on{display:block}
.search-box{
  width:min(600px,100%);margin:4rem auto 0;background:#fff;
  border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden;
  animation:mIn .26s cubic-bezier(.2,.9,.3,1.2);
}
.search-bar{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--line)}
.search-bar input{
  flex:1;border:none;outline:none;font-size:1rem;color:var(--text);background:transparent;
}
.search-bar input::placeholder{color:#B5ABA1}
.search-bar .x{color:var(--muted);font-size:1.1rem;padding:.2rem}
.search-res{max-height:min(58vh,440px);overflow-y:auto;padding:.5rem}
.sr{display:flex;align-items:center;gap:.75rem;padding:.6rem .7rem;border-radius:9px;width:100%;text-align:left;transition:.14s}
.sr:hover{background:#F6F2EC}
.sr-img{width:44px;height:44px;border-radius:8px;flex-shrink:0;background:#F2ECE4;display:grid;place-items:center;font-size:1.2rem;overflow:hidden}
.sr-img img{width:100%;height:100%;object-fit:cover}
.sr-b{flex:1;min-width:0}
.sr-b b{display:block;font-size:.86rem;color:#231F1B;line-height:1.3}
.sr-b span{font-size:.75rem;color:var(--text-2)}
.sr-p{font-weight:800;font-size:.9rem;color:var(--amber-deep);flex-shrink:0}
.search-empty{text-align:center;padding:2rem 1rem;color:var(--muted)}
.search-empty .e{font-size:2rem;display:block;margin-bottom:.4rem;opacity:.55}
.search-empty span{font-size:.85rem}
.search-hint{padding:.6rem 1.1rem .9rem;font-size:.74rem;color:var(--muted);border-top:1px solid var(--line)}

@media(max-width:560px){
  .cb-load .lg{width:76px;height:76px}
  .cb-load .txt{bottom:calc(50% - 78px);font-size:.76rem}
  .search-box{margin-top:1.4rem}
  .search-bar{padding:.8rem .9rem}
  .search-bar input{font-size:.95rem}
  .sr-img{width:38px;height:38px;font-size:1rem}
  .sr-b b{font-size:.8rem}
}


/* ============================================================
   LIVE PRICE TICKER — like a stock market feed
   ============================================================ */
.ticker{
  background:linear-gradient(90deg,#0B0906,#151009 18%,#151009 82%,#0B0906);
  border-top:1px solid rgba(224,167,60,.22);
  border-bottom:1px solid rgba(224,167,60,.22);
  position:relative;overflow:hidden;
  display:flex;align-items:center;
  height:46px;cursor:pointer;
}
.ticker::before,.ticker::after{
  content:"";position:absolute;top:0;bottom:0;width:58px;z-index:3;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,#0B0906,transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,#0B0906,transparent)}

.tick-tag{
  position:relative;z-index:4;flex-shrink:0;
  background:linear-gradient(135deg,var(--amber),var(--amber-deep));
  color:#211705;font-family:var(--f-display);font-size:.9rem;letter-spacing:.09em;
  padding:0 .85rem;height:100%;display:flex;align-items:center;gap:.4rem;
}
.tick-tag .dot{
  width:7px;height:7px;border-radius:50%;background:#2C1A02;
  animation:tickPulse 1.5s ease-in-out infinite;
}
@keyframes tickPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}

.tick-view{flex:1;min-width:0;overflow:hidden;position:relative;height:100%}
.tick-run{
  display:flex;align-items:center;gap:0;height:100%;
  width:max-content;
  animation:tickRun 60s linear infinite;
  will-change:transform;
}
.ticker:hover .tick-run{animation-play-state:paused}
@keyframes tickRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.tick-i{
  display:flex;align-items:center;gap:.45rem;padding:0 1.05rem;
  height:100%;white-space:nowrap;position:relative;
}
.tick-i::after{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:16px;background:rgba(224,167,60,.2);
}
.tick-i .nm{font-size:.8rem;font-weight:600;color:#D8D2CB}
.tick-i .pr{font-size:.83rem;font-weight:800;color:var(--amber);letter-spacing:.01em}
.tick-i .st{font-size:.62rem;font-weight:800;letter-spacing:.05em;padding:.1rem .34rem;border-radius:3px}
.tick-i .st.ok{background:rgba(79,184,119,.16);color:#4FB877}
.tick-i .st.out{background:rgba(229,72,77,.18);color:#E5484D}
.tick-i.sold .nm{color:#7E766E;text-decoration:line-through}
.tick-i.sold .pr{color:#7E766E}

.tick-cta{
  position:relative;z-index:4;flex-shrink:0;height:100%;
  display:flex;align-items:center;gap:.35rem;padding:0 .9rem;
  background:rgba(224,167,60,.1);border-left:1px solid rgba(224,167,60,.22);
  font-size:.72rem;font-weight:800;color:var(--amber);letter-spacing:.02em;
  transition:.16s;
}
.ticker:hover .tick-cta{background:rgba(224,167,60,.2)}

@media(max-width:700px){
  .ticker{height:42px}
  .tick-tag{font-size:.78rem;padding:0 .6rem;letter-spacing:.06em}
  .tick-tag span:not(.dot){display:none}
  .tick-i{padding:0 .8rem;gap:.35rem}
  .tick-i .nm{font-size:.74rem}
  .tick-i .pr{font-size:.77rem}
  .tick-i .st{display:none}
  .tick-cta{font-size:.66rem;padding:0 .6rem}
  .tick-cta span{display:none}
  .tick-run{animation-duration:45s}
}