/* ============================================================================
   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;} }
/* `1fr` is minmax(auto,1fr), so the track cannot go below the min-content width
   of its widest child — and the summary column holds rows whose label and value
   will not break (the Gutschein field, the payment-brand strip). Measured at a
   390 viewport: a 346px grid with a 369px track, so the cart card and the
   "Weiter zur Kasse" button ran ~23px off the right of the screen. It was not
   visible as a scroll because `body` is overflow-x:clip — the page simply cut
   the ends off. min-width:0 lets the items be narrower than their content and
   wrap inside instead. */
.rz-cartgrid > *{min-width:0}

/* =============================================================================
   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}
/* The colour needs !important: prisma-ui.css pins every .rz-btn that is not
   --ghost or --light to var(--onRed) with !important, for the accent-filled
   buttons. This one is a surface button, so it inherited white text on a white
   ground and rendered as an empty pill. */
/* the ID is needed, not just !important: prisma-ui's rule is (0,4,0) and this was
   (0,3,0), so !important alone still lost and the label stayed white on white */
.jtlw #guest-checkout .rz-btn,
.jtlw .rz-cocard--guest .rz-btn:not(.rz-btn--ghost){background:var(--surface)!important;
  color:var(--ink)!important;border:1px solid var(--line2)!important}
.jtlw #guest-checkout .rz-btn:hover,
.jtlw .rz-cocard--guest .rz-btn:not(.rz-btn--ghost):hover{background:var(--sand)!important;
  border-color:var(--ink)!important;color:var(--ink)!important}

/* 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%}
}

/* ---------- labels that follow their control -------------------------------- */
/* {formgroup} emits .form-group — not .form-label-group, which is what the earlier
   fix targeted, so it never reached these fields. JTL puts the <label> AFTER the
   control here, so without the base sheet's positioning the label lands beside a
   select and under an input: "Land" to the right of the country box, "PLZ" beneath
   its field.
   Flipped only where the label really does follow the control, so ordinary Bootstrap
   groups that already put their label first are untouched. */
.jtlw .form-group:has(> .form-control + label),
.jtlw .form-group:has(> .custom-select + label),
.jtlw .form-group:has(> select + label){display:flex;flex-direction:column-reverse;
  align-items:stretch;gap:6px}
.jtlw .form-group:has(> .form-control + label) > label,
.jtlw .form-group:has(> .custom-select + label) > label,
.jtlw .form-group:has(> select + label) > label{margin:0;font-size:12.5px;font-weight:600;
  color:var(--ink2);line-height:1.3}

/* ---------- shipping estimator in the cart ---------------------------------- */
.jtlw .shipping-calculator-main{border:1px solid var(--line);border-radius:20px;
  background:var(--surface);padding:20px 22px;margin:18px 0 0;max-width:none}
.jtlw .shipping-calculator-main-heading{font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:400;margin:0 0 14px}
/* one row: country takes the slack, postcode is narrow, the button closes it */
/* align-items was flex-end. The two field columns are taller than the button
   column by exactly one label, because only they carry a label — so aligning on
   the bottom edge dropped the button a label's height (measured: 30px) BELOW the
   two fields, level with the "Land"/"PLZ" captions instead of with the controls.
   Top-align instead: the three controls then sit on one line and each label
   hangs under its own field. flex-start alone is not enough, because whether the
   label lands above or below depends on the :has() flip further up matching the
   markup JTL actually emits — so pin the order here too and the row is correct
   either way. */
.jtlw .shipping-calculator-main .form-row{display:flex;flex-wrap:wrap;align-items:flex-start;
  gap:12px;margin:0}
.jtlw .shipping-calculator-main .form-row > [class*="col"]{flex:0 0 auto;width:auto;
  max-width:none;padding:0;margin:0}
.jtlw .shipping-calculator-main .shipping-calculator-main-country{flex:1 1 220px;min-width:0}
/* the :has() label-flip above matches at (0,3,1); these have to clear it, or the
   flip wins inside the calculator, the label goes back above the control and the
   button lines up with the CAPTION instead — the same bug 22px the other way. */
.jtlw .shipping-calculator-main .form-group,
.jtlw .shipping-calculator-main .form-group:has(> .form-control + label),
.jtlw .shipping-calculator-main .form-group:has(> .custom-select + label),
.jtlw .shipping-calculator-main .form-group:has(> select + label){margin:0;display:flex;
  flex-direction:column;align-items:stretch;gap:6px}
/* the fields themselves, in the design's chrome */
.jtlw .shipping-calculator-main .custom-select,
.jtlw .shipping-calculator-main select,
.jtlw .shipping-calculator-main .form-control{width:100%;height:auto;padding:11px 14px;
  border:1px solid var(--line2);border-radius:12px;background:var(--surface);
  color:var(--ink);font-size:14px;box-shadow:none;appearance:none;-webkit-appearance:none}
.jtlw .shipping-calculator-main .custom-select,
.jtlw .shipping-calculator-main select{padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.jtlw .shipping-calculator-main .form-control:focus,
.jtlw .shipping-calculator-main select:focus{border-color:var(--ink);outline:none;box-shadow:none}
.jtlw .shipping-calculator-main .shipping-calculator-main-zip{flex:0 0 150px}
/* the button sits on the field baseline, not stretched across the block */
.jtlw .shipping-calculator-main .btn{width:auto!important;display:inline-flex;
  align-items:center;justify-content:center;padding:12px 22px;border-radius:999px;
  border:1px solid var(--line2);background:var(--surface);color:var(--ink);
  font-size:14px;font-weight:600;white-space:nowrap}
.jtlw .shipping-calculator-main .btn:hover{border-color:var(--ink);background:var(--sand);color:var(--ink)}
@media (max-width:640px){
  .jtlw .shipping-calculator-main .form-row > [class*="col"]{flex:1 1 100%;width:100%}
  .jtlw .shipping-calculator-main .btn{width:100%!important}
}

/* --- the stepper fits the phone instead of being swiped -------------------- */
/* .rz-stepper is nowrap + overflow-x:auto, so it never widened the page — but
   three labelled steps need ~500px and the track is 346px at phone width, which
   left "Zusammenfassung" off-screen behind a horizontal scroll nobody goes
   looking for in a checkout. Where you ARE is the only label that has to be
   readable; the steps behind and ahead are their number, or their tick once
   done. The labels are clipped rather than display:none'd, so all three are
   still in the accessible name — which is what carries step 3, the one step
   inc_steps.tpl renders as a <div> with no title of its own. */
@media (max-width:560px){
  .jtlw .rz-stepper{padding:5px}
  .jtlw .rz-step{flex:0 0 auto;gap:8px;padding:11px 12px;font-size:13px}
  .jtlw .rz-step:not(.is-active) .rz-step__label{
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .jtlw .rz-step.is-active{flex:1 1 auto;justify-content:flex-start;min-width:0}
  .jtlw .rz-step.is-active .rz-step__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .jtlw .rz-step__badge{width:22px;height:22px;font-size:10.5px}
}