/* ============================================================
   Naughty Pine — ordering demo (STAGING ONLY).
   Same shape as the Village Grounds cart, re-dressed in Naughty
   Pine's own tokens: pine / amber / cream instead of espresso.
   Tokens come from styles.css :root. Bump cart.css?v= when edited.
   ============================================================ */

/* the add control on each menu row */
.mitem__add{
  flex:0 0 auto;width:30px;height:30px;margin-left:12px;border-radius:50%;
  border:1.5px solid rgba(30,58,43,.28);background:var(--white);color:var(--pine);
  font-size:1.15rem;line-height:1;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .15s var(--ease),background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);
}
.mitem__add:hover{background:var(--pine);border-color:var(--pine);color:var(--cream);transform:scale(1.1)}
.mitem__add.just-added{background:var(--amber);border-color:var(--amber);color:#fff;transform:scale(1.25)}
.mitem:hover .mitem__add{border-color:rgba(30,58,43,.5)}

/* floating cart button */
.np-cartbtn{
  position:fixed;right:22px;bottom:22px;z-index:1500;
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  background:var(--pine);color:var(--cream);
  box-shadow:0 14px 34px -10px rgba(27,23,20,.6);
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s var(--ease),background .18s var(--ease);
}
.np-cartbtn:hover{transform:scale(1.07);background:var(--pine-700)}
.np-cartbtn.has-items{background:var(--amber)}
.np-cartbtn svg{width:23px;height:23px}
.np-cartcount{
  position:absolute;top:-2px;right:-2px;min-width:22px;height:22px;padding:0 5px;
  border-radius:999px;background:var(--charcoal);color:var(--cream);
  font-size:.74rem;font-weight:700;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--cream);
}

/* drawer */
.np-cart-ov{
  position:fixed;inset:0;background:rgba(27,23,20,.55);z-index:1600;
  opacity:0;visibility:hidden;transition:opacity .22s;
}
.np-cart-ov.open{opacity:1;visibility:visible}
.np-cart{
  position:fixed;top:0;right:0;height:100%;width:400px;max-width:92vw;z-index:1700;
  background:var(--cream);box-shadow:-24px 0 70px -20px rgba(27,23,20,.55);
  transform:translateX(100%);transition:transform .26s var(--ease);
  display:flex;flex-direction:column;
}
.np-cart.open{transform:translateX(0)}
.np-cart__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px 14px;border-bottom:1px solid rgba(27,23,20,.1);
}
.np-cart__head h3{margin:0;font-family:Fraunces,Georgia,serif;font-weight:800;color:var(--pine);font-size:1.35rem}
.np-cart__x{background:none;border:0;font-size:1.8rem;line-height:1;color:var(--muted);cursor:pointer}
.np-cart__items{flex:1;overflow-y:auto;padding:4px 22px}
.np-cart__empty{color:var(--muted);text-align:center;padding:40px 10px;line-height:1.7}

.np-ci{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid rgba(27,23,20,.09)}
.np-ci__info{flex:1;min-width:0}
.np-ci__name{display:block;font-weight:700;color:var(--ink);line-height:1.35}
.np-ci__price{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}
.np-ci__up{
  display:inline-block;margin-top:6px;background:none;border:0;padding:0;
  color:var(--amber-700);font-size:.79rem;font-weight:700;cursor:pointer;text-decoration:underline;
}
.np-ci__up:hover{opacity:.75}
.np-ci__qty{display:inline-flex;align-items:center;gap:9px}
.np-ci__qty button{
  width:27px;height:27px;border-radius:50%;border:1px solid rgba(27,23,20,.2);
  background:var(--white);cursor:pointer;font-size:1rem;line-height:1;color:var(--ink);
}
.np-ci__qty button:hover{border-color:var(--pine);color:var(--pine)}
.np-ci__line{font-weight:700;color:var(--ink);min-width:58px;text-align:right}

.np-cart__foot{padding:16px 22px 20px;padding-bottom:calc(20px + env(safe-area-inset-bottom));border-top:1px solid rgba(27,23,20,.1)}
.np-cart__total{display:flex;justify-content:space-between;font-weight:800;font-size:1.15rem;color:var(--pine);margin-bottom:12px}
.np-cart__note{font-size:.78rem;color:var(--muted);text-align:center;margin:10px 0 0}

/* the demo is never quiet about being a demo */
.np-demo{
  margin:12px 22px 0;padding:9px 12px;border-radius:9px;
  background:rgba(200,119,46,.13);border:1px solid rgba(200,119,46,.3);
  font-size:.78rem;line-height:1.5;color:var(--amber-700);font-weight:600;text-align:center;
}
.np-demo--foot{margin:14px 0 0;text-align:center}

/* modals */
.np-modal{
  position:fixed;inset:0;z-index:2100;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(27,23,20,.62);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  animation:npIn .18s ease;overflow-y:auto;
}
@keyframes npIn{from{opacity:0}to{opacity:1}}
@keyframes npPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.np-modal__card{
  position:relative;max-width:440px;width:100%;background:var(--cream);
  border-radius:22px;padding:32px 28px;text-align:center;
  box-shadow:0 34px 90px -30px rgba(0,0,0,.6);animation:npPop .26s var(--ease);
  margin:auto;
}
.np-modal__x{position:absolute;top:10px;right:16px;background:none;border:0;font-size:1.8rem;line-height:1;color:var(--muted);cursor:pointer}
.np-modal__icon{font-size:2.1rem;margin-bottom:4px}
.np-modal__card h3{font-family:Fraunces,Georgia,serif;font-weight:800;color:var(--pine);font-size:1.5rem;margin:0 0 10px}
.np-modal__card p{color:var(--muted);margin:0 0 10px;line-height:1.6}
.np-skip{display:block;margin:10px auto 0;background:none;border:0;color:var(--muted);font-size:.86rem;text-decoration:underline;cursor:pointer}

.np-more__list{margin-top:14px;text-align:left}
.np-more__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(27,23,20,.1)}
.np-more__row span{font-weight:700;color:var(--ink)}

/* receipt */
.np-receipt{
  background:var(--white);border-radius:12px;padding:20px 18px;margin-bottom:16px;
  text-align:left;font-variant-numeric:tabular-nums;border:1px solid rgba(27,23,20,.1);
}
.np-rc__head{text-align:center;padding-bottom:10px}
.np-rc__logo{display:block;margin:0 auto 6px}
.np-rc__name{font-family:Fraunces,Georgia,serif;font-weight:800;color:var(--pine);font-size:1.02rem}
.np-rc__meta{font-size:.76rem;color:var(--muted);margin-top:2px}
.np-rc__tag{text-align:center;font-size:.7rem;letter-spacing:.06em;color:var(--muted);padding:8px 0;border-top:1px dashed rgba(27,23,20,.22);border-bottom:1px dashed rgba(27,23,20,.22)}
.np-rc__items{padding:10px 0}
.np-rc__line{display:flex;gap:8px;font-size:.88rem;padding:3px 0;color:var(--ink)}
.np-rc__q{color:var(--muted);min-width:24px}
.np-rc__n{flex:1;min-width:0}
.np-rc__p{font-weight:700}
.np-rc__sub{display:flex;justify-content:space-between;font-size:.88rem;color:var(--muted);padding:3px 0}
.np-rc__total{display:flex;justify-content:space-between;font-weight:800;color:var(--pine);font-size:1.05rem;border-top:1px solid rgba(27,23,20,.18);margin-top:7px;padding-top:8px}
.np-rc__foot{text-align:center;font-size:.72rem;letter-spacing:.08em;color:var(--muted);padding-top:12px}

.np-field{margin-bottom:10px;text-align:left}
.np-field label{display:block;font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:4px}
.np-field input{width:100%;padding:11px 13px;border-radius:10px;border:1px solid rgba(27,23,20,.2);font-family:inherit;font-size:1rem;background:var(--white);color:var(--ink)}
.np-field input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(200,119,46,.16)}

/* the site's own mobile quick-bar would sit under the cart button */
@media(max-width:760px){
  .has-np-cart .mbar{padding-right:84px}
  .np-cartbtn{right:16px;bottom:78px;width:52px;height:52px}
  .np-cart__items{padding:4px 16px}
  .np-cart__head,.np-cart__foot{padding-left:16px;padding-right:16px}
  .np-demo{margin-left:16px;margin-right:16px}
}

/* The editor's save bar is pinned to the bottom, so lift the cart button
   clear of it rather than hiding either one. Both are in use at once. */
.is-editing .np-cartbtn{bottom:104px}
@media(max-width:700px){ .is-editing .np-cartbtn{bottom:150px} }

/* "Online ordering is coming soon" popup (soon.js) */
.np-soon{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(20,28,23,.62)}
.np-soon__card{background:var(--cream,#fffdf8);border-radius:16px;max-width:380px;width:100%;padding:26px 24px 20px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.np-soon__card img{height:64px;width:auto;margin-bottom:6px}
.np-soon__card h3{margin:0 0 8px;font-size:1.3rem}
.np-soon__card p{margin:0 0 16px;color:var(--muted,#5b5a52);line-height:1.5}
.np-soon__card .btn{display:block;width:100%}
.np-soon__x{margin-top:10px;background:none;border:0;font:inherit;font-weight:600;color:var(--muted,#5b5a52);cursor:pointer;padding:8px}

.np-soon__form{display:flex;flex-direction:column;gap:8px;text-align:left;margin-bottom:12px}
.np-soon__lbl{font-size:.82rem;font-weight:700;color:var(--ink,#1b1714)}
.np-soon__form input[type=text]{font:inherit;padding:11px 12px;border:1px solid rgba(27,23,20,.25);border-radius:10px;background:#fff;width:100%;box-sizing:border-box}
.np-soon__form input[type=text]:focus{outline:2px solid var(--amber,#c8772e);outline-offset:1px}
.np-soon__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.np-soon__fine{margin:0!important;font-size:.76rem;color:var(--muted,#5b5a52)}
.np-soon__msg{margin:0!important;font-size:.84rem;color:#a3342a;min-height:1em}
.np-soon__ok{margin:6px 0!important;font-weight:600;color:var(--pine,#1e3a2b);text-align:center}
.np-soon__call{display:inline-block;font-weight:700;color:var(--amber-700,#a85f1f);text-decoration:none;padding:4px 0}
.np-soon__form input[type=email],.np-soon__form input[type=tel]{font:inherit;padding:11px 12px;border:1px solid rgba(27,23,20,.25);border-radius:10px;background:#fff;width:100%;box-sizing:border-box}
.np-soon__form input[type=email]:focus,.np-soon__form input[type=tel]:focus{outline:2px solid var(--amber,#c8772e);outline-offset:1px}
.np-soon__chk{display:flex;gap:9px;align-items:flex-start;font-size:.76rem;line-height:1.4;color:var(--muted,#5b5a52);margin:4px 0 2px}
.np-soon__chk input{margin-top:3px;flex:none;width:16px;height:16px}
.np-soon__card{max-height:92vh;overflow:auto}
.np-soon__opt{font-weight:400;color:var(--muted,#5b5a52)}
.np-soon__form input[type=text]{margin-bottom:2px}