/* ============================================================================
   PRISMA — cart + checkout fixes (loaded LAST, after prisma-ui.css)
   Scope: basket (cart page + mini-cart) and checkout (steps → confirmation →
   order complete). Targets rz- classes only; tokens only, never #fff.
   Every rule here corrects a verified light/dark/mobile issue — see report.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Solid CTA text must use the on-accent token, not hardcoded white.
   prisma.css `.jtlw .rz-btn:not(--light):not(--ghost){color:#fff!important}`
   (and rz.css `.rz-scope a.rz-btn{color:#fff}`) pin every filled CTA to white,
   overriding the theme-aware --onRed. In dark the accent lightens (--red
   #FF9448) and white-on-that fails contrast (~2.2:1); --onRed is dark ink in
   dark, giving proper contrast. Light is unchanged (--onRed == #fff there).
   !important + container specificity to beat the prisma.css !important.
   -------------------------------------------------------------------------- */
.rz-cart-page .rz-btn:not(.rz-btn--ghost):not(.rz-btn--light),
.rz-cart-page .rz-btn:not(.rz-btn--ghost):not(.rz-btn--light):hover,
.rz-checkout .rz-btn:not(.rz-btn--ghost):not(.rz-btn--light),
.rz-checkout .rz-btn:not(.rz-btn--ghost):not(.rz-btn--light):hover,
.rz-mc .rz-btn:not(.rz-btn--ghost):not(.rz-btn--light),
.rz-mc .rz-btn:not(.rz-btn--ghost):not(.rz-btn--light):hover{
  color:var(--onRed)!important;
}

/* ----------------------------------------------------------------------------
   2. Ghost (secondary) buttons must be OUTLINE, not filled orange.
   prisma-ui.css `.rz-btn{background:var(--red)}` (0,1,0) loads after rz.css
   `.rz-btn--ghost{background:var(--surface)}` (0,1,0) and, unlike prisma.css's
   filled rule, does NOT `:not(--ghost)`-exclude it — so ghost buttons
   ("Zurück", "Warenkorb ändern", "Zum Warenkorb") render as solid orange,
   erasing the back/forward hierarchy. Re-assert the outline look. !important
   also beats prisma.css's `.jtlw .rz-btn:not(--light):hover` orange fill.
   -------------------------------------------------------------------------- */
.rz-cart-page .rz-btn--ghost,
.rz-checkout .rz-btn--ghost,
.rz-mc .rz-btn--ghost,
.rz-cart-page a.rz-btn--ghost,
.rz-checkout a.rz-btn--ghost,
.rz-mc a.rz-btn--ghost{
  background:var(--surface)!important; border:1px solid var(--line2)!important; color:var(--ink)!important;
}
.rz-cart-page .rz-btn--ghost:hover,
.rz-checkout .rz-btn--ghost:hover,
.rz-mc .rz-btn--ghost:hover{
  background:var(--surface)!important; border-color:var(--ink)!important; color:var(--ink)!important;
}

/* ----------------------------------------------------------------------------
   3. Cart-page grid layout (class `rz-cartgrid`).
   The cart page previously used class `rz-cart` for its 2-column grid, which
   COLLIDES with the header cart-button rules in prisma.css / prisma-ui.css
   (`.jtlw .rz-cart{background:jw-ink;height:44px;display:flex}` +
   `.jtlw .rz-cart *{color:#fff!important}`). That hijacked the whole cart page:
   every item/summary label went white (invisible in light, only legible in
   dark) and the panels overflowed a 44px inline-flex box and overlapped.
   basket/index.tpl now emits `rz-cartgrid` instead — a non-colliding name — so
   the leak can no longer match. Re-declare the grid it lost from rz.css here.
   -------------------------------------------------------------------------- */
.rz-cartgrid{display:grid; grid-template-columns:1fr 360px; gap:24px; align-items:start;}
@media (max-width:900px){ .rz-cartgrid{grid-template-columns:1fr;} }

/* =============================================================================
   WARENKORB — ported from the design prototype (screen "Warenkorb").
   Loaded after rz.css, which renders the line items as ONE bordered card with
   internal dividers; the design uses a separate card per item.
   ========================================================================== */

/* --- line items: one card each, not a single divided list ------------------ */
.jtlw .rz-citems{background:none;border:none;border-radius:0;overflow:visible;
  display:flex;flex-direction:column;gap:14px}
.jtlw .rz-citem{border:1px solid var(--line);border-radius:20px;background:var(--surface);
  border-bottom:1px solid var(--line);padding:18px 20px;gap:20px;
  transition:box-shadow .3s ease}
.jtlw .rz-citem:last-child{border-bottom:1px solid var(--line)}
.jtlw .rz-citem:hover{box-shadow:var(--shadow)}
.jtlw .rz-citem__media{width:105px;height:132px;border-radius:14px;overflow:hidden;flex-shrink:0}

/* the SKU leads the item block, in mono, matching the product card */
.jtlw .rz-citem__cat{font-family:var(--mono);font-size:10.5px;color:var(--muted);
  text-transform:none;letter-spacing:0;margin-bottom:6px}
.jtlw .rz-citem__name{font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
/* variation lines collapse onto one muted row */
.jtlw .rz-citem__var{font-size:13px;color:var(--muted);margin-top:5px}
.jtlw .rz-citem__linetot{font-size:22px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* --- free-shipping progress bar -------------------------------------------- */
.rz-shipbar{margin:0 0 16px}
.rz-shipbar__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:12.5px;color:var(--ink2);margin-bottom:9px}
.rz-shipbar__pct{font-family:var(--mono);font-size:11px;color:var(--muted)}
.rz-shipbar__track{height:6px;border-radius:999px;background:var(--line2);overflow:hidden}
.rz-shipbar__fill{height:100%;border-radius:999px;background:var(--red);
  transition:width .6s cubic-bezier(.16,1,.3,1)}

/* --- accepted payment methods, as mono chips ------------------------------- */
.rz-paychips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  list-style:none;margin:14px 0 0;padding:0}
.rz-paychips li{padding:6px 12px;border-radius:999px;background:var(--sand);
  font-family:var(--mono);font-size:10.5px;color:var(--ink2);white-space:nowrap}

/* --- page head: title left, item count right ------------------------------ */
.jtlw .rz-cart-page .rz-pagehead{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.jtlw .rz-cart-page .rz-pagehead .rz-eyebrow{display:none}
.jtlw .rz-summary__t{font-size:17px;font-weight:700;letter-spacing:-.02em;margin-bottom:16px}

/* variation rows read as one muted line rather than a labelled list */
.jtlw .rz-citem__var{list-style:none;margin:5px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0 6px}
.jtlw .rz-citem__var li{font-size:13px;color:var(--muted)}
.jtlw .rz-citem__var li.variation strong{font-weight:400;color:var(--muted)}
.jtlw .rz-citem__var li + li::before{content:"\00b7";margin-right:6px;color:var(--line2)}

/* =============================================================================
   KASSE — ported from the design prototype (screen "Kasse").
   rz.css lays the stepper out as a plain inline row with connector lines; the
   design uses a single pill-shaped track with the current step as a filled
   accent pill. JTL's real edit-step links are untouched.
   ========================================================================== */

/* --- page head: title left, secure-connection note right ------------------- */
.jtlw .rz-co-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.jtlw .rz-co-head h1{font-size:clamp(30px,4vw,48px);font-weight:800;letter-spacing:-.03em;margin:0}
.jtlw .rz-co-head .rz-secure{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}

/* --- stepper: one sand track, active step is a filled accent pill ---------- */
.jtlw .rz-stepper{display:flex;align-items:stretch;justify-content:stretch;gap:0;flex-wrap:nowrap;
  background:var(--sand);border-radius:999px;padding:6px;margin-bottom:32px;overflow-x:auto;scrollbar-width:none}
.jtlw .rz-stepper::-webkit-scrollbar{display:none}
.jtlw .rz-step{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 20px;border-radius:999px;white-space:nowrap;color:var(--muted);
  font-size:14px;font-weight:600;transition:background .3s ease,color .3s ease}
.jtlw .rz-step:hover{color:var(--ink)}
.jtlw .rz-step__badge{width:24px;height:24px;border-radius:999px;background:var(--line2);color:var(--ink2);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;flex-shrink:0}
/* the connector lines are part of rz.css's row layout, not this one */
.jtlw .rz-step__line{display:none}

.jtlw .rz-step.is-active{background:var(--red);color:var(--onRed)}
.jtlw .rz-step.is-active .rz-step__badge{background:rgba(255,255,255,.26);color:var(--onRed)}
.jtlw .rz-step.is-done{color:var(--ink2)}
.jtlw .rz-step.is-done .rz-step__badge{background:var(--ok);color:var(--onRed)}

/* --- login / guest cards --------------------------------------------------- */
.jtlw .rz-cocard{border-radius:20px;padding:clamp(20px,2.4vw,28px)}
.jtlw .rz-cocard h2,.jtlw .rz-cocard .title{font-size:19px;font-weight:700;letter-spacing:-.02em;margin:0 0 18px}
/* the guest card is the sand-filled sibling in the design */
.jtlw .rz-cocard--guest{background:var(--sand);border-color:transparent}
.jtlw .rz-cocard--guest .rz-btn{background:var(--surface);color:var(--ink);border:1px solid var(--line2)}
.jtlw .rz-cocard--guest .rz-btn:hover{background:var(--surface);border-color:var(--ink);color:var(--ink)}

/* red tick list inside the guest card (drawn, not a font glyph) */
.jtlw .rz-co-checks{list-style:none;margin:16px 0 22px;padding:0}
.jtlw .rz-co-checks li{position:relative;padding-left:24px;margin-bottom:11px;font-size:14px;color:var(--ink2)}
.jtlw .rz-co-checks li::before{content:"";position:absolute;left:3px;top:5px;width:6px;height:11px;
  border:solid var(--red);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* --- order summary card ---------------------------------------------------- */
.jtlw .rz-cosum{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:clamp(18px,2.2vw,24px)}
.jtlw .rz-cosum__t{font-size:17px;font-weight:700;letter-spacing:-.02em;margin-bottom:18px}
.jtlw .rz-coitem{display:flex;align-items:flex-start;gap:12px;padding:0 0 14px}
.jtlw .rz-coitem__media{width:48px;height:58px;border-radius:10px;overflow:hidden;flex-shrink:0}
.jtlw .rz-coitem__body{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.3}
.jtlw .rz-coitem__body small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);font-weight:400;margin-top:3px}
.jtlw .rz-coitem__price{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.jtlw .rz-cosum__list{border-top:1px solid var(--line);padding-top:14px;margin-top:2px}
.jtlw .rz-cosum__row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--ink2);margin-bottom:8px}
.jtlw .rz-cosum__price{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
.jtlw .rz-cosum__price > *:first-child{font-size:16px;font-weight:700}
.jtlw .rz-cosum__price > *:last-child{font-size:24px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

@media (max-width:940px){
  .jtlw .rz-stepper{border-radius:20px;padding:6px}
  .jtlw .rz-step{flex:0 0 auto}
}

/* --- checkout step 0: login | guest, then the registration/guest form ------ */
.jtlw .rz-costep0{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;align-items:start}
.jtlw .rz-cocard--login,.jtlw .rz-cocard--guest,.jtlw .rz-cocard--form{border-radius:20px}
.jtlw .rz-cocard--form{margin-bottom:8px}
.jtlw .rz-cocard .title{font-size:19px;font-weight:700;letter-spacing:-.02em;margin:0 0 18px;color:var(--ink)}
.jtlw .rz-cocard--guest p{font-size:14px;color:var(--ink2);line-height:1.6;margin:0}
/* the guest card's CTA is the outlined sibling, not a second primary button */
.jtlw .rz-cocard--guest .rz-btn{background:var(--surface);color:var(--ink);border:1px solid var(--line2)}
.jtlw .rz-cocard--guest .rz-btn:hover{background:var(--surface);border-color:var(--ink);color:var(--ink)}
/* form footer: privacy note left, submit right */
.jtlw .rz-coform-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.jtlw .rz-coform-privacy{font-size:12.5px;color:var(--muted);text-decoration:underline}
.jtlw .rz-coform-privacy:hover{color:var(--red)}
.jtlw .rz-coform-foot .checkout-button-row-submit{min-width:240px}
@media (max-width:880px){
  .jtlw .rz-costep0{grid-template-columns:1fr}
  .jtlw .rz-coform-foot .checkout-button-row-submit{min-width:0;width:100%}
}