/* ==========================================================================
   JABALÍ — STORE (cart) UI · Monte Claro
   Depends on tokens.css. Injected/used by store.js.
   ========================================================================== */

/* ---- Add-to-cart controls (in product cards) ---- */
.jb-add{display:inline-flex;align-items:center;justify-content:center;gap:var(--jb-s2);width:100%;cursor:pointer;
  background:var(--jb-ink);color:var(--jb-soil);border:none;
  font-family:var(--jb-font-display);font-weight:700;text-transform:uppercase;letter-spacing:var(--jb-ls-button);
  font-size:var(--jb-t-sm);padding:var(--jb-s3) var(--jb-s5);
  transition:transform var(--jb-ease),background var(--jb-ease)}
.jb-add:hover{transform:var(--jb-lift)}
.jb-add:focus-visible{outline:var(--jb-ring);outline-offset:var(--jb-ring-offset)}

/* compact add — a single row in a price list (label + price + add) */
.jb-add--row{width:auto;padding:var(--jb-s2) var(--jb-s3);font-size:var(--jb-t-label)}

/* ---- Floating cart button ---- */
.jb-fab{position:fixed;right:var(--jb-gutter);bottom:var(--jb-gutter);z-index:60;
  display:none;align-items:center;gap:var(--jb-s2);cursor:pointer;
  background:var(--jb-oxblood);color:var(--jb-cream);border:none;
  font-family:var(--jb-font-display);font-weight:700;text-transform:uppercase;letter-spacing:var(--jb-ls-button);
  font-size:var(--jb-t-sm);padding:var(--jb-s3) var(--jb-s5);
  box-shadow:0 6px 24px rgba(28,23,20,0.22);transition:transform var(--jb-ease)}
.jb-fab.is-shown{display:inline-flex}
.jb-fab:hover{transform:var(--jb-lift)}
.jb-fab .jb-fab-count{font-family:var(--jb-font-mono);font-weight:700}

/* ---- Overlay + drawer ---- */
.jb-overlay{position:fixed;inset:0;z-index:70;background:rgba(28,23,20,0.45);
  opacity:0;visibility:hidden;transition:opacity var(--jb-ease),visibility var(--jb-ease)}
.jb-overlay.is-open{opacity:1;visibility:visible}

.jb-drawer{position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(92vw,420px);
  background:var(--jb-surface);color:var(--jb-text);border-left:var(--jb-border);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform var(--jb-ease)}
.jb-drawer.is-open{transform:translateX(0)}
@media (prefers-reduced-motion:reduce){.jb-drawer{transition:none}.jb-overlay{transition:none}}

.jb-drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:var(--jb-s5) var(--jb-s6);border-bottom:var(--jb-border)}
.jb-drawer-head h2{font-family:var(--jb-font-display);text-transform:uppercase;font-size:var(--jb-t-h4);margin:0}
.jb-close{background:none;border:none;cursor:pointer;color:var(--jb-text);
  font-family:var(--jb-font-mono);font-size:var(--jb-t-h4);line-height:1;padding:var(--jb-s1)}
.jb-close:hover{color:var(--jb-accent)}

.jb-items{flex:1;overflow-y:auto;padding:0 var(--jb-s6)}
.jb-empty{padding:var(--jb-s12) 0;text-align:center;color:var(--jb-text-soft);font-size:var(--jb-t-sm)}

.jb-line{display:grid;grid-template-columns:1fr auto;gap:var(--jb-s2) var(--jb-s4);
  align-items:start;padding:var(--jb-s5) 0;border-bottom:var(--jb-border)}
.jb-line-name{font-family:var(--jb-font-display);text-transform:uppercase;font-size:var(--jb-t-body);margin:0;line-height:var(--jb-lh-tight)}
.jb-line-sub{font-size:var(--jb-t-label);letter-spacing:var(--jb-ls-eyebrow);text-transform:uppercase;color:var(--jb-text-soft);margin:var(--jb-s1) 0 0}
.jb-line-price{font-family:var(--jb-font-display);font-weight:600;font-size:var(--jb-t-body);text-align:right;white-space:nowrap}
.jb-qty{display:inline-flex;align-items:center;border:var(--jb-border);margin-top:var(--jb-s3)}
.jb-qty button{width:var(--jb-s8);height:var(--jb-s8);background:none;border:none;cursor:pointer;
  font-family:var(--jb-font-mono);font-size:var(--jb-t-body);color:var(--jb-text)}
.jb-qty button:hover{background:var(--jb-surface-alt)}
.jb-qty span{min-width:var(--jb-s8);text-align:center;font-family:var(--jb-font-mono);font-size:var(--jb-t-sm)}
.jb-remove{grid-column:2;justify-self:end;background:none;border:none;cursor:pointer;margin-top:var(--jb-s2);
  font-size:var(--jb-t-label);letter-spacing:var(--jb-ls-spec);text-transform:uppercase;color:var(--jb-text-soft)}
.jb-remove:hover{color:var(--jb-accent)}

.jb-foot{border-top:var(--jb-border);padding:var(--jb-s6)}
.jb-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--jb-s4);
  font-size:var(--jb-t-sm);padding:var(--jb-s1) 0}
.jb-row span{color:var(--jb-text-soft)}
.jb-row.jb-total{font-family:var(--jb-font-display);font-size:var(--jb-t-h4);padding-top:var(--jb-s3);margin-top:var(--jb-s3);border-top:var(--jb-border)}
.jb-row.jb-total span{color:var(--jb-text)}
.jb-note{font-size:var(--jb-t-label);color:var(--jb-text-soft);margin:var(--jb-s3) 0 0;line-height:var(--jb-lh-relaxed)}
.jb-checkout{display:block;width:100%;text-align:center;text-decoration:none;cursor:pointer;
  margin-top:var(--jb-s5);background:var(--jb-oxblood);color:var(--jb-cream);border:none;
  font-family:var(--jb-font-display);font-weight:700;text-transform:uppercase;letter-spacing:var(--jb-ls-button);
  font-size:var(--jb-t-body);padding:var(--jb-s4) var(--jb-s9);transition:transform var(--jb-ease),background var(--jb-ease)}
.jb-checkout:hover{background:var(--jb-ink);transform:var(--jb-lift)}
.jb-checkout[disabled]{opacity:var(--jb-disabled-opacity);pointer-events:none}

body.jb-locked{overflow:hidden}