/* Bag — a button that is always reachable, and a drawer that slides in from
   the right. Monochrome like everything else; the art is the only colour. */

.bag-btn{
  position: fixed;
  top: var(--s4);
  right: var(--s4);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--ink);
  background: var(--ground);
  cursor: pointer;
  font: 600 var(--t-micro)/1 var(--f-mono);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--ink);
}
.bag-btn:hover{ background: var(--ink); color: var(--ground); }
.bag-btn__count{
  min-width: 1.4em;
  padding: 2px 5px;
  background: var(--ink);
  color: var(--ground);
  text-align: center;
}
.bag-btn:hover .bag-btn__count{ background: var(--ground); color: var(--ink); }

.bag[hidden]{ display: none; }
.bag{ position: fixed; inset: 0; z-index: 90; }
.bag__scrim{ position: absolute; inset: 0; background: rgba(20,20,20,.45); }

.bag__panel{
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--ground);
  border-left: 1px solid var(--hair);
  box-shadow: -30px 0 60px -30px rgba(0,0,0,.35);
}
.bag__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s5);
  border-bottom: 1px solid var(--hair);
}
.bag__head h2{ font-size: var(--t-title); margin: 0; }
.bag__close{
  border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink); padding: 0 var(--s1);
}

.bag__lines{ flex: 1; overflow-y: auto; padding: var(--s5); margin: 0; list-style: none; }
.bag__empty{ color: var(--ink-2); }

.bag-line{ display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s4); padding-bottom: var(--s5); margin-bottom: var(--s5); border-bottom: 1px solid var(--hair); }
.bag-line:last-child{ border-bottom: 0; margin-bottom: 0; }
.bag-line__title{ font-weight: 500; }
.bag-line__price{ text-align: right; white-space: nowrap; }
.bag-line__foot{ grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }

.qty{ display: inline-flex; align-items: center; border: 1px solid var(--hair); }
.qty button{
  width: 30px; height: 30px; border: 0; background: none; cursor: pointer;
  font: 600 14px/1 var(--f-mono); color: var(--ink);
}
.qty button:hover{ background: var(--ink); color: var(--ground); }
.qty span{ min-width: 28px; text-align: center; font: 600 var(--t-micro)/1 var(--f-mono); }

.bag-line__rm{ border: 0; background: none; cursor: pointer; padding: 0; }
.bag-line__rm:hover{ color: var(--ink); }

.bag__foot{ padding: var(--s5); border-top: 1px solid var(--hair); }
.bag__total{ display: flex; justify-content: space-between; margin-bottom: var(--s4); font-size: var(--t-lead); }
.bag__note{ margin: var(--s3) 0 0; }
.bag__checkout[aria-disabled="true"]{ opacity: .4; pointer-events: none; }

@media (max-width: 620px){
  .bag-btn{ top: auto; bottom: var(--s4); right: var(--s4); }
}