/* ==========================================================================
   Shop — cart, checkout, account and order status.

   Extends the design system in deco.css and reuses its custom properties
   (--ink-*, --cream-*, --line*, --gold-*, --space-*). Nothing here redefines
   a token; if a value is missing from deco.css it belongs there, not here.
   ========================================================================== */

/* --- Flash messages ------------------------------------------------------ */
.dd-flash { display: flex; flex-direction: column; gap: 8px; padding-block: 16px 0; }

.dd-flash__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: var(--fs-body-sm);
  color: var(--ink-800);
}

.dd-flash__item i { font-size: 1.25em; color: var(--ink-500); }
.dd-flash__item--success { border-color: var(--gold-300); background: var(--gold-100); }
.dd-flash__item--success i { color: var(--gold-600); }
.dd-flash__item--error { border-color: #e0c3bc; background: #fbf0ee; color: #7d3a2f; }
.dd-flash__item--error i { color: var(--error); }

/* --- Generic page shell for the shop's utility pages --------------------- */
.shop-page { padding-block: clamp(32px, 5vw, 64px); }
.shop-page__title { font-family: var(--font-display); font-size: var(--fs-h2); margin: 0; }
.shop-page__lede { color: var(--ink-500); max-width: 60ch; margin-top: 10px; }

.shop-panel {
  border: 1px solid var(--line);
  background: var(--white);
  padding: clamp(20px, 3vw, 32px);
}

.shop-panel + .shop-panel { margin-top: 20px; }
.shop-panel__title { font-family: var(--font-display); font-size: var(--fs-h3); margin: 0 0 6px; }
.shop-panel__note { color: var(--ink-500); font-size: var(--fs-body-sm); margin: 0; }

/* Two-column layout: content on the left, sticky summary on the right. */
.shop-split { display: grid; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (min-width: 900px) { .shop-split { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (min-width: 900px) { .shop-split__aside { position: sticky; top: 24px; } }

/* --- Line-item list (cart, checkout summary, order) ---------------------- */
.shop-lines { list-style: none; margin: 0; padding: 0; }

.shop-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding-block: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.shop-line:last-child { border-bottom: 0; }
.shop-line__media { width: 72px; height: 72px; background: var(--cream-200); overflow: hidden; }
.shop-line__media img { width: 100%; height: 100%; object-fit: cover; }
.shop-line__name { font-weight: var(--fw-medium); color: var(--ink-900); text-decoration: none; }
.shop-line__name:hover { color: var(--accent-text); }
.shop-line__meta { color: var(--ink-500); font-size: var(--fs-body-sm); margin-top: 4px; }
.shop-line__price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-line__controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

/* Inline forms in a cart line must not add vertical rhythm of their own. */
.shop-line__controls form { display: flex; align-items: center; gap: 8px; margin: 0; }

.shop-line__remove {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-500);
  font-size: var(--fs-body-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.shop-line__remove:hover { color: var(--error); }

/* --- Totals -------------------------------------------------------------- */
.shop-totals { list-style: none; margin: 0; padding: 0; }

.shop-totals li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 10px;
  font-size: var(--fs-body-sm);
  color: var(--ink-500);
}

.shop-totals li span:last-child { font-variant-numeric: tabular-nums; color: var(--ink-800); }

.shop-totals li.is-total {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 14px;
  font-size: var(--fs-body);
  color: var(--ink-900);
  font-weight: var(--fw-medium);
}

/* --- Forms --------------------------------------------------------------- */
.shop-form { display: grid; gap: 18px; }
.shop-form__row { display: grid; gap: 18px; }
@media (min-width: 640px) { .shop-form__row--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 640px) { .shop-form__row--3 { grid-template-columns: 1fr 1fr 1fr; } }

.dd-field__hint { color: var(--ink-500); font-size: var(--fs-body-xs, .75rem); }
.dd-field__error { color: var(--error); font-size: var(--fs-body-xs, .75rem); }
.dd-input[aria-invalid="true"] { border-color: var(--error); }

/* Code entry on the login screen: wide tracking so six digits stay legible. */
.shop-code-input {
  font-size: 1.5rem;
  letter-spacing: .5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- Stock ---------------------------------------------------------------- */
.shop-stock { font-size: var(--fs-body-sm); color: var(--ink-500); }
.shop-stock--out { color: var(--error); }

/* --- Order status --------------------------------------------------------- */
.order-head { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: baseline; }
.order-head__number { font-family: var(--font-display); font-size: var(--fs-h3); }
.order-meta { display: grid; gap: 4px; font-size: var(--fs-body-sm); color: var(--ink-500); }
.order-meta strong { color: var(--ink-900); font-weight: var(--fw-medium); }

/* Progress rail. Steps are laid out horizontally and wrap on small screens;
   the connector is drawn on the step itself so it never outlives the list. */
.order-track { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }

.order-track__step {
  flex: 1 1 120px;
  position: relative;
  padding-top: 28px;
  text-align: center;
  font-size: var(--fs-body-sm);
  color: var(--ink-300);
}

.order-track__step::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--white);
  z-index: 1;
}

.order-track__step::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: var(--line);
}

.order-track__step:last-child::after { display: none; }

.order-track__step[data-done="true"] { color: var(--ink-900); }
.order-track__step[data-done="true"]::before { background: var(--gold-500); border-color: var(--gold-500); }
.order-track__step[data-done="true"]::after { background: var(--gold-300); }

.order-timeline { list-style: none; margin: 0; padding: 0; }

.order-timeline li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 10px;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-body-sm);
}

.order-timeline li:last-child { border-bottom: 0; }
.order-timeline__when { color: var(--ink-500); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Right of withdrawal --------------------------------------------------
   The withdrawal function must be prominent and no harder to reach than
   placing the order was (Directive (EU) 2023/2673, Art. 11a). It therefore
   sits at the top of the order page as a full-width panel with a primary
   button — not a footer link, not a muted secondary control. */
.withdraw-panel {
  border: 1px solid var(--gold-300);
  background: var(--gold-100);
  padding: clamp(20px, 3vw, 28px);
  display: grid;
  gap: 14px;
}

.withdraw-panel__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  margin: 0;
  color: var(--ink-900);
}

.withdraw-panel__body { margin: 0; color: var(--ink-700); max-width: 62ch; }
.withdraw-panel__deadline { font-size: var(--fs-body-sm); color: var(--ink-500); }
.withdraw-panel__deadline strong { color: var(--ink-900); font-variant-numeric: tabular-nums; }
.withdraw-panel--done { border-color: var(--line); background: var(--cream-100); }
.withdraw-panel--expired { border-color: var(--line); background: var(--cream-100); }

.withdraw-contract {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.withdraw-contract > li {
  display: grid;
  gap: 2px;
  padding-block: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.withdraw-contract > li:last-child { border-bottom: 0; }

.withdraw-contract__k {
  font-size: var(--fs-body-xs, .75rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.withdraw-contract__v { color: var(--ink-900); }

.withdraw-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }