/*
 * The shop's own cart drawer (js/ej-cart.js). Replaces the Snipcart side cart and
 * keeps its look: plum surfaces, cream text, the pink used for Add to cart, Syne
 * for headings and Plus Jakarta Sans for everything else, pill buttons. The
 * values are the ones the old #snipcart theme in ej-modal.css used.
 *
 * z-index: the pinned header (#ej-bar) is 30 and the site's modal layer is 90.
 * The drawer sits at 10000 so nothing on the page paints over it; the shipping
 * offer that can open on top of it is lifted to 10001 by ej-app.js.
 */
#ej-cart {
  --ej-bg: #150B20;
  --ej-panel: #2A0C1B;
  --ej-panel-hi: #3A1226;
  --ej-cream: #F5EBE2;
  --ej-muted: #C9A9A5;
  --ej-pink: #D98BA8;
  --ej-pink-hi: #E7A2BC;
  --ej-pink-lt: #F0B6C9;
  --ej-line: rgba(232, 218, 203, 0.16);

  position: fixed;
  inset: 0;
  z-index: 10000;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  color: var(--ej-cream);
}
#ej-cart[hidden] { display: none; }

html.ej-cart-open, html.ej-cart-open body { overflow: hidden; }

.ej-c-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 4, 16, 0.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 220ms ease-out;
}
#ej-cart.on .ej-c-scrim { opacity: 1; }

.ej-c-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--ej-bg);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.5), inset 1px 0 0 var(--ej-line);
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
#ej-cart.on .ej-c-panel { transform: none; }

@media (max-width: 520px) {
  .ej-c-panel { width: 100%; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ej-c-panel, .ej-c-scrim { transition: none; }
}

.ej-c-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 16px;
  box-shadow: inset 0 -1px 0 var(--ej-line);
}
.ej-c-head h2 {
  margin: 0;
  font-family: Syne, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ej-cream);
}
.ej-c-x {
  width: 38px; height: 38px;
  border: none;
  border-radius: 999px;
  background: var(--ej-panel);
  color: var(--ej-pink-lt);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.ej-c-x:hover { background: var(--ej-panel-hi); color: var(--ej-cream); }

.ej-c-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ej-c-line {
  display: flex;
  gap: 14px;
  padding: 12px;
  border-radius: 14px;
  background: var(--ej-panel);
}
.ej-c-img {
  width: 78px; height: 78px;
  flex: 0 0 78px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--ej-panel-hi);
}
.ej-c-noimg { background: linear-gradient(160deg, #241531, #150B20); }
.ej-c-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ej-c-name {
  font-family: Syne, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ej-cream);
  text-decoration: none;
}
a.ej-c-name:hover { color: var(--ej-pink-lt); }
.ej-c-var { font-size: 12.5px; color: var(--ej-muted); }
.ej-c-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.ej-c-total { font-size: 14px; font-weight: 700; color: var(--ej-cream); }

.ej-c-step {
  display: inline-flex;
  align-items: center;
  height: 34px;
  border-radius: 999px;
  background: var(--ej-bg);
  box-shadow: inset 0 0 0 1px var(--ej-line);
}
.ej-c-step button {
  width: 34px; height: 34px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ej-pink-lt);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.ej-c-step button:hover { background: var(--ej-panel-hi); color: var(--ej-cream); }
.ej-c-step span { min-width: 22px; text-align: center; font-size: 14px; font-weight: 700; }

.ej-c-remove {
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 0;
  border: none;
  background: none;
  color: var(--ej-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ej-c-remove:hover { color: var(--ej-pink-lt); }

.ej-c-foot {
  padding: 16px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: inset 0 1px 0 var(--ej-line);
}
.ej-c-foot:empty { display: none; }
.ej-c-sum { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; font-weight: 600; }
.ej-c-sum:first-child { font-family: Syne, sans-serif; font-size: 17px; font-weight: 700; }
.ej-c-ship { color: var(--ej-cream); }
.ej-c-ship em { font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--ej-muted); margin-left: 4px; }
.ej-c-note { font-size: 12.5px; line-height: 1.5; color: var(--ej-muted); }
/* The shop's own shipping-code box (2026-10-20): a folded line until opened. */
.ej-c-code { font-size: 12.5px; line-height: 1.5; color: var(--ej-muted); }
.ej-c-code summary { cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 2px; }
.ej-c-code summary::-webkit-details-marker { display: none; }
.ej-c-code.is-on { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.ej-c-code.is-on b { color: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.ej-c-coderow { display: flex; gap: 6px; margin-top: 6px; }
.ej-c-coderow input { flex: 1; min-width: 0; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase;
                      padding: 6px 8px; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; }
.ej-c-coderow button, .ej-c-codeclear { font: inherit; font-size: 12.5px; padding: 6px 10px; border: 1px solid currentColor; border-radius: 6px;
                                        background: transparent; color: inherit; cursor: pointer; white-space: nowrap; }
.ej-c-coderow button:hover, .ej-c-codeclear:hover { text-decoration: underline; }
.ej-c-err {
  font-size: 13px;
  line-height: 1.5;
  color: #FF9BB0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 155, 176, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 155, 176, 0.3);
}

.ej-c-go {
  height: 50px;
  margin-top: 6px;
  border: none;
  border-radius: 999px;
  background: var(--ej-pink);
  color: #2A0C1B;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.ej-c-go:hover { background: var(--ej-pink-hi); }
.ej-c-go[disabled] { opacity: 0.6; cursor: default; }
.ej-c-go-alt { background: var(--ej-panel); color: var(--ej-pink-lt); padding: 0 24px; }
.ej-c-go-alt:hover { background: var(--ej-panel-hi); color: var(--ej-cream); }

.ej-c-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 10px 4px; }
.ej-c-empty p { margin: 0; font-size: 15px; color: var(--ej-muted); }

#ej-cart button:focus-visible,
#ej-cart a:focus-visible { outline: 2px solid var(--ej-pink); outline-offset: 2px; }