/* ---------------------------------------------------------------
   RARE SIGHT — quick buy + bag

   Two side drawers (Quick Buy from a product, Bag from the header
   cart icon). Unlike chat/zoom's softer rounded-card overlay
   language, these sit inside the actual storefront's hard-edged
   black/white system — border-radius:0, tracked uppercase type,
   the same .btn classes the spotlight buttons already use.

   Same reveal mechanics as every other overlay on the site: opacity
   + visibility transition, never the `hidden` attribute + rAF (that
   silently breaks in a backgrounded tab — see chat.css).
   --------------------------------------------------------------- */

.qb, .bag { position: fixed; inset: 0; z-index: 4800; }
.qb[hidden], .bag[hidden] { display: none; }

.qb__scrim, .bag__scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.qb.is-on .qb__scrim, .bag.is-on .bag__scrim { opacity: 1; }

/* --- panel: fixed drawer off the right edge --------------------------- */

.qb__panel, .bag__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.22);
  overflow-y: auto;

  opacity: 0;
  visibility: hidden;
  transform: translateX(24px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
.qb.is-on .qb__panel, .bag.is-on .bag__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
}

.qb__close, .bag__close {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid #000000;
  font-size: 20px; line-height: 1;
  cursor: pointer;
}
.qb__close:hover, .bag__close:hover { background: #000000; color: #ffffff; }

/* --- quick buy ---------------------------------------------------------- */

.qb__close { position: absolute; top: 14px; right: 14px; z-index: 1; background: #ffffff; }

.qb__media { aspect-ratio: 3 / 4; background: #f4f4f4; }
.qb__media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }

.qb__body { padding: 18px 22px 24px; }

.qb__name { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.qb__price { margin: 0 0 18px; font-size: 14px; }

.qb__label {
  margin: 0 0 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #666666;
}

.qb__sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.qb__size {
  min-width: 46px;
  padding: 9px 10px;
  background: #ffffff;
  border: 1px solid #000000;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  cursor: pointer;
}
.qb__size:hover { background: #f2f2f2; }
.qb__size.is-selected { background: #000000; color: #ffffff; }
.qb__size:disabled {
  border-color: #dddddd; color: #bbbbbb; cursor: not-allowed;
  text-decoration: line-through;
  background: repeating-linear-gradient(45deg, #f7f7f7 0 6px, #efefef 6px 12px);
}
.qb__size:disabled:hover { background: repeating-linear-gradient(45deg, #f7f7f7 0 6px, #efefef 6px 12px); }

.qb__sizehint { min-height: 15px; margin: 6px 0 18px; font-size: 10.5px; color: #a3a3a3; }
.qb__sizehint.is-warn { color: #b00000; }

.qb__qty {
  display: inline-flex; align-items: center; gap: 0;
  margin-bottom: 22px;
  border: 1px solid #000000;
}
.qb__qtybtn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: #ffffff; border: 0;
  font-size: 16px; line-height: 1;
  cursor: pointer;
}
.qb__qtybtn:hover { background: #f2f2f2; }
.qb__qtyval { min-width: 34px; text-align: center; font-size: 12px; font-weight: 700; }

.qb__actions { display: flex; flex-direction: column; gap: 10px; }
.qb__actions .btn { width: 100%; }
.qb__actions .btn:disabled {
  background: #ffffff; color: #bbbbbb; border-color: #dddddd; cursor: not-allowed;
}
.qb__actions .btn--solid:disabled { background: #eeeeee; color: #999999; border-color: #eeeeee; }

.qb__msg { min-height: 16px; margin: 12px 0 0; font-size: 11px; color: #111111; }
.qb__fulfillment { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #eeeeee; font-size: 10.5px; color: #999999; }

/* --- bag ------------------------------------------------------------------ */

.bag__head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #000000;
}
.bag__title { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.bag__lines { flex: 1 1 auto; padding: 0 22px; }
.bag__empty { padding: 32px 0; font-size: 12px; color: #888888; text-align: center; }

.bag__line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid #eeeeee;
}
.bag__line img { width: 64px; height: 82px; object-fit: contain; background: #f4f4f4; }
.bag__line-info { min-width: 0; }
.bag__line-name { margin: 0 0 3px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.bag__line-meta { margin: 0; font-size: 10.5px; color: #767676; }
.bag__line-remove {
  align-self: start;
  background: none; border: 0;
  font-size: 11px; color: #999999; text-decoration: underline;
  cursor: pointer; padding: 0;
}
.bag__line-remove:hover { color: #000000; }

.bag__foot { flex: 0 0 auto; padding: 18px 22px 24px; border-top: 1px solid #000000; }
.bag__subtotal { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.bag__checkout { width: 100%; }
.bag__checkout:disabled { background: #eeeeee; color: #999999; border-color: #eeeeee; cursor: not-allowed; }
.bag__msg { min-height: 16px; margin: 10px 0 0; font-size: 11px; color: #b00000; }
.bag__fulfillment { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #eeeeee; font-size: 10.5px; color: #999999; }

@media (max-width: 460px) {
  .qb__panel, .bag__panel { width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
  .qb__scrim, .qb__panel, .bag__scrim, .bag__panel { transition: none; }
}