/* ===========================================================
   Golden Chain Foods — ordering flow only. Loads after site.css.
   =========================================================== */

/* ---------------- category tabs ---------------- */
.catnav{
  position:sticky;top:0;z-index:30;background:rgba(250,246,240,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.catnav .row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 18px;max-width:var(--maxw);margin:0 auto}
.catnav .row::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);
  font:inherit;font-size:.86rem;font-weight:600;padding:8px 14px;border-radius:999px;
  min-height:38px;cursor:pointer;white-space:nowrap;transition:all .15s;
}
.chip:hover{border-color:var(--gold);color:var(--ink)}
.chip[aria-current="true"]{background:var(--espresso);border-color:var(--espresso);color:#fff}
.chip .n{display:none;margin-left:6px;background:var(--gold);color:var(--espresso);border-radius:999px;padding:0 6px;font-size:.76rem}
.chip.counted .n{display:inline-block}

/* ---------------- numbered steps ---------------- */
.step{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.step .num{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--gold-soft);
  color:var(--gold-ink-deep);display:grid;place-items:center;font-size:.82rem;font-weight:700;font-family:var(--sans);
}
.step h2{margin:0;font-size:1.26rem}

.cat-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:30px 0 14px;scroll-margin-top:72px}
.cat-head h3{margin:0;font-size:1.16rem;display:flex;align-items:baseline;gap:9px}
.cat-head h3::after{content:"";display:block;width:26px;height:2px;background:var(--gold);border-radius:2px}

/* ---------------- product cards ---------------- */
.grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:540px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:860px){.grid{grid-template-columns:1fr 1fr 1fr}}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);
  display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .18s,border-color .18s,transform .18s;
}
.card:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.card.active{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft),var(--sh-2)}
.photo{position:relative;aspect-ratio:4/3;background:var(--warm);overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.card:hover .photo img{transform:scale(1.04)}
.photo .ph{
  position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:radial-gradient(120% 120% at 30% 20%,#FBF1DA,#EFE0BE);
}
.photo.no-image img{display:none}
.photo.no-image .ph{display:flex}
.badge{
  position:absolute;top:9px;right:9px;background:var(--espresso);color:#fff;border-radius:999px;
  padding:4px 10px;font-size:.78rem;font-weight:700;box-shadow:var(--sh-1);
  opacity:0;transform:translateY(-4px);transition:all .18s;font-variant-numeric:tabular-nums;
}
.card.active .badge{opacity:1;transform:none}
.badge.pop{animation:pop .3s cubic-bezier(.2,.9,.3,1.5)}
@keyframes pop{
  0%{transform:scale(.7)}
  55%{transform:scale(1.18)}
  100%{transform:scale(1)}
}
.body{padding:13px 14px 14px;display:flex;flex-direction:column;gap:3px;flex:1}
.body .cat{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:700}
.body .name{font-family:var(--serif);font-size:1.06rem;line-height:1.25}
.body .unit{font-size:.88rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.body .unit b{color:var(--ink);font-size:.95rem}
.fill{flex:1;min-height:10px}

.qty{display:flex;align-items:center;gap:8px;margin-top:8px}
.qty button{
  width:46px;height:46px;flex:0 0 46px;border-radius:var(--r-sm);cursor:pointer;
  border:1.5px solid var(--line-2);background:var(--card);color:var(--ink);
  font-size:1.3rem;line-height:1;display:grid;place-items:center;transition:all .14s;
}
.qty button:hover:not([disabled]){border-color:var(--gold);background:var(--gold-soft)}
.qty button:active:not([disabled]){transform:scale(.94)}
.qty button[disabled]{opacity:.4;cursor:default}
.qty .plus{background:var(--espresso);border-color:var(--espresso);color:#fff}
.qty .plus:hover{background:var(--espresso-2);border-color:var(--espresso-2)}
.qty input{
  flex:1;min-width:0;height:46px;text-align:center;font:inherit;font-size:1.05rem;font-weight:700;
  border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);
  -moz-appearance:textfield;font-variant-numeric:tabular-nums;
}
.card.active .qty input{background:#fff;border-color:var(--gold)}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.line{font-size:.84rem;color:var(--gold-ink);font-weight:600;min-height:1.3em;margin-top:7px;font-variant-numeric:tabular-nums}

/* ---------------- summary table ---------------- */
table{width:100%;border-collapse:collapse;font-size:.93rem;font-variant-numeric:tabular-nums}
thead th{
  font-family:var(--sans);font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);
  font-weight:700;text-align:left;padding:12px 14px;background:var(--warm);border-bottom:1px solid var(--line);
}
tbody td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:1px solid var(--line-2)}
td.num,th.num{text-align:right;white-space:nowrap}
td.item{line-height:1.35}
td.item .fl{font-weight:600}
td.item .ct{display:block;font-size:.76rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em}
tfoot td{padding:14px;border:none;font-weight:700;font-size:1.02rem;background:var(--warm)}
tfoot .grand{font-family:var(--serif);font-size:1.3rem;color:var(--ink)}
.empty{display:flex;align-items:center;gap:13px;color:var(--ink-2);font-size:.93rem}
.empty .ico{width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:var(--warm);display:grid;place-items:center;font-size:1.2rem}

/* ---------------- form ---------------- */
.fields{display:grid;grid-template-columns:1fr;gap:15px}
@media(min-width:620px){
  .fields{grid-template-columns:1fr 1fr}
  .fields .wide{grid-column:1/-1}
}
label{display:block;font-size:.85rem;font-weight:700;margin-bottom:6px;color:var(--ink)}
label .opt{font-weight:500;color:var(--ink-3)}
.req{color:var(--err)}
input[type=text],input[type=tel],input[type=email],input[type=date],textarea{
  width:100%;padding:12px 14px;font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line);border-radius:var(--r-sm);min-height:50px;transition:border-color .14s,background .14s;
}
input:hover,textarea:hover{border-color:var(--line-2)}
input:focus,textarea:focus{background:#fff;border-color:var(--gold);outline:none;box-shadow:0 0 0 3px var(--gold-soft)}
textarea{min-height:92px;resize:vertical}
.hint{font-size:.78rem;color:var(--ink-3);margin:5px 0 0}
.err{display:none;color:var(--err);font-size:.81rem;font-weight:600;margin-top:5px}
.field.invalid input,.field.invalid textarea{border-color:var(--err);background:var(--err-bg)}
.field.invalid .err{display:block}
.banner{
  display:none;gap:11px;margin:0 0 18px;padding:13px 15px;border-radius:var(--r-sm);
  background:var(--err-bg);border:1px solid #E8BFB4;color:var(--err);font-size:.91rem;font-weight:500;
}
.banner.show{display:flex}
.banner .ico{flex:0 0 auto;font-weight:700}
.banner a{color:var(--err);font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.fine a{color:var(--gold-ink);font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.submit-wrap{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
#orderForm .btn,.sheet .btn{width:100%}
.fine{font-size:.82rem;color:var(--ink-3);margin:13px 0 0;text-align:center}

/* reorder prompt */
.reorder{
  display:none;align-items:center;gap:14px;padding:14px 16px;margin-bottom:20px;
  background:linear-gradient(100deg,var(--gold-soft),#FDF6E6);border:1px solid #E6CF9C;border-radius:var(--r);
}
.reorder.show{display:flex;flex-wrap:wrap}
.reorder .txt{flex:1;min-width:190px;font-size:.9rem}
.reorder .txt b{display:block;font-family:var(--serif);font-size:1rem}
.reorder .btn{flex:0 0 auto;padding:11px 16px;min-height:46px;font-size:.92rem}
.reorder .skip{background:none;border:none;color:var(--ink-2);font:inherit;font-size:.86rem;cursor:pointer;text-decoration:underline;padding:8px}

/* ---------------- sticky total bar ---------------- */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;transform:translateY(130%);
  transition:transform .22s cubic-bezier(.2,.8,.2,1);background:var(--espresso);color:#fff;
  box-shadow:var(--sh-3);padding:11px 18px calc(11px + env(safe-area-inset-bottom));
}
.bar.show{transform:none}
.bar .in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:13px}
.bar .tot{flex:1;min-width:0;cursor:pointer;background:none;border:none;color:#fff;font:inherit;text-align:left;padding:4px 0}
.bar .cnt{font-size:.8rem;color:#E0CFB6;display:flex;align-items:center;gap:6px}
.bar .cnt svg{width:11px;height:11px;fill:var(--gold)}
.bar .amt{
  font-family:var(--serif);font-size:1.32rem;font-weight:700;font-variant-numeric:tabular-nums;
  display:inline-block;transform-origin:left center;
}
/* the total reacts when an item is added, so the tap registers visually
   even when a thumb is covering the bar */
.bar .amt.bump{animation:bump .26s cubic-bezier(.2,.9,.3,1.4)}
@keyframes bump{
  0%{transform:scale(1)}
  40%{transform:scale(1.13);color:var(--gold)}
  100%{transform:scale(1)}
}
.bar .go{
  flex:0 0 auto;background:var(--gold);color:var(--espresso);border:none;font:inherit;font-weight:700;
  border-radius:11px;padding:13px 19px;min-height:50px;cursor:pointer;white-space:nowrap;
}
.bar .go:hover{background:#D6A33C}
body.has-bar{padding-bottom:92px}

/* ---------------- order sheet ---------------- */
.scrim{position:fixed;inset:0;z-index:45;background:rgba(38,52,43,.5);opacity:0;transition:opacity .22s;backdrop-filter:blur(2px)}
.scrim.open{opacity:1}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:50;max-height:86vh;display:flex;flex-direction:column;
  background:var(--paper);border-radius:20px 20px 0 0;box-shadow:var(--sh-3);
  transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.sheet.open{transform:none}
@media(min-width:680px){
  .sheet{left:50%;right:auto;width:560px;transform:translate(-50%,100%);bottom:16px;border-radius:18px}
  .sheet.open{transform:translate(-50%,0)}
}
.sheet .head{display:flex;align-items:center;gap:12px;padding:16px 18px 13px;border-bottom:1px solid var(--line)}
.sheet .head h2{margin:0;font-size:1.14rem;flex:1}
.sheet .x{
  width:40px;height:40px;flex:0 0 40px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--card);color:var(--ink);font-size:1.25rem;line-height:1;cursor:pointer;
}
.sheet .x:hover{background:var(--warm)}
.sheet .list{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 18px}
.srow{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.srow:last-child{border-bottom:none}
.srow .meta{flex:1;min-width:0}
.srow .nm{font-weight:600;font-size:.95rem;line-height:1.3}
.srow .px{font-size:.8rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.srow .stepper{
  display:flex;align-items:center;flex:0 0 auto;border:1.5px solid var(--line-2);
  border-radius:var(--r-sm);overflow:hidden;background:var(--card);
}
.srow .stepper button{width:40px;height:40px;border:none;background:var(--card);color:var(--ink);font-size:1.2rem;line-height:1;cursor:pointer}
.srow .stepper button:hover{background:var(--warm)}
.srow .stepper .v{width:38px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.srow .lt{flex:0 0 auto;width:74px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.sheet .foot{padding:15px 18px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--card)}
.sheet .sums{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:13px}
.sheet .sums .lb{color:var(--ink-2);font-size:.92rem}
.sheet .sums .vl{font-family:var(--serif);font-size:1.45rem;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------------- confirmation ---------------- */
#done{display:none;padding-top:28px}
.tick{
  width:66px;height:66px;border-radius:50%;background:var(--gold);color:var(--espresso);
  display:grid;place-items:center;font-size:2rem;margin:0 auto 14px;box-shadow:0 0 0 7px var(--gold-soft);
  animation:tick-in .5s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes tick-in{
  0%{transform:scale(.3);opacity:0;box-shadow:0 0 0 0 var(--gold-soft)}
  60%{transform:scale(1.1);opacity:1}
  100%{transform:scale(1);opacity:1;box-shadow:0 0 0 7px var(--gold-soft)}
}
/* the order details slide up just behind the tick */
#done .panel > *:not(.done-head){animation:rise .45s .12s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.done-head{text-align:center;margin-bottom:22px}
.done-logo{display:block;width:170px;height:auto;margin:0 auto 10px}
.done-head h2{font-size:1.45rem;margin:0 0 6px}
.done-head p{color:var(--ink-2);margin:0 auto;max-width:44ch;font-size:.94rem}
.refpill{
  display:inline-block;margin-top:14px;padding:9px 16px;border-radius:999px;background:var(--espresso);
  color:#fff;font-weight:700;letter-spacing:.06em;font-size:.95rem;
}
.block-title{
  font-family:var(--sans);font-size:.72rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-3);font-weight:700;margin:26px 0 9px;
}
.kv{width:100%;border-collapse:collapse;font-size:.93rem}
.kv td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.kv td:first-child{color:var(--ink-3);width:40%;font-size:.85rem}
.kv tr:last-child td{border-bottom:none}
.done-actions{display:grid;gap:10px;margin-top:24px}
@media(min-width:520px){.done-actions{grid-template-columns:1fr 1fr}}

@media print{
  .site-head,.site-foot,.bar,.sheet,.scrim,.done-actions,.catnav{display:none!important}
  .done-logo{width:150px}
  body{background:#fff;padding:0}
  .panel{box-shadow:none;border-color:#ccc}
}