/* deinehaut x Medusa — cart, checkout & toast. Uses the brand design tokens. */

/* ---------- Toast ---------- */
#dh-toast {
  position: fixed;
  right: clamp(12px, 3vw, 28px);
  bottom: clamp(12px, 3vw, 28px);
  z-index: 9999;
  max-width: 360px;
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
#dh-toast.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dh-toast__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "img body" "img cta";
  gap: 2px 14px;
  align-items: center;
  background: var(--dh-surface-elevated, #fff);
  border: 1px solid var(--dh-line, rgba(31, 29, 26, 0.12));
  border-radius: 14px;
  box-shadow: var(--dh-shadow-card-md, 0 22px 48px -28px rgba(31, 29, 26, 0.3));
  padding: 14px 16px;
}
.dh-toast__inner--error { grid-template-columns: 1fr; grid-template-areas: "body"; }
.dh-toast__img { grid-area: img; width: 52px; height: 52px; object-fit: cover; border-radius: 9px; background: var(--dh-cream); }
.dh-toast__body { grid-area: body; display: flex; flex-direction: column; gap: 2px; }
.dh-toast__body strong { font-family: var(--dh-mono); font-size: 0.78rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--dh-charcoal); }
.dh-toast__body span { font-size: 0.92rem; color: var(--dh-graphite); }
.dh-toast__cta { grid-area: cta; justify-self: start; font-family: var(--dh-mono); font-size: 0.8rem; color: var(--dh-ochre); text-decoration: none; margin-top: 4px; }
.dh-toast__cta:hover { text-decoration: underline; }

/* ---------- Cart page ---------- */
#dh-cart-app { max-width: 1100px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 28px) 64px; }
.dh-mcart { display: grid; grid-template-columns: 1fr 340px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.dh-mcart--empty, .dh-mcart--loading { display: block; text-align: center; padding: 48px 0; color: var(--dh-graphite); font-family: var(--dh-mono); }
.dh-mcart__empty-text { font-size: 1.05rem; margin-bottom: 18px; }
.dh-mcart__rows { display: flex; flex-direction: column; }
.dh-mcart__row {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--dh-line);
}
.dh-mcart__row:first-child { border-top: 1px solid var(--dh-line); }
.dh-mcart__thumb { display: block; width: 92px; height: 92px; border-radius: 11px; overflow: hidden; background: var(--dh-cream); border: 1px solid var(--dh-line); }
.dh-mcart__thumb img { width: 100%; height: 100%; object-fit: cover; }
.dh-mcart__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dh-mcart__title { font-family: var(--dh-display-serif); font-size: 1.25rem; color: var(--dh-charcoal); text-decoration: none; }
.dh-mcart__title:hover { color: var(--dh-ochre); }
.dh-mcart__variant { font-family: var(--dh-mono); font-size: 0.78rem; color: var(--dh-graphite); }
.dh-mcart__unit { font-family: var(--dh-mono); font-size: 0.85rem; color: var(--dh-graphite); }
.dh-mcart__qty { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.dh-mcart__qbtn { width: 30px; height: 30px; border: 1px solid var(--dh-line-strong); background: transparent; border-radius: 8px; font-size: 1rem; cursor: pointer; color: var(--dh-charcoal); transition: background 0.15s ease, border-color 0.15s ease; }
.dh-mcart__qbtn:hover { background: var(--dh-cream); border-color: var(--dh-charcoal); }
.dh-mcart__qinput { width: 42px; height: 30px; text-align: center; border: 1px solid var(--dh-line-strong); border-radius: 8px; font-family: var(--dh-mono); font-size: 0.85rem; background: #fff; color: var(--dh-charcoal); }
.dh-mcart__remove { margin-left: 8px; background: none; border: none; font-family: var(--dh-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dh-graphite); cursor: pointer; text-decoration: underline; }
.dh-mcart__remove:hover { color: var(--dh-terracotta); }
.dh-mcart__line-total { font-family: var(--dh-mono); font-size: 0.98rem; color: var(--dh-charcoal); white-space: nowrap; }
.dh-mcart__summary { position: sticky; top: 24px; background: var(--dh-surface-soft, #faf6ec); border: 1px solid var(--dh-line); border-radius: 16px; padding: 24px; box-shadow: var(--dh-shadow-card-sm); }
.dh-mcart__summary-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--dh-mono); }
.dh-mcart__summary-row span { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dh-graphite); }
.dh-mcart__summary-row strong { font-size: 1.35rem; color: var(--dh-charcoal); }
.dh-mcart__note { font-size: 0.78rem; color: var(--dh-graphite); margin: 12px 0 18px; line-height: 1.5; }
.dh-mcart__checkout, .dh-co__btn { display: block; width: 100%; text-align: center; padding: 15px 20px; background: var(--dh-charcoal); color: var(--dh-cream); font-family: var(--dh-mono); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border: none; border-radius: 999px; cursor: pointer; transition: transform 0.15s ease, background 0.2s ease; }
.dh-mcart__checkout:hover, .dh-co__btn:hover { background: #000; transform: translateY(-1px); }
.dh-mcart__continue { display: block; text-align: center; margin-top: 12px; font-family: var(--dh-mono); font-size: 0.8rem; color: var(--dh-graphite); text-decoration: none; }
.dh-mcart__continue:hover { color: var(--dh-ochre); }

/* ---------- Checkout ---------- */
#dh-checkout-app { max-width: 1180px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 28px) 80px; }
.dh-co { display: grid; grid-template-columns: 1fr 380px; gap: clamp(28px, 5vw, 72px); align-items: start; }
.dh-co--empty, .dh-co--done { display: block; text-align: center; padding: 56px 0; }
.dh-co__back { font-family: var(--dh-mono); font-size: 0.78rem; color: var(--dh-graphite); text-decoration: none; }
.dh-co__back:hover { color: var(--dh-ochre); }
.dh-co__h1 { font-family: var(--dh-display-serif); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); color: var(--dh-charcoal); margin: 8px 0 28px; }
.dh-co__step { border-top: 1px solid var(--dh-line); padding: 26px 0; transition: opacity 0.2s ease; }
.dh-co__step.is-locked { opacity: 0.38; pointer-events: none; filter: grayscale(0.3); }
.dh-co__step-title { display: flex; align-items: center; gap: 12px; font-family: var(--dh-mono); font-size: 0.92rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dh-charcoal); margin-bottom: 20px; }
.dh-co__step-title span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--dh-charcoal); color: var(--dh-cream); font-size: 0.8rem; }
.dh-co__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dh-co__field { display: flex; flex-direction: column; gap: 6px; }
.dh-co__field--full { grid-column: 1 / -1; }
.dh-co__field span { font-family: var(--dh-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dh-graphite); }
.dh-co__field input, .dh-co__field select { padding: 12px 14px; border: 1px solid var(--dh-line-strong); border-radius: 10px; font-size: 0.95rem; font-family: var(--dh-sans); background: #fff; color: var(--dh-charcoal); }
.dh-co__field input:focus, .dh-co__field select:focus { outline: none; border-color: var(--dh-ochre); box-shadow: var(--dh-ring-focus); }
.dh-co__btn { grid-column: 1 / -1; margin-top: 8px; width: auto; justify-self: start; padding-left: 36px; padding-right: 36px; }
.dh-co__btn--pay { width: 100%; justify-self: stretch; }
.dh-co__btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.dh-co__shipping { display: flex; flex-direction: column; gap: 12px; }
.dh-co__ship { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--dh-line-strong); border-radius: 12px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.dh-co__ship:has(input:checked) { border-color: var(--dh-charcoal); background: var(--dh-cream); }
.dh-co__ship-name { font-family: var(--dh-mono); font-size: 0.85rem; color: var(--dh-charcoal); }
.dh-co__ship-price { font-family: var(--dh-mono); font-size: 0.85rem; color: var(--dh-graphite); }
.dh-co__pay-note { font-size: 0.84rem; color: var(--dh-graphite); line-height: 1.6; margin-bottom: 18px; }
.dh-co__error { color: var(--dh-terracotta); font-family: var(--dh-mono); font-size: 0.82rem; margin-top: 12px; min-height: 1em; }

/* Summary aside */
.dh-co__aside { position: sticky; top: 24px; background: var(--dh-surface-soft, #faf6ec); border: 1px solid var(--dh-line); border-radius: 16px; padding: 24px; box-shadow: var(--dh-shadow-card-sm); }
.dh-co__aside-title, .dh-co__sum-title { font-family: var(--dh-mono); }
.dh-co__aside-title { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dh-graphite); margin-bottom: 18px; }
.dh-co__sum-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; }
.dh-co__sum-thumb { position: relative; width: 52px; height: 52px; border-radius: 9px; overflow: hidden; background: var(--dh-cream); border: 1px solid var(--dh-line); }
.dh-co__sum-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dh-co__sum-qty { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; background: var(--dh-charcoal); color: var(--dh-cream); border-radius: 999px; font-family: var(--dh-mono); font-size: 0.7rem; }
.dh-co__sum-title { font-size: 0.9rem; color: var(--dh-charcoal); }
.dh-co__sum-price { font-family: var(--dh-mono); font-size: 0.84rem; color: var(--dh-charcoal); }
.dh-co__sum-totals { margin-top: 16px; border-top: 1px solid var(--dh-line); padding-top: 16px; }
.dh-co__sum-line { display: flex; justify-content: space-between; font-family: var(--dh-mono); font-size: 0.84rem; color: var(--dh-graphite); padding: 5px 0; }
.dh-co__sum-line--total { border-top: 1px solid var(--dh-line); margin-top: 8px; padding-top: 14px; font-size: 1.05rem; color: var(--dh-charcoal); }
.dh-co__sum-line--total span:last-child { font-weight: 600; }

/* Confirmation */
.dh-co__done-mark { width: 64px; height: 64px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; background: var(--dh-moss, #5b7a52); color: #fff; font-size: 2rem; }
.dh-co__done-sub { color: var(--dh-graphite); font-size: 1rem; margin: 6px 0; }
.dh-co__done-summary { max-width: 460px; margin: 28px auto; text-align: left; }
.dh-co--done .dh-co__btn { display: inline-block; width: auto; margin-top: 16px; }

@media (max-width: 860px) {
  .dh-mcart { grid-template-columns: 1fr; }
  .dh-co { grid-template-columns: 1fr; }
  .dh-co__aside { order: -1; position: static; }
}