/* ============================================================
   Cart drawer, shared by every page.
   ============================================================ */

.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer[hidden] { display: none; }

.drawer__veil {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 14, .55);
  animation: veil .18s ease both;
}

@keyframes veil { from { opacity: 0 } }

.drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(100%, 430px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--paper);
  border-inline-start: 3px solid var(--ink);
  animation: slidein .24s cubic-bezier(.2,.8,.3,1) both;
}

@keyframes slidein { from { transform: translateX(100%) } }
html[dir="rtl"] .drawer__panel { animation-name: slidein-rtl; }
@keyframes slidein-rtl { from { transform: translateX(-100%) } }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px var(--gut);
  background: var(--ink);
  color: var(--paper);
}

.icobtn--dark { width: 38px; height: 38px; }

.drawer__body { overflow-y: auto; padding: 6px var(--gut) 10px; }

.drawer__empty, .drawer__wait { padding-block: 26px; font-size: 15px; color: var(--mute); }

.drawer__foot {
  display: grid;
  gap: 10px;
  padding: 18px var(--gut) 22px;
  border-block-start: 3px solid var(--ink);
  background: var(--cream);
}

.drawer__sum { display: flex; align-items: baseline; justify-content: space-between; font-size: 15px; font-weight: 800; }
.drawer__sum b { font-size: 22px; font-variant-numeric: tabular-nums; }
.drawer__note { font-size: 12.5px; line-height: 1.5; color: var(--mute); }
.drawer__go { justify-content: center; }

/* ---------------------------------------------------- line --- */

/* `1fr` alone will not shrink below its own contents, so a long
   product name pushes the price off the edge of the drawer. The
   middle column is told it may shrink; the price never is. */
.cline {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding-block: 16px;
  border-block-end: 1px solid rgba(20,20,20,.14);
}

.cline__main { min-width: 0; }

.cline:last-child { border-block-end: 0; }

.cline__pic {
  display: block;
  width: 64px;
  aspect-ratio: 1;
  padding: 7px;
  border-radius: var(--r);
  border: 2px solid var(--ink);
  background: var(--white);
}

.cline__pic img { width: 100%; height: 100%; object-fit: contain; }

.cline__main h3 { font-size: 15px; font-weight: 800; line-height: 1.3; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.cline__unit { margin-block-start: 3px; font-size: 13px; color: var(--mute); }

.cline__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-block-start: 10px; }

/* The stepper. It used to live in product.css, which only the product
   page loads — so the drawer and the checkout summary, which are on
   every other page, drew it as three bare characters with no pill
   around them. It belongs here, beside the basket that uses it
   everywhere. */
.qty {
  display: inline-flex; align-items: center;
  border-radius: var(--pill);
  border: 3px solid var(--ink);
  background: var(--white);
}

/* A declared display beats the browser's own rule for [hidden], so a
   box that names one has to say this as well or it never hides. The
   product page has been setting hidden on the counter for a single
   pot all along, correctly: you do not count a pot, it is one trip to
   Euphoria's shelf. The counter stayed on screen because of this one
   missing line. */
.qty[hidden] { display: none; }

.qty button {
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 19px; font-weight: 900;
  line-height: 1;
}

.qty button:hover { background: var(--ink); color: var(--paper); }

.qty output {
  min-width: 34px;
  text-align: center;
  font-size: 17px; font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* the basket's size: same shape, less of it */
.qty--sm { border-width: 2px; }
.qty--sm button { width: 30px; height: 30px; font-size: 15px; }
.qty--sm output { min-width: 24px; font-size: 14px; }

.cline__x { font-size: 12.5px; font-weight: 700; color: var(--mute); text-decoration: underline; }
.cline__x:hover { color: var(--red); }

.cline__sum { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* on a narrow phone the price stops fighting for the same line and
   drops under the name instead of being clipped by the panel */
@media (max-width: 400px) {
  .cline { grid-template-columns: 56px minmax(0, 1fr); gap: 10px 12px; }
  .cline__pic { width: 56px; }
  .cline__sum { grid-column: 2; margin-block-start: 8px; }
}