@import url("_fontface.css");
/* ============================================================================
 * PRISMA — bespoke design system for NW Handel. Loaded LAST so it owns the
 * cascade. Strategy: (1) redefine EVERY token name the base skins use (rz.css,
 * custom.css, jtl-widgets, Bootstrap) on .jtlw so the whole stack auto-renders
 * in Prisma's warm-sand / burnt-orange palette + Outfit/DM Mono — no bleed.
 * (2) structurally restyle the rz-* shell to Prisma's divided-cell masthead,
 * ticker, capsule nav & mega card, keyed to rz-nav.js state classes
 * (.rz-headwrap.rz-stuck, .rz-menu-item.has-mega.is-open, .rz-dd.is-open,
 * #rz-drawer.is-open, .rz-mc-overlay.is-open). (3) neutralize NOVA widgets.
 * "Kinetic modern": Outfit + DM Mono, cell dividers, mono indices, fail-open.
 * ========================================================================== */

/* ============================ 1. TOKENS (light) ========================== */
.jtlw{
  /* — Prisma core — */
  --paper:#FAF5EF; --surface:#FFFFFF; --sand:#F1E7DA; --soft:#F4ECDF;
  --ink:#1F1611; --ink2:#524339; --ink3:#77655A; --muted:#77655A; --muted-2:#9B8878;
  --line:#EADED0; --line2:#D8C7B4; --line-2:#D8C7B4;
  --red:#AD4708; --redink:#FFFFFF; --redSoft:#000000; --onRed:#FFFFFF;
  --ok:#1C7A4E; --okSoft:#E4F2EA; --ok-bg:#E4F2EA; --star:#D8871B;
  --amber:#0F6F78; --amberSoft:#DCEEF0;
  --panel:#1A120C; --onPanel:#FAF5EF; --onPanelMuted:rgba(250,245,239,.62);
  --headerBg:rgba(250,245,239,.86); --scrim:rgba(255,255,255,.94); --onScrim:#1F1611;
  --shadow:0 14px 36px rgba(50,30,14,.10); --shadowLg:0 26px 64px rgba(50,30,14,.16);
  --maxw:1320px; --mono:'DM Mono',ui-monospace,monospace;
  --head:'Outfit',system-ui,sans-serif; --body:'Outfit',system-ui,sans-serif;

  /* — retint rz.css — */
  --sh-drop:var(--shadowLg); --sh-mega:var(--shadowLg); --sh-cart:-20px 0 60px rgba(50,30,14,.28);

  /* — retint custom.css (old Beauty skin) — */
  --primary:var(--red); --primary-600:#9A3F07; --primary-700:#823505; --primary-2:var(--red);
  --secondary:var(--panel); --accent:var(--red);
  --grad:linear-gradient(135deg,#C2500A,var(--red)); --grad-soft:linear-gradient(135deg,var(--redSoft),var(--redSoft));
  --ink-2:var(--ink2); --page:var(--paper); --surface-2:var(--sand);
  --success:var(--ok); --danger:#B3261E; --warning:#B7791F; --info:var(--amber);
  --header-bg:var(--paper); --header-ink:var(--ink); --footer-bg:var(--panel);
  --footer-ink:var(--onPanelMuted); --copyright-bg:#140D08;
  --r-xs:10px; --r-sm:14px; --r:18px; --r-lg:24px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(50,30,14,.05),0 2px 8px rgba(50,30,14,.05);
  --sh-md:var(--shadow); --sh-lg:var(--shadowLg); --sh-brand:0 16px 40px rgba(173,71,8,.28);

  /* — Bootstrap — */
  --font-family-sans-serif:'Outfit',system-ui,sans-serif;

  /* — jtl-widgets (prisma.css) — */
  --jw-accent:var(--red); --jw-accent-2:#C2500A; --jw-accent-soft:var(--redSoft);
  --jw-ink:var(--ink); --jw-ink-2:var(--ink2); --jw-muted:var(--muted);
  --jw-surface:var(--surface); --jw-surface-2:var(--sand); --jw-shell:var(--panel); --jw-shell-ink:var(--onPanelMuted);
  --jw-line:var(--line); --jw-line-2:var(--line2); --jw-sale:var(--red); --jw-ok:var(--ok);
  --jw-radius:18px; --jw-radius-sm:14px; --jw-radius-lg:24px; --jw-pill:999px;
  --jw-font:'Outfit',system-ui,sans-serif; --jw-mono:var(--mono); --jw-shadow:var(--shadowLg);
}

/* ============================ 2. TOKENS (dark) =========================== */
/* NOTE (3 rules that must survive): --panel/--onPanel absent here (always-dark
   chrome must not invert); --onRed has its own dark value (red lightens →
   white-on-accent would drop to 3:1); --red lightens, not the light value. */
[data-theme="dark"] .jtlw,.jtlw[data-theme="dark"]{
  --paper:#140D08; --surface:#1E1510; --sand:#2A1E15; --soft:#241A12;
  --ink:#F6EDE3; --ink2:#D2BEAB; --ink3:#A08A78; --muted:#A08A78; --muted-2:#8A7362;
  --line:#31241A; --line2:#453325; --line-2:#453325;
  --red:#FF9448; --redink:#2A1204; --redSoft:#3A2010; --onRed:#2A1204;
  --ok:#5BD095; --okSoft:#0D2B1F; --ok-bg:#0D2B1F; --star:#F0B54B;
  --amber:#4FC7D2; --amberSoft:#0E3236;
  --headerBg:rgba(20,13,8,.86); --scrim:rgba(32,22,15,.94); --onScrim:#F6EDE3;
  --shadow:0 16px 40px rgba(0,0,0,.5); --shadowLg:0 28px 70px rgba(0,0,0,.62);
  --primary:var(--red); --primary-600:#E07A2E; --accent:var(--red);
  --ink-2:var(--ink2); --page:var(--paper); --surface-2:var(--sand);
  --header-bg:var(--paper); --header-ink:var(--ink); --footer-bg:#0F0A06; --copyright-bg:#0A0704;
  /* re-assert the jtl-widgets mapping — prisma.css's OWN dark block resets these to a
     cool-gray/teal palette; without this, jw-skinned widgets + buttons go teal in dark. */
  --jw-accent:var(--red); --jw-accent-2:#FFB070; --jw-accent-soft:var(--redSoft); --jw-sale:var(--red); --jw-ok:var(--ok);
  --jw-surface:var(--surface); --jw-surface-2:var(--sand); --jw-ink:var(--ink); --jw-ink-2:var(--ink2);
  --jw-muted:var(--muted); --jw-line:var(--line); --jw-line-2:var(--line2);
}
/* root canvas MUST be painted — the header's backdrop-filter blurs whatever is
   behind it; a default-white html canvas made the dark-mode header blend to cream. */
html{background:#FAF5EF}
html[data-theme="dark"]{background:#140D08}
html[data-theme="dark"] body{background:#140D08}

/* ============================ 3. BASE ==================================== */
.jtlw{background:var(--paper);color:var(--ink);font-family:'Outfit',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.jtlw,.jtlw body{overflow-x:clip}
/* headings INHERIT their container's color (dark on light bg, light on dark panels) —
   do NOT pin to --ink or they vanish on cathero/promo/footer dark panels. */
.jtlw h1,.jtlw h2,.jtlw h3,.jtlw h4{font-family:'Outfit',sans-serif;font-weight:700;letter-spacing:-.028em;line-height:1.08;text-wrap:balance;color:inherit}
.jtlw a{color:inherit;text-decoration:none}
.jtlw a:hover{color:var(--red)}
.jtlw img{max-width:100%}
.jtlw ::selection{background:var(--red);color:#fff}
.jtlw ::placeholder{color:var(--muted-2);opacity:1}
.jtlw :focus-visible{outline:2px solid var(--red);outline-offset:2px}
.rz-wrap,.px-wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:22px;padding-right:22px}
.px-mono,.rz-mono{font-family:var(--mono)}
.px-eyebrow,.rz-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}

/* ============ 3b. JTL WIDGET LAYER (replaces prisma.css) ================
 * prisma.css was a VENDORED, design-agnostic skin — another design sitting
 * under this one. It styled `.jtlw .rz-*` at (0,2,0) while this sheet wrote the
 * same components at (0,1,0), so it won every conflict despite loading first,
 * and it was the direct cause of nearly every defect found on the live shop:
 * the cart rendered as a 44px rounded chip instead of the flush masthead slab,
 * the add-to-cart was a 14px rect instead of a pill, a 2px ring was drawn round
 * the whole colour-swatch row, the search field carried a cream focus halo, and
 * in dark mode it pinned white onto the accent at ~2.2:1.
 *
 * It is gone from the chain. What it uniquely covered — JTL's own widget markup:
 * form controls, filters, the listing toolbar, cart rows, alerts — is restated
 * here in the design's own tokens, so those widgets are Prisma rather than a
 * generic skin tinted to look like it.
 * ======================================================================== */

/* ---- form controls ---- */
.jtlw .form-control,.jtlw .rz-input,.jtlw input[type=text],.jtlw input[type=email],
.jtlw input[type=password],.jtlw input[type=tel],.jtlw input[type=number],
.jtlw input[type=search],.jtlw textarea,.jtlw select.form-control{
  background:var(--surface);border:1px solid var(--line2);border-radius:14px;color:var(--ink);
  padding:12px 15px;font-family:'Outfit',system-ui,sans-serif;font-size:14px;outline:none;
  transition:border-color .2s ease,box-shadow .2s ease}
.jtlw .form-control:focus,.jtlw .rz-input:focus,.jtlw input:focus,.jtlw textarea:focus,
.jtlw select.form-control:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--redSoft)}
.jtlw .form-control::placeholder,.jtlw textarea::placeholder{color:var(--muted-2)}
.jtlw label,.jtlw .form-label{color:var(--ink2);font-size:13px;font-weight:600}
.jtlw .custom-control-input:checked~.custom-control-label::before,
.jtlw .rz-check.is-on .rz-check__box{background:var(--red)!important;border-color:var(--red)!important}

/* ---- dropdown popups (Sortierung, Artikel pro Seite, filter menus) ----
   These are plain Bootstrap dropdowns: a button plus a .dropdown-menu of
   .dropdown-item links. Nothing in the loaded chain was keeping them CLOSED, so
   the listing toolbar printed every sort option and every page-size option
   inline across the page instead of opening on click. The design system states
   the closed state itself rather than depending on Bootstrap being present and
   winning. .rz-dd-menu (the masthead's own panels, deliberately flattened) is
   more specific and still overrides this. */
.jtlw .dropdown-menu{display:none;min-width:220px;padding:9px;margin-top:6px;
  border:1px solid var(--line);border-radius:18px;background:var(--surface);
  box-shadow:var(--shadowLg);z-index:60}
.jtlw .dropdown-menu.show,.jtlw .show > .dropdown-menu{display:block}
.jtlw .dropdown-menu > .dropdown-item,.jtlw .dropdown-menu > a{
  display:block;padding:9px 12px;border-radius:12px;font-size:14px;color:var(--ink2);
  white-space:nowrap;text-decoration:none}
.jtlw .dropdown-menu > .dropdown-item:hover,.jtlw .dropdown-menu > a:hover{
  background:var(--sand);color:var(--ink)}
.jtlw .dropdown-menu > .dropdown-item.active{background:var(--redSoft);color:var(--red);font-weight:600}

/* ---- bootstrap-select: EVERY popup, not just the PDP's ----
   jtl.article.js and the listing toolbar both replace <select> with
   bootstrap-select. Two things then go wrong unless stated here:
   (a) the native select still carries `form-control`/`rz-select`, so the field
       rules above paint the hidden source as a second visible box, and
   (b) nothing closes the menu, so the whole option list renders inline — which
       is why Sortierung and "Artikel pro Seite" printed every option across the
       toolbar as a row instead of opening on click.
   Scoping this to .variations (as it first was) fixed the product page and left
   the listing broken; it belongs at the widget layer. */
.jtlw .bootstrap-select > select,
.jtlw .bootstrap-select > select.form-control,
.jtlw .bootstrap-select > select.rz-select{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;border:0!important;background:none!important;opacity:0!important;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none}
.jtlw .bootstrap-select{width:auto;height:auto;min-height:0;padding:0;border:0;background:none;box-shadow:none}
.jtlw .bootstrap-select > .dropdown-menu{display:none}
.jtlw .bootstrap-select.show > .dropdown-menu{display:block;position:absolute;z-index:60;
  min-width:220px;margin-top:6px;padding:9px;border:1px solid var(--line);border-radius:18px;
  background:var(--surface);box-shadow:var(--shadowLg)}
.jtlw .bootstrap-select .dropdown-menu .inner{max-height:320px;overflow-y:auto}
.jtlw .bootstrap-select .dropdown-menu ul{padding:0;margin:0;list-style:none}
.jtlw .bootstrap-select .dropdown-menu li a,.jtlw .bootstrap-select .dropdown-item{
  display:block;border-radius:12px;padding:9px 12px;font-size:14px;color:var(--ink2);white-space:nowrap}
.jtlw .bootstrap-select .dropdown-menu li a:hover,
.jtlw .bootstrap-select .dropdown-menu li.selected a,
.jtlw .bootstrap-select .dropdown-item:hover{background:var(--sand);color:var(--ink)}
/* the closed control itself */
.jtlw .bootstrap-select > .dropdown-toggle{display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border:1px solid var(--line2);border-radius:999px;background:var(--surface);
  color:var(--ink);font-size:13.5px;font-weight:600;box-shadow:none}
.jtlw .bootstrap-select > .dropdown-toggle:hover{border-color:var(--ink)}

/* ---- secondary / outline buttons ---- */
.jtlw .rz-btn--light,.jtlw .btn-outline-primary,.jtlw .btn-secondary{
  background:var(--surface)!important;color:var(--ink)!important;
  border:1px solid var(--line2)!important;border-radius:999px}
.jtlw .rz-btn--light:hover,.jtlw .btn-outline-primary:hover,.jtlw .btn-secondary:hover{
  border-color:var(--ink)!important;background:var(--surface)!important}

/* ---- flags on product tiles ---- */
.jtlw .badge-new,.jtlw .rz-flag--new{background:var(--panel);color:var(--onPanel)}
.jtlw .badge-sale,.jtlw .rz-flag--sale,.jtlw .price-discount{background:var(--red);color:var(--onRed)}

/* ---- category: filters + toolbar ---- */
.jtlw .box-filter,.jtlw .rz-filter,.jtlw [class*=box-filter-]{border:none;background:none}
.jtlw .rz-facetrow,.jtlw .filter-item{border-bottom:1px solid var(--line)}
.jtlw .rz-swatch,.jtlw .filter-color{border:1px solid var(--line2);border-radius:999px}
.jtlw .rz-swatch.is-active,.jtlw .filter-color.active{border-color:var(--red);box-shadow:0 0 0 2px var(--red)}
.jtlw .rz-toolbar,.jtlw .productlist-config{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.jtlw .rz-sortbox,.jtlw .rz-viewtoggle{border:1px solid var(--line);background:var(--surface);border-radius:14px}
.jtlw .rz-viewtoggle .is-active,.jtlw .btn-option.active,.jtlw .btn-outline-secondary.active{
  background:var(--red)!important;color:var(--onRed)!important;border-color:var(--red)!important}
.jtlw .pagination .page-link,.jtlw .page-link{color:var(--ink2);border:1px solid var(--line);border-radius:14px;margin:0 2px}
.jtlw .pagination .page-link:hover{color:var(--red);background:var(--sand)}
.jtlw .page-item.active .page-link{background:var(--red)!important;border-color:var(--red)!important;color:var(--onRed)!important}

/* ---- PDP odds and ends ---- */
.jtlw .product-title{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.018em;color:var(--ink)}
.jtlw .tax-info{font-size:13px;color:var(--muted)}
.jtlw .availability-box{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2)}
.jtlw .availability-box .dot,.jtlw .available .dot{width:8px;height:8px;border-radius:999px;background:var(--ok)}
.jtlw .variation-swatch{border:2px solid var(--line2);border-radius:999px}
.jtlw .variation-swatch.active{border-color:var(--red)}
.jtlw .variation-value{border:1px solid var(--line2);border-radius:999px;padding:12px 20px}
.jtlw .variation-value.selected{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.jtlw .stepper,.jtlw .qty-stepper{display:inline-flex;align-items:center;border:1px solid var(--line2);
  border-radius:999px;overflow:hidden}
.jtlw .stepper .btn{background:var(--surface);color:var(--ink);border:none;width:44px;height:54px}
.jtlw .stepper input,.jtlw .stepper .quantity{border:none;text-align:center;width:44px;background:none}
/* Bootstrap stripes have no place in the design's tables */
.jtlw .table-striped>tbody>tr:nth-of-type(odd)>*{background:transparent!important;--bs-table-accent-bg:transparent!important}
.jtlw .rz-tab{color:var(--ink2);border:none;background:none}
.jtlw .rz-tab.on{color:var(--ink);border-bottom:2px solid var(--red)}

/* ---- cart ---- */
.jtlw .cart-item{border-bottom:1px solid var(--line);background:var(--surface)}
.jtlw .rz-summary,.jtlw .cart-summary{background:var(--surface);border:1px solid var(--line);border-radius:18px}
.jtlw .rz-sumline,.jtlw .summary-row{display:flex;justify-content:space-between;padding:8px 0}
.jtlw .rz-freehint,.jtlw .free-shipping-hint{background:var(--okSoft);color:var(--ok);border-radius:14px}

/* ---- alerts / badges / footer titles ---- */
.jtlw .alert{border:1px solid var(--line);border-radius:18px;background:var(--sand);color:var(--ink)}
.jtlw .alert-success{border-color:var(--ok)}
.jtlw .alert-danger{border-color:var(--red)}
.jtlw .badge{border-radius:999px;font-weight:600}
.jtlw .rz-footer-col-title,.jtlw .footer h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--onPanelMuted)}

/* ============================ 4. MOTION (fail-open) ===================== */
.js-rv [data-rv]{opacity:0;transform:translateY(22px);transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1)}
.js-rv [data-rv].rv-in{opacity:1;transform:none}
.js-rv [data-rv="zoom"]{opacity:0;transform:scale(.97)}
.js-rv [data-rv="zoom"].rv-in{opacity:1;transform:none}
@keyframes pxDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes pxUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pxPulse{0%,100%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.jtlw *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ============================ 5. BUTTONS / PILLS ======================== */
.px-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;font-family:'Outfit',sans-serif;font-weight:700;font-size:14px;line-height:1;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}
.px-btn--red{padding:14px 26px;background:var(--red);color:var(--onRed)}
.px-btn--red:hover{transform:translateY(-2px);box-shadow:var(--shadow);color:var(--onRed)}
.px-btn--ink{padding:14px 26px;background:var(--ink);color:var(--paper)}
.px-btn--ink:hover{transform:translateY(-2px);color:var(--paper)}
.px-btn--ghost{padding:13px 24px;background:var(--surface);color:var(--ink);border-color:var(--line2)}
.px-btn--ghost:hover{border-color:var(--ink);color:var(--ink)}
.px-btn--outred{padding:13px 22px;background:none;color:var(--red);border-color:var(--red)}
.px-btn--outred:hover{background:var(--red);color:var(--onRed)}
.px-btn[disabled],.px-btn.is-disabled{opacity:.45;pointer-events:none}
.px-btn--block{width:100%}
/* retint the base rz-btn / .btn family into Prisma */
.rz-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 22px;background:var(--red);color:var(--onRed);font-weight:700;font-size:14px;border:1px solid transparent;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.rz-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);color:var(--onRed)}

/* ============================ 6. TICKER (rz-topbar) ===================== */
/* always-dark USP strip, centered + wrapping. --panel/--onPanel deliberately do NOT
   invert in dark: this chrome must stay dark in both themes. */
.rz-topbar{background:var(--panel);color:var(--onPanel);border:none;font-family:var(--mono);overflow:hidden}
.rz-topbar .rz-wrap{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap}
.rz-ticker{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap}
.rz-ticker__item{display:flex;align-items:center;gap:14px;padding:6px 16px;min-height:34px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--onPanel)}
.rz-ticker__sep{color:var(--onPanelMuted)}
.rz-ticker__item:last-child .rz-ticker__sep{display:none}
.rz-note{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.04em;color:var(--onPanel)}
.rz-note__mark{color:var(--red)}
.rz-locale{font-size:10.5px;letter-spacing:.1em;color:var(--onPanelMuted)}
[data-theme="dark"] .jtlw .rz-note__mark{color:#FF9448}

/* ============================ 7. HEADER (divided masthead) ============== */
/* At rest the masthead is OPAQUE --paper and only becomes the translucent
   --headerBg once it detaches on scroll — the blur is the scrolled state's
   signature, not a permanent one. Painting --headerBg from the start let the
   page tint bleed through the header at scroll position 0. */
.rz-headwrap{position:sticky;top:0;z-index:70;background:var(--paper);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line);transition:background .4s ease,border-color .4s ease,box-shadow .4s ease}
.rz-headwrap.rz-stuck{background:var(--headerBg);box-shadow:var(--shadow)}
.rz-header{background:none;border:none}
.rz-header .rz-wrap{display:flex;align-items:stretch;gap:0;min-height:84px;transition:min-height .4s cubic-bezier(.16,1,.3,1)}
.rz-headwrap.rz-stuck .rz-header .rz-wrap{min-height:64px}
/* burger (mobile) */
.rz-burger{display:none;align-items:center;padding-right:16px;color:var(--ink);background:none;border:none;cursor:pointer}
.rz-burger svg{width:24px;height:24px}
/* logo */
/* logo lockup — accent mark tile + stacked wordmark + mono tagline. The mark shrinks
   and the tagline drops on scroll condense (84px → 64px header). */
.rz-logo{display:flex;align-items:center;flex-shrink:0;padding-right:24px;gap:11px;color:var(--ink)}
.rz-logo:hover{color:var(--ink)}
.rz-logo img{height:44px;width:auto;object-fit:contain;transition:height .35s cubic-bezier(.16,1,.3,1)}
.rz-headwrap.rz-stuck .rz-logo img{height:34px}
.rz-mark{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:14px;background:var(--red);color:var(--onRed);font-weight:800;font-size:14px;letter-spacing:-.04em;flex-shrink:0;text-transform:uppercase;
  transition:width .35s cubic-bezier(.16,1,.3,1),height .35s cubic-bezier(.16,1,.3,1)}
/* only the tile scales — its radius and type stay put. Animating width/height
   is smooth; the radius and font-size were stepping untransitioned mid-condense. */
.rz-headwrap.rz-stuck .rz-mark{width:32px;height:32px}
.rz-lockup{display:flex;flex-direction:column;line-height:1;min-width:0}
.rz-wordmark{font-size:23px;font-weight:800;letter-spacing:-.055em;transition:font-size .35s cubic-bezier(.16,1,.3,1)}
.rz-headwrap.rz-stuck .rz-wordmark{font-size:19px}
.rz-tagline{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.rz-headwrap.rz-stuck .rz-tagline{display:none}
.rz-header--checkout{background:var(--headerBg);border-bottom:1px solid var(--line)}
.rz-header--checkout .rz-wrap{min-height:72px;justify-content:space-between}
.rz-secure{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ok)}
/* search — bordered cell */
/* the design's search is a FLUSH header cell divided by hairlines — not a pill.
   prisma.css skins .jtlw .rz-search as a rounded --jw-surface field at (0,2,0),
   so this has to be .jtlw-scoped to win, and the pill props reset explicitly. */
/* position:relative anchors the live-suggest panel. razan.js used to set it as
   an inline style at runtime, so with JS disabled the panel escaped to the page. */
.jtlw .rz-search{flex:1;min-width:0;display:flex;align-items:center;gap:13px;position:relative;
  border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);
  border-radius:0;background:none;padding:0 22px;margin:0}
.rz-search-ico{width:18px;height:18px;color:var(--muted);flex-shrink:0}
/* .jtlw-scoped: prisma.css skins every .jtlw input[type=text] at (0,2,1) with the
   generic field padding and a focus halo, which pushed the caret 13px off the
   icon gap and put a cream ring round a field the design draws with no chrome. */
.jtlw .rz-search input{flex:1;min-width:0;border:none;background:none;padding:12px 0;outline:none;font-size:15px;color:var(--ink);font-family:'Outfit',sans-serif;border-radius:0}
.jtlw .rz-search input:focus{box-shadow:none;border-color:transparent}
/* likewise the button: prisma.css pins it to a 14px-radius 600-weight #fff chip.
   The colour needs !important on top of the scope — #fff on the dark-mode accent
   is 2.2:1, while --onRed is ~9:1. */
.jtlw .rz-search-btn{flex-shrink:0;padding:9px 18px;border-radius:999px;background:var(--red);font-size:13.5px;font-weight:700;border:none;cursor:pointer;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.jtlw .rz-search-btn,.jtlw .rz-search-btn:hover{color:var(--onRed)!important}
.jtlw .rz-search-btn:hover{transform:translateY(-1px)}
/* ↵ keycap hint in the search field (handoff signature) — it stays on scroll */
.rz-search__hint{flex-shrink:0;padding:4px 9px;border-radius:6px;border:1px solid var(--line2);font-family:var(--mono);font-size:10px;color:var(--muted);line-height:1}
/* action cells */
.rz-icons{display:flex;align-items:stretch;margin-left:auto}
.rz-dd{position:relative;display:flex}
/* no min-width: the design lets each cell size to its content, so when the
   labels drop on scroll the cells close up instead of holding 62px of air */
.rz-ic{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0 15px;border-right:1px solid var(--line);color:var(--ink);position:relative;background:none;border-top:none;border-bottom:none;border-left:none;cursor:pointer;transition:background .25s ease}
.rz-ic:hover{background:var(--sand);color:var(--ink)}
.rz-ic svg{width:19px;height:19px}
.rz-ic__label{font-size:10.5px;font-weight:600;color:var(--ink2)}
.rz-headwrap.rz-stuck .rz-ic__label{display:none}
/* the theme toggle is icon-only in the design — no stacked label, narrower cell */
.rz-ic--theme{flex-direction:row;padding:0 14px}
.rz-ic--theme svg{width:18px;height:18px}
/* the badge sits ON the icon, not above it — top:8px floated it into the dead
   space over the glyph, where it read as a detached dot */
.rz-badge{position:absolute;top:16px;right:8px;min-width:15px;height:15px;padding:0 4px;border-radius:999px;background:var(--red);color:var(--onRed);font-family:var(--mono);font-size:9px;display:flex;align-items:center;justify-content:center;line-height:1}
.rz-badge--ink{background:var(--ink);color:var(--paper)}
.rz-badge.d-none{display:none}
.rz-headwrap.rz-stuck .rz-badge{top:12px}
/* dropdown menus (account/wishlist/compare) */
/* .jtlw-scoped: prisma.css skins .jtlw .rz-dd-menu and its links at (0,2,0)/(0,2,1)
   and was widening the panel padding to 10px and the rows to a 14px radius. */
.jtlw .rz-dd-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadowLg);padding:9px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:80}
.jtlw .rz-dd.is-open .rz-dd-menu{opacity:1;visibility:visible;transform:none;animation:pxDrop .22s cubic-bezier(.16,1,.3,1)}
.rz-dd-menu--wide{min-width:320px}
.rz-dd-head{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:8px 12px 6px}
.jtlw .rz-dd-menu > a{display:block;padding:9px 12px;border-radius:12px;font-size:14px;color:var(--ink2);transition:background .18s ease,color .18s ease}
.jtlw .rz-dd-menu > a:hover{background:var(--sand);color:var(--ink)}
.rz-dd-sep{height:1px;background:var(--line);margin:6px 6px}
.rz-dd-strong{font-weight:700;color:var(--ink)}
/* cart block — ink → red */
.cart-icon-dropdown,.rz-cart{display:flex}
/* .jtlw-scoped: prisma.css skins .jtlw .rz-cart-btn at (0,2,0) as a 44px-tall
   14px-radius inline pill. Unscoped, this rule lost every one of those four
   properties — the cart rendered as a rounded chip top-aligned inside an 84px
   strip instead of the flush full-height slab the design closes the row with. */
.jtlw .rz-cart-btn{display:flex;align-items:center;gap:11px;padding:0 20px;background:var(--ink);color:var(--paper);border:none;border-radius:0;cursor:pointer;transition:background .3s ease;height:100%}
.jtlw .rz-cart-btn:hover{background:var(--red);color:var(--onRed)}
.rz-cart-btn *{color:inherit}
.rz-cart-btn svg{width:19px;height:19px}
.rz-cart-ic{position:relative;display:flex}
.rz-cart-count{position:absolute;top:-7px;right:-9px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--red);color:var(--onRed);font-family:var(--mono);font-size:9px;display:flex;align-items:center;justify-content:center;border:2px solid var(--ink)}
.rz-cart-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.rz-cart-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.62}
.rz-headwrap.rz-stuck .rz-cart-lbl{display:none}
.rz-cart-tot{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}

/* live-search suggest dropdown (razan.js renders .rz-suggest under the search) */
.rz-suggest{position:absolute;left:0;right:0;top:calc(100% + 10px);background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadowLg);padding:9px;z-index:80;animation:pxDrop .2s cubic-bezier(.16,1,.3,1)}
.rz-suggest__item{display:flex;align-items:center;gap:13px;padding:9px 12px;border-radius:14px;color:var(--ink2)}
.rz-suggest__item:hover,.rz-suggest__item.is-active{background:var(--sand);color:var(--ink);text-decoration:none}
.rz-suggest__thumb{flex:0 0 48px;width:48px;height:48px;border-radius:10px;overflow:hidden;background:var(--sand)}
.rz-suggest__thumb img{width:100%;height:100%;object-fit:cover}
.rz-suggest__name{font-size:14px;font-weight:600}
.rz-suggest__price{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.rz-suggest__all{display:block;width:100%;margin-top:6px;padding:12px;border-radius:14px;background:var(--redSoft);color:var(--red);font-size:13px;font-weight:700;text-align:center}
/* JTL renders a Bootstrap .dropdown-menu inside the wishlist/compare rz-dd-menu — flatten it */
.rz-dd-menu .dropdown-menu{position:static;float:none;border:none;box-shadow:none;padding:0;margin:0;background:none;display:block;width:100%}

/* ============================ 8. NAV (capsule pills) ==================== */
/* EVERY rule in this section carries the .jtlw prefix on purpose — do not strip
   it. prisma.css (the portable jtl-widgets skin) ships its own nav + mega block
   written as `.jtlw .rz-mega…` (0,2,0), so an unprefixed rule here (0,1,0) LOSES
   to it even though this sheet loads last. That is not theoretical: it is what
   flattened the capsule pills back to bare 28px-apart text, painted the nav
   strip white against the cream header, and turned the mega into a 1120px card
   centred on the VIEWPORT — inset ~78px from the 1320px rail everything else on
   the page sits on, and painted twice, because jtl-widgets draws the card on
   .rz-mega while this sheet draws it on .rz-mega-inner.
   The !important declarations below answer, one for one, the ones jtl-widgets
   sets on the same properties (display/left/right/transform, and opacity/
   visibility/pointer-events in its :hover rule). Nothing more. */
.jtlw .rz-mainnav{border-top:1px solid var(--line);border-bottom:0;background:none;position:relative}
.jtlw .rz-mainnav .rz-wrap{display:flex;align-items:center;gap:12px}
/* flex:1 keeps the Produktfinder pill at the far right of the rail (design), and
   the row scrolls sideways rather than wrapping into a second line. */
.jtlw .rz-menu{display:flex;align-items:center;flex:1;min-width:0;gap:4px;margin:0;padding:9px 0 11px;list-style:none;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.jtlw .rz-menu::-webkit-scrollbar{display:none}
.jtlw .rz-menu-item{position:relative;flex-shrink:0}
/* A panel spans the page rail, so it anchors to the nav, not to its own pill.
   It must also stay unanchored for a second reason: .rz-menu is a horizontal
   scroll container, and an absolutely positioned box whose containing block is
   inside that scroller would be clipped to the height of the pill row. Slim
   panels are placed under their pill by margin instead (see rz-nav.js). */
.jtlw .rz-menu-item.has-mega{position:static}
.jtlw .rz-menu-item > a{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink2);white-space:nowrap;transition:background .28s ease,color .28s ease,box-shadow .28s ease}
.jtlw .rz-menu-item > a::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--red);flex-shrink:0;opacity:.9}
.jtlw .rz-menu-item:nth-child(3n+2) > a::before{background:var(--amber)}
.jtlw .rz-menu-item:nth-child(3n+3) > a::before{background:var(--ok)}
.jtlw .rz-menu-item > a:hover{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.jtlw .rz-menu-item.has-mega.is-open > a{background:var(--sand);color:var(--ink)}
.jtlw .rz-menu-item > a .caret{display:none}

/* mega — a detached rounded card on the page rail, dropped from the nav's
   bottom edge. The 8px offset is padding, not `top`, so the pointer never
   crosses a gap that is outside the panel on its way down to the card. */
.jtlw .rz-mega{position:absolute;left:0!important;right:0!important;top:100%;width:auto!important;padding:8px 22px 0;
  background:none;border:0;border-radius:0;box-shadow:none;
  opacity:0;visibility:hidden;transform:translateY(8px)!important;
  transition:opacity .24s cubic-bezier(.16,1,.3,1),transform .24s cubic-bezier(.16,1,.3,1),visibility .24s;z-index:60}
.jtlw .rz-menu-item.has-mega.is-open > .rz-mega{opacity:1;visibility:visible;transform:none!important}
/* Open state belongs to rz-nav.js (.is-open): hover intent, focus, Escape.
   jtl-widgets opens the panel from :hover alone, instantly, and leaves it
   pointer-events:none for every OTHER way of opening it — so a panel opened by
   keyboard or by script was visible but not clickable. These two rules take the
   state back, but only once rz-nav.js has marked the document: with the script
   missing the jtl-widgets hover rule still opens the menu (fail-open). */
html.rz-nav-js .jtlw .rz-menu-item.has-mega:not(.is-open) > .rz-mega{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
html.rz-nav-js .jtlw .rz-menu-item.has-mega.is-open > .rz-mega{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
html:not(.rz-nav-js) .jtlw .rz-menu-item.has-mega:hover > .rz-mega{transform:none!important}
/* The list area takes the rail; each card that is actually present adds one
   260px track after it. Auto tracks (not a fixed 4-up grid as in the prototype,
   which always had exactly two link columns) because a real category tree has
   1..n children and the promo cards are optional — an absent card must not
   leave a hole, and a 7th column must not push the promo onto a second row. */
.jtlw .rz-mega-inner{max-width:var(--maxw);margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadowLg);padding:24px;
  display:grid;grid-auto-flow:column;grid-template-columns:minmax(0,1fr);grid-auto-columns:minmax(0,260px);gap:24px;align-items:start}
.jtlw .rz-mega-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:20px 24px;align-content:start;min-width:0}
.jtlw .rz-mega-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.jtlw .rz-mega-col__head{display:block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;padding:0 0 8px;border-bottom:1px solid var(--line)}
.jtlw .rz-mega-col__head:hover{color:var(--red)}
.jtlw .rz-mega-sub{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1px}
.jtlw .rz-mega-sub a{display:block;padding:6px 10px;margin:0 -10px;border-radius:10px;font-size:13.5px;color:var(--ink2);transition:background .18s ease,padding-left .28s cubic-bezier(.16,1,.3,1),color .18s ease}
.jtlw .rz-mega-sub a:hover{background:var(--sand);padding-left:16px;color:var(--ink)}

/* Slim menu — a category whose children are a handful of bare links with no
   third level gets a compact dropdown sized to its content and slid under its
   own pill, instead of the full-rail card. The rail card is right for a tree
   with columns to fill; around Tee's single link it was a 1272px-wide sheet
   that was ~90% empty. header.tpl tags these and leaves the two promo cards out
   of them (they still run on every full-size menu). */
.jtlw .rz-mega--slim .rz-mega-inner{width:max-content;min-width:210px;max-width:min(420px,100%);margin:0;padding:12px;border-radius:18px;grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:10px}
.jtlw .rz-mega--slim .rz-mega-cols{grid-template-columns:minmax(0,1fr);gap:2px}
/* A column with no third level is one leaf link, so it reads as a row, not as a
   section label with a rule and nothing under it — which is how every child of
   a flat category used to render, slim panel or not. Same row treatment as
   .rz-mega-sub a, including the -10px bleed that keeps the label itself lined
   up with the section headings beside it. */
.jtlw .rz-mega-col--flat .rz-mega-col__head,.jtlw .rz-mega--slim .rz-mega-col__head{font-family:var(--body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink2);margin:0 -10px;padding:7px 10px;border-bottom:0;border-radius:10px;transition:background .18s ease,padding-left .28s cubic-bezier(.16,1,.3,1),color .18s ease}
.jtlw .rz-mega-col--flat .rz-mega-col__head:hover,.jtlw .rz-mega--slim .rz-mega-col__head:hover{background:var(--sand);padding-left:16px;color:var(--ink)}

.jtlw .rz-mega-feat{display:flex;flex-direction:column}
.jtlw .rz-mega-feat__ey{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--red);margin-bottom:9px}
.jtlw .rz-mega-feat__img{display:block;aspect-ratio:16/11;border-radius:16px;background:var(--sand);background-size:cover;background-position:center;margin-bottom:11px}
.jtlw .rz-mega-feat b{font-size:15px;font-weight:700}
.jtlw .rz-mega-feat span{display:block;font-size:13px;font-weight:600;color:var(--red);margin-top:3px}

/* ============================ 9. MOBILE DRAWER ========================== */
/* same trap as .rz-mc-overlay: the drawer panel parks at translateX(-100%).
   Left-side overflow is not scrollable, so it was not producing a scrollbar —
   clip it anyway so a future right-side drawer cannot reintroduce one. */
.rz-drawer{position:fixed;inset:0;z-index:200;visibility:hidden;pointer-events:none;overflow:hidden}
.rz-drawer.is-open{visibility:visible;pointer-events:auto}
.rz-drawer-scrim{position:absolute;inset:0;background:rgba(20,13,8,.5);opacity:0;transition:opacity .3s ease}
.rz-drawer.is-open .rz-drawer-scrim{opacity:1}
.rz-drawer-panel{position:absolute;top:0;left:0;bottom:0;width:min(88vw,380px);background:var(--surface);box-shadow:var(--shadowLg);transform:translateX(-100%);transition:transform .34s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;overflow:hidden}
.rz-drawer.is-open .rz-drawer-panel{transform:none}
.rz-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);flex-shrink:0}
.rz-drawer-head .rz-logo img{height:32px}
.rz-drawer-back{display:none;background:none;border:none;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.rz-drawer.is-drilled .rz-drawer-back{display:block}
.rz-drawer-close{background:none;border:none;font-size:26px;line-height:1;color:var(--ink);cursor:pointer}
.rz-drawer-viewport{position:relative;flex:1;overflow-y:auto;overflow-x:hidden}
.rz-drawer-search{display:flex;align-items:center;gap:10px;margin:16px 18px;padding:11px 15px;border:1px solid var(--line2);border-radius:14px}
.rz-drawer-search svg{width:18px;height:18px;color:var(--muted);flex-shrink:0}
/* .jtlw-scoped, exactly as .rz-search input above it is, and for the same
   reason: prisma.css skins `.jtlw input[type=text]` at (0,2,1) with the generic
   field chrome — white ground, 15px padding, 14px radius. Unscoped, this rule
   is (0,2,0) and lost all three, so the drawer drew its bordered pill and then
   prisma.css drew a second white rounded field inside it. A box in a box, and
   a 71px-tall row where the design has 44. */
.jtlw .rz-drawer-search input{flex:1;min-width:0;border:none;background:none;outline:none;
  padding:0;border-radius:0;font-size:16px;color:var(--ink)}
.jtlw .rz-drawer-search input:focus{box-shadow:none;border-color:transparent}
.rz-drawer-menu{list-style:none;margin:0;padding:0 12px 24px}
.rz-drawer-menu > li > a,.rz-drawer-menu > li > button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 14px;border:none;background:none;font-family:'Outfit',sans-serif;font-size:15px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer;border-radius:12px}
.rz-drawer-menu > li > a:hover,.rz-drawer-menu > li > button:hover{background:var(--sand)}
.rz-drawer-menu .chev{color:var(--muted);font-size:20px}
.rz-drawer-panel-sub{position:absolute;inset:0;background:var(--surface);transform:translateX(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);overflow-y:auto;visibility:hidden}
.rz-drawer-panel-sub.is-active{transform:none;visibility:visible}
.rz-drawer-subhead{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:18px 22px 8px}
.rz-drawer-sub ul{list-style:none;margin:0 0 0 14px;padding:0;border-left:1px solid var(--line)}
.rz-drawer-sub ul li a{padding-left:18px;font-weight:500;font-size:14px;color:var(--ink2)}

/* ============================ 10. MINI-CART (rz-mc) ===================== */
/* overflow:hidden is load-bearing. The panel below parks itself off-screen with
   translateX(100%), and this overlay is its containing block — without clipping,
   that parked copy sits 420px past the right edge and the DOCUMENT grows to
   1860px. Measured on the live shop: every page had a horizontal scrollbar, on
   every screen size, because the mini-cart is in the header everywhere.
   visibility:hidden does not help — a hidden box still occupies scroll area. */
.rz-mc-overlay{position:fixed;inset:0;z-index:210;visibility:hidden;pointer-events:none;overflow:hidden}
.rz-mc-overlay.is-open{visibility:visible;pointer-events:auto}
.rz-mc-scrim{position:absolute;inset:0;background:rgba(20,13,8,.5);opacity:0;transition:opacity .3s ease}
.rz-mc-overlay.is-open .rz-mc-scrim{opacity:1}
.rz-mc{position:absolute;top:0;right:0;bottom:0;width:min(92vw,420px);background:var(--surface);box-shadow:var(--sh-cart);transform:translateX(100%);transition:transform .34s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column}
.rz-mc-overlay.is-open .rz-mc{transform:none}
.rz-mc__head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
.rz-mc__head b{font-size:17px;font-weight:700}
.rz-mc__close{background:none;border:none;font-size:26px;color:var(--ink);cursor:pointer;line-height:1}
.rz-mc__body{flex:1;overflow-y:auto;padding:8px 22px}
.rz-mc__empty{padding:60px 20px;text-align:center;color:var(--muted)}
.rz-mc__foot{border-top:1px solid var(--line);padding:20px 22px;background:var(--surface)}
.rz-mc__tot{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.rz-mc__tot b{font-size:20px;font-weight:800}
.rz-mci{display:flex;gap:13px;padding:15px 0;border-bottom:1px solid var(--line)}
.rz-mci__media{width:64px;height:78px;border-radius:12px;overflow:hidden;background:var(--sand);flex-shrink:0}
.rz-mci__media img{width:100%;height:100%;object-fit:cover}
.rz-mci__name{font-size:14px;font-weight:600;line-height:1.3}
.rz-mci__meta{font-size:12px;color:var(--muted);margin-top:3px}
.rz-mci__line{font-weight:700;font-variant-numeric:tabular-nums}

/* ============================ 11. FOOTER =============================== */
/* The design's footer is a LIGHT surface panel divided by --line hairlines — brand
   block + four link columns, then a single mono bottom row. 92px bottom padding is
   from the design (it cleared the prototype's screen dock); it also keeps the row
   clear of the scroll-to-top button. */
/* .jtlw-scoped: prisma.css (jtl-widgets) paints .jtlw .rz-footer with the dark
   --jw-shell at (0,2,0) and would otherwise win over a bare .rz-footer rule. */
.jtlw .rz-footer{background:var(--surface);color:var(--ink);border-top:1px solid var(--line);margin-top:auto}
.jtlw .rz-footer a{color:var(--ink2);transition:color .2s ease}
.jtlw .rz-footer a:hover{color:var(--red)}
.rz-footer-top{padding:clamp(30px,4vw,52px) 0 0}
.rz-footer-top .rz-wrap{display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:clamp(20px,3vw,34px);padding-bottom:clamp(24px,3vw,38px);border-bottom:1px solid var(--line)}
.rz-footer-brand{max-width:none}
.rz-footer-wordmark{display:flex;align-items:center;gap:9px;margin-bottom:14px;font-size:20px;font-weight:800;letter-spacing:-.05em;color:var(--ink)}
.rz-footer-wordmark:hover{color:var(--ink)}
.rz-footer-wordmark--img img{height:40px;width:auto}
.rz-footer-brand p{font-size:13.5px;color:var(--muted);max-width:34ch;margin:0}
.rz-mark--sm{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:11px;background:var(--red);color:var(--onRed);font-weight:800;font-size:12px;flex-shrink:0;text-transform:uppercase}
.rz-footer-col-title{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.rz-footer-col ul{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.rz-footer-col a{display:block;font-size:13.5px}
.rz-footer-cols{display:contents}
.rz-copyright-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:20px 0 92px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.rz-copyright-legal{display:flex;gap:18px;flex-wrap:wrap}
.rz-copyright-inner .footnote-vat{color:var(--muted)}

/* ============================ 12. THEME TOGGLE ========================== */
/* The toggle shows the state you would switch TO, which is the design's polarity
   and the usual convention: a moon on the light page, a sun on the dark one.
   It was showing the state you are already in. */
.rz-ic--theme .rz-ic__sun{display:none}
.rz-ic--theme .rz-ic__moon{display:block}
[data-theme="dark"] .jtlw .rz-ic--theme .rz-ic__moon{display:none}
[data-theme="dark"] .jtlw .rz-ic--theme .rz-ic__sun{display:block}

/* ============================ 13. SCROLL-TO-TOP ======================== */
.smoothscroll-top,.scroll-to-top{position:fixed;right:22px;bottom:22px;z-index:90;width:48px;height:48px;border-radius:999px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadowLg);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease,visibility .3s,background .3s ease;border:none;cursor:pointer}
.smoothscroll-top.is-visible,.scroll-to-top.is-visible{opacity:1;visibility:visible;transform:none}
.smoothscroll-top:hover,.scroll-to-top:hover{background:var(--red);color:var(--onRed)}

/* ============================ 13b. PAGE-COMPONENT RETINT CORRECTIONS ==== */
/* rz.css paints some panels with --ink (which INVERTS light↔dark) + hardcoded #fff
   text; combined with my base h1-4{color:--ink} the headings vanish. Pin the always-
   dark accent panels to --panel/--onPanel so text stays legible in both themes. */
.rz-promo__copy{background:var(--panel);color:var(--onPanel)}
.rz-promo__copy h2{color:var(--onPanel)}
.rz-promo__copy p{color:var(--onPanelMuted)}
.rz-promo__copy .rz-eyebrow{color:var(--red)}
/* ---- jtl-widgets (prisma.css) hardcoded #fff!important overrides ----
   prisma.css pins filled accent buttons + the header cart to color:#fff!important on
   backgrounds driven by --jw-accent / --jw-ink. In dark the accent lightens (white
   fails ~2.2:1) and --jw-ink inverts to light (white vanishes). Re-map to theme-aware
   tokens with equal/higher specificity + !important (this file loads AFTER prisma.css). */
.jtlw .rz-btn:not(.rz-btn--ghost):not(.rz-btn--light),
.jtlw .rz-btn:not(.rz-btn--ghost):not(.rz-btn--light):hover,
.jtlw .px-btn--red,.jtlw .px-btn--red:hover,
.jtlw .btn-primary,.jtlw .btn-primary:hover,
.jtlw .page-item.active .page-link{color:var(--onRed)!important}
/* header cart button — pin to the always-dark panel (not --ink, which inverts) so it
   stays a dark block with light text in BOTH themes; hover → red; badge stays red. */
.jtlw .rz-cart-btn,.jtlw .cart-icon-dropdown-icon{background:var(--panel)}
.jtlw .rz-cart-btn,.jtlw .rz-cart-btn *,.jtlw .cart-icon-dropdown-icon *{color:var(--onPanel)!important}
.jtlw .rz-cart-btn:hover{background:var(--red)}
.jtlw .rz-cart-btn:hover *{color:var(--onRed)!important}
.jtlw .rz-cart-btn .rz-cart-count{background:var(--red)!important;color:var(--onRed)!important;border-color:var(--panel)}
/* hero accent word + newsletter/quote panels inherit tokens; ensure hero em = accent */
.rz-hero__inner h1 em{color:var(--red);font-style:italic}

/* ============================ 13c. COOKIE CONSENT (retint) ============== */
/* razan.css ALREADY lays out the consent bar (fixed bottom-centered card, shown via
   .active by consent.js) + settings modal — it just uses base greys/Proxima/blue.
   RETINT to Prisma; do NOT reposition. (The live top-left breakage was custom.css
   overriding the position — Prisma doesn't load custom.css, so razan's layout stands.) */
#consent-manager{font-family:'Outfit',system-ui,sans-serif!important;color:var(--ink)}
#consent-manager a{color:var(--red)!important}
#consent-banner,.consent-modal-content{background:var(--surface)!important;border-color:var(--line)!important;color:var(--ink);box-shadow:var(--shadowLg)!important}
#consent-banner::after{display:none!important} /* base drop-shadow ellipse — off */
.consent-banner-icon,.consent-modal-icon{color:var(--red)!important}
.consent-display-1,.consent-display-2,.consent-display-3{color:var(--ink)!important;font-family:'Outfit',sans-serif!important;font-weight:700!important;letter-spacing:-.02em}
.consent-banner-description p,.consent-modal-content p{color:var(--ink2)!important;line-height:1.6}
.consent-help,.consent-info{color:var(--muted)!important}
.consent-banner-description a,.consent-modal-content a,.consent-show-more{color:var(--red)!important}
.consent-btn{border-radius:999px!important;font-family:'Outfit',sans-serif!important;font-weight:700!important}
#consent-banner-btn-all,.consent-btn-primary,#consent-btn-always,#consent-btn-once,#consent-confirm-key{background:var(--red)!important;border-color:var(--red)!important;color:var(--onRed)!important}
#consent-banner-btn-settings,#consent-banner-btn-close,.consent-btn-outline-primary,.consent-btn-tertiary{background:var(--surface)!important;border-color:var(--line2)!important;color:var(--ink)!important}
#consent-banner-btn-settings:hover,#consent-banner-btn-close:hover,.consent-btn-outline-primary:hover,.consent-btn-tertiary:hover{border-color:var(--ink)!important;color:var(--ink)!important}
.consent-modal-close{color:var(--ink)!important}
.consent-switch{border-color:var(--line)!important}
.consent-label{color:var(--ink)!important}
.consent-label-secondary{color:var(--muted)!important}
.consent-input{accent-color:var(--red)}
.consent-icon{background:var(--panel)!important;color:var(--onPanel)!important;border-color:var(--line2)!important}
.consent-icon svg,.consent-icon *{color:var(--onPanel)!important}

/* ============================ 14. NOVA / BASE NEUTRALIZATION ============ */
/* JTL antispam honeypot — must never show (bled onto every form in Atelier) */
.jtlw input[name="sp_additional_mail"],
.jtlw label[for="sp_additional_mail"],
.jtlw .d-flex:has(> input[name="sp_additional_mail"]){position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
/* redundant PLAIN category box in the left sidebar (categories already live in the
   mega-menu). Hide ONLY the plain box — NOT the category FILTER (.box-filter-category),
   which rz.css styles as a legit facet. rz.css owns all other sidebar-box styling. */
.jtlw #sidepanel_left .box-categories{display:none!important}
/* mobile filter bottom-sheet must not leak onto desktop */
@media(min-width:992px){.jtlw .modal.rz-mf,.jtlw #collapseFilter.modal{display:none!important}}
/* retint stray Bootstrap components */
.jtlw .btn-primary{background:var(--red);border-color:var(--red);color:var(--onRed)}
.jtlw .btn-primary:hover{background:#9A3F07;border-color:#9A3F07;color:var(--onRed)}
.jtlw .text-primary{color:var(--red)!important}
.jtlw .badge-primary{background:var(--red);color:var(--onRed)}
.jtlw a{--bs-link-color:var(--red)}

/* footer column titles — consistent muted mono in both themes (beat rz.css) */
.rz-footer .rz-footer-col-title{color:var(--muted)}

/* ============================ 14b. SIGNATURE — cell-divided + mono indices */
/* the handoff signature: single bordered container split by 1px hairlines, mono
   01–0N index instead of an icon. Used by the home USP strip (+ PDP trust/tier). */
.rz-uspstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));border:1px solid var(--line);border-radius:20px;background:var(--surface);overflow:hidden}
.rz-uspcell{position:relative;padding:20px 22px;border-right:1px solid var(--line);transition:background .28s ease}
.rz-uspcell:last-child{border-right:none}
.rz-uspcell:hover{background:var(--sand)}
.rz-uspcell__no{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--red);margin-bottom:12px}
.rz-uspcell__t{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.015em;line-height:1.25;margin-bottom:5px;color:var(--ink)}
.rz-uspcell__d{display:block;font-size:12.5px;color:var(--muted)}

/* ============================ 15. RESPONSIVE =========================== */
@media(max-width:1100px){.jtlw .rz-mega-inner{grid-auto-columns:minmax(0,215px);gap:20px}
  .jtlw .rz-mega-cols{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
@media(max-width:960px){
  .rz-burger{display:flex}
  /* mobile header: burger + logo + theme + account + cart, with the search on a
     second row (section 19). The mega nav and the stacked icon labels go; the
     wishlist and compare cells go to the drawer, which has room for their names.
     !important + .jtlw prefix beats rz.css's higher-specificity shell rules. */
  .jtlw .rz-mainnav,.jtlw .rz-ic__label{display:none!important}
  .jtlw #shop-nav-wish,.jtlw #shop-nav-compare{display:none!important}
  .rz-icons{margin-left:auto}
  .rz-ic{padding:0 11px;min-width:0;border:none!important}
  .rz-cart-btn{padding:0 14px}
  .rz-footer-top .rz-wrap{grid-template-columns:1fr 1fr;gap:28px}
  .rz-footer-brand{grid-column:1/-1;max-width:none}
  .rz-uspstrip{grid-template-columns:1fr 1fr}
  .rz-uspcell:nth-child(2n){border-right:none}
  .rz-uspcell:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:560px){
  .rz-footer-top .rz-wrap{grid-template-columns:1fr}
  .rz-topbar-links{display:none}
  .rz-topbar .rz-wrap{justify-content:center}
  .rz-cart-txt{display:none}
  .rz-cart-btn{padding:0 13px}
}

/* NB: #consent-banner is an ID and #consent-manager is its root — the first
   version of this block targeted `.consent-banner` as a class and therefore
   matched nothing at all.
 * ============ 16. CONSENT BANNER + ALERT CHROME =========================
 * The consent manager and the alert boxes were the last two pieces still
 * wearing no design at all. Their skin lived in razan.css, which is fetched as
 * rel="preload" and only becomes a stylesheet inside its own onload handler —
 * so the banner painted as raw markup: heading and copy flush against the left
 * edge of the viewport, and the three actions stacked on top of each other.
 * Skinned here, in the design's tokens, so it does not depend on that swap.
 * ====================================================================== */
#consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:220;
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -10px 32px rgba(28,22,12,.14);padding:0}
#consent-banner > *{max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
.consent-banner-icon{width:44px;height:44px;padding:10px;flex-shrink:0;
  border-radius:14px;background:var(--redSoft);color:var(--red)}
.consent-banner-body{display:flex;align-items:flex-start;gap:16px;
  padding-top:20px;padding-bottom:4px}
#consent-banner h2,#consent-banner h3,#consent-banner .h4{
  font-family:'Outfit',sans-serif;font-size:16px;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 6px}
.consent-banner-description,#consent-banner p{
  font-size:13.5px;line-height:1.6;color:var(--ink2);margin:0;max-width:96ch}
.consent-banner-description a,#consent-banner a{color:var(--red);text-decoration:underline;
  text-underline-offset:2px}
/* the three actions are a ROW of design pills, not a stack of bare buttons */
.consent-banner-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding-top:14px;padding-bottom:20px}
.consent-banner-actions .consent-btn,
.consent-banner-btn-all,.consent-banner-btn-settings,.consent-banner-btn-close{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px!important;border-radius:999px!important;
  font-family:'Outfit',sans-serif;font-size:13.5px!important;font-weight:700!important;
  line-height:1;white-space:nowrap;cursor:pointer;border:1px solid transparent!important;
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.consent-banner-btn-all,#consent-banner .consent-btn-primary{
  background:var(--red)!important;color:var(--onRed)!important;border-color:var(--red)!important}
.consent-banner-btn-all:hover{background:var(--primary-600,#9A3F07)!important}
.consent-banner-btn-settings,.consent-banner-btn-close,
#consent-banner .consent-btn-outline-primary,#consent-banner .consent-btn-tertiary{
  background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line2)!important}
.consent-banner-btn-settings:hover,.consent-banner-btn-close:hover{
  border-color:var(--ink)!important}
@media (max-width:640px){
  .consent-banner-body{flex-direction:column;gap:12px}
  .consent-banner-actions > *{flex:1 1 auto}
}

/* ---- alert boxes: the dismiss control ----
   snippets/alert.tpl emits a bare <div class="close">&times;</div>. With no
   rule it is a block-level element, so the × dropped onto its own line above
   the message — two stacked alerts produced the two loose "x" glyphs. */
.jtlw .alert{position:relative;padding:14px 44px 14px 16px}
.jtlw .alert .close{position:absolute;top:10px;right:12px;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;border-radius:999px;
  font-size:18px;line-height:1;color:var(--muted);cursor:pointer;opacity:1;
  transition:background .2s ease,color .2s ease}
.jtlw .alert .close:hover{background:var(--sand);color:var(--ink)}

/* ---- breadcrumb markers, everywhere (not just the PDP) ----
   It is an <ol>: without this its markers print into the trail as
   "Startseite2. Warenkorb". */
.jtlw .breadcrumb,.jtlw .breadcrumb-item{list-style:none!important}
.jtlw .breadcrumb-item::marker{content:""}

/* the root, and the icon's own SVG. The svg carries a viewBox and no width or
   height, so an unsized parent lets it run to the full container width — the
   icon measured 1424x1428 on a 1440 viewport, which is what pushed the banner
   to 11425px tall and buried the page under it. */
#consent-manager{position:fixed;left:0;right:0;bottom:0;z-index:220}
#consent-manager:not(.active){display:none}
.consent-banner-icon{width:44px;height:44px;padding:10px;flex-shrink:0;
  border-radius:14px;background:var(--redSoft);color:var(--red);
  display:flex;align-items:center;justify-content:center}
.consent-banner-icon svg{width:100%;height:100%;display:block}
#consent-banner{color:var(--ink);font-family:'Outfit',system-ui,sans-serif}

/* the actions ship as consent-btn-block — block-level, so they stacked one per
   line. The design's banner closes with a single row of pills. */
.consent-banner-actions,.consent-btn-holder{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.consent-banner-actions .consent-btn-block,.consent-btn-block{display:inline-flex!important;width:auto!important}
.consent-banner-actions .consent-btn,.consent-btn{display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px;border-radius:999px;border:1px solid transparent;
  font-family:'Outfit',system-ui,sans-serif;font-size:13.5px;font-weight:700;line-height:1;
  white-space:nowrap;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease}
.consent-btn-primary{background:var(--red);color:var(--onRed);border-color:var(--red)}
.consent-btn-primary:hover{background:var(--primary-600,#9A3F07);color:var(--onRed)}
.consent-btn-outline-primary,.consent-btn-tertiary,.consent-btn-once,.consent-btn-always{
  background:var(--surface);color:var(--ink);border-color:var(--line2)}
.consent-btn-outline-primary:hover,.consent-btn-tertiary:hover{border-color:var(--ink);color:var(--ink)}

/* ---- gallery arrows: draw the chevron, do not rely on the webfont ----
   The prev/next controls carry <i class="fa fa-chevron-left">. Font Awesome
   ships inside razan.css, which is swapped in asynchronously, so until it lands
   (and on any page where it does not) the buttons paint as empty circles —
   which is exactly what they were doing. Borders + rotate need no font. */
.jtlw .rz-product-slider-arrow i,.jtlw .rz-gallery-nav i{font-size:0!important;line-height:0;
  display:block;position:relative;width:14px;height:14px}
.jtlw .rz-product-slider-arrow i::before{content:"";position:absolute;top:50%;left:50%;
  width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor}
.jtlw .rz-product-slider-prev i::before{transform:translate(-30%,-50%) rotate(45deg)}
.jtlw .rz-product-slider-next i::before{transform:translate(-70%,-50%) rotate(-135deg)}

/* ============ 17. ICON FALLBACKS — never depend on the webfont ===========
 * Font Awesome ships inside razan.css, which is fetched as rel="preload" and
 * only becomes a stylesheet inside its own onload handler. Every control whose
 * entire content is an <i class="fas fa-*"> therefore paints EMPTY until that
 * swap lands — and on any page where it does not land, forever. That single
 * fact produced three separate reports: the cart stepper with no − or +, the
 * gallery prev/next as bare circles, and the "empty circle" beside the cart's
 * remove control (a wishlist heart with no glyph).
 *
 * Rather than patch each one, the handful of glyphs the design actually uses
 * are drawn here from inline SVG masks: they inherit currentColor, scale with
 * font-size, need no font, and win whether or not FA eventually arrives.
 * ====================================================================== */
.jtlw{
  --i-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E");
  --i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E");
  --i-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.5-9-8.3C1.3 8.5 2.7 5.4 5.8 5.4c2 0 3.2 1.2 4.2 2.6 1-1.4 2.2-2.6 4.2-2.6 3.1 0 4.5 3.1 2.8 6.3C19 15.5 12 20 12 20z' fill='none' stroke='currentColor' stroke-width='1.9'/%3E%3C/svg%3E");
  --i-trash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4zM6 9h12l-1 12H7z'/%3E%3C/svg%3E");
  --i-times:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 5 12 10.6 17.6 5 19 6.4 13.4 12 19 17.6 17.6 19 12 13.4 6.4 19 5 17.6 10.6 12 5 6.4z'/%3E%3C/svg%3E");
}
.jtlw .fa-minus::before,.jtlw .fa-plus::before,.jtlw .fa-heart::before,
.jtlw .fa-trash-alt::before,.jtlw .fa-trash::before,.jtlw .fa-times::before{
  content:"";display:inline-block;width:1em;height:1em;vertical-align:-.125em;
  background-color:currentColor;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.jtlw .fa-minus::before{-webkit-mask-image:var(--i-minus);mask-image:var(--i-minus)}
.jtlw .fa-plus::before{-webkit-mask-image:var(--i-plus);mask-image:var(--i-plus)}
.jtlw .fa-trash-alt::before,.jtlw .fa-trash::before{-webkit-mask-image:var(--i-trash);mask-image:var(--i-trash)}
.jtlw .fa-times::before{-webkit-mask-image:var(--i-times);mask-image:var(--i-times)}
/* the heart is stroked, not filled, so it is drawn as a background rather than
   a mask — a mask would flatten it to a solid shape */
.jtlw .fa-heart::before{background:var(--i-heart) center/contain no-repeat}
.jtlw .on-list .fa-heart::before,.jtlw .fas.fa-heart::before{
  background:none;background-color:var(--red);
  -webkit-mask-image:var(--i-heart);mask-image:var(--i-heart)}

/* the cart stepper: the buttons are the design's, whatever the icon does */
.jtlw .rz-qty .btn-decrement,.jtlw .rz-qty .btn-increment,
.jtlw .form-counter .btn-decrement,.jtlw .form-counter .btn-increment{
  display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;
  border:0;background:none;color:var(--ink2);font-size:15px;cursor:pointer}
.jtlw .rz-qty .btn-decrement:hover,.jtlw .rz-qty .btn-increment:hover{color:var(--ink)}
.jtlw .rz-qty--pill{border-radius:999px}

/* the coupon action sat next to a field and wrapped its label onto two lines */
.jtlw .rz-summary .btn,.jtlw .cart-summary .btn,
.jtlw #coupon .btn,.jtlw .basket-coupon .btn{white-space:nowrap}

/* ---- consent banner: white, fixed, and it must actually close ----
   Reported: the banner would not disappear. Its own script hides it by taking
   `.active` off #consent-manager, and that path is honoured below — but if the
   script is blocked (it is a consent manager, so it is exactly the kind of thing
   an extension or a failed asset stops) the shopper is left with a banner no
   button can dismiss. razan.js now closes it on click as a fallback, after the
   plugin's own handler has had the click, so consent is still recorded. */
#consent-manager{position:fixed;left:0;right:0;bottom:0;z-index:220;
  background:var(--surface,#fff);border-top:1px solid var(--line,#EADED0);
  box-shadow:0 -10px 32px rgba(28,22,12,.14)}
#consent-manager:not(.active),#consent-manager[hidden]{display:none!important}
#consent-banner{background:var(--surface,#fff);color:var(--ink,#1F1611)}
#consent-banner > *{max-width:var(--maxw,1320px);margin-inline:auto;padding-inline:22px}

/* ---- consent banner: the design ----
   It shipped as a full-bleed strip with all three actions carrying the SAME
   class (consent-btn-outline-primary), so accept, configure and reject were
   visually identical and nothing read as the primary action. The design's
   treatment: a floating card on the page rail, clear of the viewport edge, with
   one accent action and two quiet ones. Targeted by ID because the classes do
   not distinguish them. */
#consent-manager{background:none;border-top:0;box-shadow:none;
  padding:0 16px 16px;pointer-events:none}
#consent-banner{pointer-events:auto;max-width:var(--maxw,1320px);margin:0 auto;
  background:var(--surface,#fff);border:1px solid var(--line,#EADED0);border-radius:24px;
  box-shadow:0 18px 48px rgba(28,22,12,.20);overflow:hidden}
#consent-banner > *{max-width:none;padding-inline:26px}
.consent-banner-body{padding-top:24px}
.consent-banner-actions{padding-bottom:24px}
.consent-btn-helper{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.consent-btn-helper > div{display:flex}
/* the primary action, which the markup does not mark as one */
#consent-banner-btn-all{background:var(--red,#AD4708)!important;color:var(--onRed,#fff)!important;
  border-color:var(--red,#AD4708)!important}
#consent-banner-btn-all:hover{background:var(--primary-600,#9A3F07)!important}
#consent-banner-btn-settings,#consent-banner-btn-close{
  background:var(--surface,#fff)!important;color:var(--ink,#1F1611)!important;
  border-color:var(--line2,#D8C7B4)!important}
#consent-banner-btn-settings:hover,#consent-banner-btn-close:hover{border-color:var(--ink,#1F1611)!important}
/* reject is the quietest of the three without being hidden */
#consent-banner-btn-close{color:var(--muted,#77655A)!important}
@media (max-width:640px){
  #consent-manager{padding:0 10px 10px}
  #consent-banner{border-radius:20px}
  #consent-banner > *{padding-inline:18px}
  .consent-btn-helper > div,.consent-btn-helper > div > .consent-btn{flex:1 1 auto;width:100%}
}

/* Scoped under #consent-banner: the settings modal carries the same helper and
   button classes and sits earlier in the DOM, so the unscoped rules above were
   landing on that copy instead of on the banner's own row. */
#consent-banner .consent-btn-helper{display:flex!important;flex-wrap:wrap;align-items:center;gap:10px}
#consent-banner .consent-btn-helper > div{display:flex;flex:0 0 auto;width:auto}
#consent-banner .consent-btn,#consent-banner .btn-block{width:auto!important;display:inline-flex!important}
#consent-banner #consent-banner-btn-all,#consent-banner .consent-accept .consent-btn{
  background:var(--red,#AD4708)!important;color:var(--onRed,#fff)!important;
  border-color:var(--red,#AD4708)!important}

/* ---------- PayPal buttons must pass UNDER the sticky header --------------- */
/* The SDK renders its buttons into zoid iframes that carry their own z-index,
   so on scroll they painted over .rz-headwrap (z-index:70). Their appearance is
   PayPal's and is deliberately left alone — instead the container is made a
   stacking context of its own at z-index:0, which confines every descendant
   below anything in the page with a z-index of 1 or more, the header included.
   Fixing it this way needs no guess about what value the SDK sets. */
.jtlw .paypal-buttons,
.jtlw .paypal-button-container,
.jtlw [id^="paypal-button"]{position:relative;z-index:0}

/* =============================================================================
   FORM FIELDS — the label belongs above its input
   JTL emits the floating-label pattern: the <input> first, its <label> after, and
   the base sheet is meant to position the label over the field. That positioning
   is NOT in the compiled chain — rz.css carries one rule for
   `.form-label-group > label` and it only sets colour and weight, razan.css has
   none at all. So every label rendered AFTER its field: under it on Kasse, beside
   it in the cart's shipping estimate and in "Frage zum Artikel", and to the right
   of the search box on an empty search page.

   Third instance of this failure in this template, after `.control-hidden` and
   `.tooltip`. Rather than reinstate a floating label, the label is placed above
   the field as a caption — plainer, and it never collides with a filled value.
   ========================================================================== */
.jtlw .form-label-group{display:flex;flex-direction:column-reverse;align-items:stretch;
  gap:6px;margin-bottom:16px;position:relative}
.jtlw .form-label-group > label,
.jtlw .form-label-group > .col-form-label{position:static!important;
  margin:0!important;padding:0!important;
  font-size:12.5px!important;font-weight:600!important;color:var(--ink2)!important;
  line-height:1.3;pointer-events:auto;opacity:1;transform:none}
.jtlw .form-label-group > .form-control,
.jtlw .form-label-group > .rz-input,
.jtlw .form-label-group > input,
.jtlw .form-label-group > select,
.jtlw .form-label-group > textarea{width:100%;padding:12px 16px;
  border:1px solid var(--line2);border-radius:12px;
  background:var(--surface);color:var(--ink);font-size:14px}
.jtlw .form-label-group > .form-control:focus{border-color:var(--ink);outline:none;box-shadow:none}

/* ---------- dismissible alerts: the x is a control, not a line of text ------- */
/* it was printing as a bare "x" on its own line above the message */
.jtlw .alert{position:relative;border-radius:16px;border:1px solid var(--line);
  background:var(--sand);color:var(--ink2);padding:16px 52px 16px 18px;font-size:13.5px}
.jtlw .alert .close,
.jtlw .alert button[data-dismiss="alert"]{position:absolute;top:12px;right:12px;
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;margin:0;float:none;
  border:0;border-radius:999px;background:var(--surface);color:var(--ink);
  font-size:15px;line-height:1;opacity:1;text-shadow:none}
.jtlw .alert .close:hover{background:var(--line2);opacity:1}

/* ---------- empty search result ---------------------------------------------- */
/* "Suche nach: …" is emitted as <div class="h1"> and was rendering at body size */
.jtlw #result-wrapper > .h1,
.jtlw #result-wrapper > .h1 + .alert{max-width:var(--maxw)}
.jtlw #result-wrapper > .h1{font-size:clamp(24px,3vw,34px);font-weight:700;
  letter-spacing:-.025em;color:var(--ink);margin:0 0 18px}
/* the search-again form: field then an accent pill, with room around the block */
.jtlw #suche2,.jtlw form[id^="suche"]{margin:20px 0 clamp(40px,5vw,72px);max-width:460px}
.jtlw #suche2 fieldset{border:0;padding:0;margin:0}
.jtlw #suche2 .btn,.jtlw form[id^="suche"] .btn{margin-top:4px;padding:13px 26px;
  border-radius:999px;background:var(--red);border-color:var(--red);color:var(--onRed);
  font-size:14px;font-weight:700}
.jtlw #suche2 .btn:hover{background:#9A3F07;border-color:#9A3F07;color:var(--onRed)}

/* =============================================================================
   MEGA MENU — the design's arrangement, not the base template's
   (prototype 127-150). The panel chrome already matched: --maxw inner, surface,
   1px --line, 24px radius, --shadowLg, 24px padding. What did not was the
   ARRANGEMENT: the feature tile sat on the RIGHT after three fixed 218px columns.
   The design leads with it — one grid of 1.05fr 1fr 1fr 1fr, feature first, then
   the link columns, all sharing the 24px gap.
   ========================================================================== */
.jtlw .rz-mega-inner{display:grid!important;
  grid-template-columns:1.05fr;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:24px!important;align-items:start}
/* the columns join the parent grid so the feature can share a track row with them */
.jtlw .rz-mega-cols{display:contents!important}
.jtlw .rz-mega-feat{order:-1;margin:0!important;max-width:none!important}

/* the feature tile: 16/11 plate, then title, then the accent call to action */
.jtlw .rz-mega-feat__img{aspect-ratio:16/11;border-radius:16px;margin-bottom:12px;width:100%}
.jtlw .rz-mega-feat__ey{display:block;font-size:15px;font-weight:700;color:var(--ink);
  letter-spacing:-.015em;text-transform:none;font-family:'Outfit',system-ui,sans-serif}

/* column heads: mono eyebrow at the design's tracking */
.jtlw .rz-mega-col__head{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-weight:400;
  border:0!important;padding:0!important}

/* the links: 14px, and on hover they take the sand ground AND step right — the
   movement is the design's, not decoration */
.jtlw .rz-mega-sub{display:flex;flex-direction:column;gap:1px}
.jtlw .rz-mega-sub a{display:block;padding:7px 10px;margin:0 -10px;border-radius:10px;
  font-size:14px;color:var(--ink2);text-decoration:none;
  transition:background .2s ease,padding-left .28s cubic-bezier(.16,1,.3,1),color .2s ease}
.jtlw .rz-mega-sub a:hover{background:var(--sand);padding-left:16px;color:var(--ink)}

/* ---------- buttons the shop marks as hidden -------------------------------- */
/* The configurator emits a bare submit carrying btn-hidden / btn-hidden-default:
   no label, aria-label only, meant never to be seen — JS submits the form through
   it. Neither class is styled anywhere in the compiled chain, so it painted as an
   empty button. Fourth ruleset in this template declared upstream and never
   compiled in, after .control-hidden, .tooltip and the floating-label positioning.
   display:none keeps it submittable: a hidden button still answers .click() and
   still counts as the form's default submit, since tree order is unchanged. */
.jtlw .btn-hidden,
.jtlw .btn-hidden-default,
.jtlw button.js-cfg-validate.btn-hidden{display:none!important}

/* ---------- the enter hint travels with the search button ------------------- */
/* layout/header.tpl lays the bar out as: magnifier, input, .rz-search__hint (the
   return arrow), then the Suchen button. The input was not growing, so the hint
   sat stranded in the middle of the bar with empty space either side of it.
   The input takes the slack and the hint carries the auto margin, so the hint and
   the button travel to the end together and sit next to each other. */
.jtlw .rz-search{display:flex;align-items:center;width:100%;min-width:0}
.jtlw .rz-search input[type="text"],
.jtlw .rz-search input[type="search"],
.jtlw .rz-search .rz-search-input{flex:1 1 auto;min-width:0}
.jtlw .rz-search__hint{margin-left:auto;flex:0 0 auto;order:0}
.jtlw .rz-search .rz-search-btn{flex:0 0 auto;margin-left:10px}
/* ...but at runtime JTL's typeahead WRAPS that input in a span.twitter-typeahead,
   and the span — not the input — is then the flex item. The rule above stops
   applying, the span sizes to its content, and the slack the input was meant to
   absorb is left over for the auto margins to split: the hint and the Suchen
   button each get half and end up stranded mid-bar with a gap between them,
   nowhere near the icon cells. (Measured: 376px in front of each.)
   rz-nav.css and prisma.css both carry this rule, which is why nobody saw it
   there — but header.tpl loads neither, so it never reached the live page.
   The span carries typeahead's own inline style="display:inline-block"; only
   `flex` needs setting here, and inline styles do not touch it. */
.jtlw .rz-search .twitter-typeahead{flex:1 1 auto;min-width:0}
.jtlw .rz-search .twitter-typeahead .tt-input,
.jtlw .rz-search .twitter-typeahead input{width:100%}

/* =============================================================================
   BOOTSTRAP MODAL BASE — missing from the compiled chain
   razan.css carries only `.modal{overflow-x:hidden;overflow-y:auto}`; the rule
   that makes a modal a modal — position:fixed, inset 0, z-index, the dialog and
   content boxes — is not in any sheet the page loads. So an opened modal laid
   itself out INSIDE the page flow: the full-screen image viewer appeared halfway
   down the listing instead of over it, and every other dialog inherited the same
   fault.
   Fifth ruleset in this template declared upstream and never compiled in, after
   .control-hidden, .tooltip, the floating-label positioning and .btn-hidden.
   Restated at Bootstrap 4's own values; the viewer in prisma-product.css loads
   later and still overrides what it needs.
   ========================================================================== */
.jtlw .modal{position:fixed;top:0;left:0;z-index:1050;width:100%;height:100%;
  overflow:hidden;outline:0}
.jtlw .modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}
@media (min-width:576px){
  .jtlw .modal-dialog{max-width:500px;margin:1.75rem auto}
}
.jtlw .modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - 1rem)}
@media (min-width:576px){
  .jtlw .modal-dialog-centered{min-height:calc(100% - 3.5rem)}
}
.jtlw .modal-content{position:relative;display:flex;flex-direction:column;width:100%;
  pointer-events:auto;background-color:var(--surface);background-clip:padding-box;
  border:1px solid var(--line);border-radius:18px;outline:0}
.jtlw .modal-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;
  background-color:#140D08}
.jtlw .modal-backdrop.show{opacity:.6}
.jtlw .modal-header,.jtlw .modal-body,.jtlw .modal-footer{flex-shrink:0}
.jtlw .modal-body{position:relative;flex:1 1 auto;padding:20px 22px}
.jtlw .modal-header{display:flex;align-items:flex-start;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--line)}
.jtlw .modal-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  gap:10px;padding:16px 22px;border-top:1px solid var(--line)}

/* ---------- consent manager: icons and the button row ----------------------- */
/* razan.css pins .consent-banner-icon absolutely at the TOP CENTRE of the banner,
   half outside it, with a ::before painting a slab behind it — that is the pale
   shape that was poking above the card. The design has no such ornament, so it
   goes; the banner leads with its heading.

   Every other icon in snippets/consent_manager.tpl is an inline <svg> with a
   viewBox and NO width or height. Unsized it either collapses — the empty circle
   at the foot of the page, which is the control that reopens the banner — or runs
   to the full width of its container. Sized here with !important, because razan.css
   states its own geometry for the same elements. */
/* the ::before is a slab razan.css paints behind the icon so it can straddle the
   banner edge — that is the pale shape above the card. The icon itself stays: it is
   the fingerprint control the banner text tells people to use, and its svg only
   needed a size. */
.jtlw .consent-banner-icon::before{display:none!important}
.jtlw .consent-banner-icon{display:inline-flex!important;align-items:center;
  justify-content:center;width:44px!important;height:44px!important;padding:0!important;
  border-radius:999px!important;border:1px solid var(--line2)!important;
  background:var(--surface)!important;color:var(--ink)!important;
  box-shadow:var(--shadow)!important;cursor:pointer}
.jtlw .consent-banner-icon svg{width:22px!important;height:22px!important;display:block}
.jtlw #consent-manager svg{max-width:100%;max-height:100%;fill:currentColor}
.jtlw .consent-icon{display:inline-flex!important;align-items:center;justify-content:center;
  width:auto!important;height:auto!important;flex:0 0 auto;margin-left:6px;vertical-align:-3px;
  padding:0!important;border:0!important;background:none!important;color:inherit!important}
.jtlw .consent-icon svg{width:15px!important;height:15px!important;display:block}
.jtlw .consent-modal-icon{display:inline-flex!important;align-items:center;justify-content:center}
.jtlw .consent-modal-icon svg{width:20px!important;height:20px!important;display:block}

/* Banner layout, per the merchant's reference: the wording on the left, the three
   actions stacked in a column on the right at equal width, and the fingerprint on
   the card's left edge rather than straddling its top. Button sizes and colours are
   left as they are. */
.jtlw #consent-banner{position:relative}
.jtlw #consent-banner .consent-banner-body{display:flex;align-items:center;
  gap:clamp(18px,3vw,36px);padding:24px 26px}
.jtlw #consent-banner .consent-banner-description{flex:1 1 auto;min-width:0;margin:0}
.jtlw #consent-banner .consent-banner-actions{flex:0 0 auto;width:auto;margin:0}
.jtlw #consent-banner .consent-btn-helper{display:flex!important;flex-direction:column;
  align-items:stretch;gap:10px;width:auto;margin:0}
.jtlw #consent-banner .consent-btn-helper > *{width:100%;margin:0;padding:0;display:block}
.jtlw #consent-banner .consent-btn{display:block;width:100%!important;min-width:220px;
  margin:0!important;white-space:nowrap}
/* the fingerprint sits on the left edge, vertically centred */
.jtlw #consent-banner .consent-banner-icon{position:absolute!important;
  left:0!important;top:50%!important;right:auto!important;bottom:auto!important;
  transform:translate(-50%,-50%)!important;z-index:2}
@media (max-width:760px){
  .jtlw #consent-banner .consent-banner-body{flex-direction:column;align-items:stretch;gap:16px}
  .jtlw #consent-banner .consent-banner-icon{display:none!important}
}

/* ---------- consent settings dialog ----------------------------------------- */
/* Pressing "Konfigurieren" dropped the whole settings panel into the page flow:
   full-bleed text, no card, no overlay, and the icon svg — viewBox, no dimensions —
   blown up to the width of its container as a giant pale disc.
   razan.css does carry .consent-modal{position:fixed;inset:0} and sizes that icon,
   but those rules are plainly not reaching the page; every base ruleset this
   template has been missing came from the same sheet. So the dialog's layout is
   stated here, in Prisma's own chain, and no longer depends on it. */
/* pointer-events:auto is not optional here. #consent-manager is set
   pointer-events:none so the floating banner does not block the page, and
   #consent-banner takes it back — but this dialog is a sibling inside the same
   wrapper and inherited none, so it rendered and could not be scrolled or clicked.
   overscroll-behavior keeps the wheel inside the dialog once it reaches an end. */
.jtlw .consent-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1060;
  pointer-events:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  overflow-x:hidden;overflow-y:auto;padding:16px;
  background:rgba(20,13,8,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.jtlw .consent-modal:not(.active){display:none}
/* !important and (0,3,0): the utility class the consent JS leaves on this element
   carries display:none!important, which a plain rule cannot beat */
.jtlw .consent-modal.active{display:block!important}
.jtlw .consent-modal-content{position:relative;max-width:640px;margin:6vh auto;
  padding:26px 28px;border:1px solid var(--line);border-radius:22px;
  background:var(--surface);color:var(--ink);box-shadow:var(--shadowLg)}
.jtlw .consent-modal-close{position:absolute;top:14px;right:14px;z-index:2;
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  padding:0;border:0;border-radius:999px;background:var(--sand);color:var(--ink);
  font-size:16px;line-height:1;opacity:1;cursor:pointer}
.jtlw .consent-modal-close:hover{background:var(--line2)}
/* the disc: sized, and kept inside the card rather than straddling its edge */
.jtlw .consent-modal-icon{display:flex;align-items:center;justify-content:center;
  width:52px!important;height:52px!important;margin:0 0 14px!important;padding:0!important;
  transform:none!important;border-radius:999px;background:var(--panel);color:var(--onPanel)}
.jtlw .consent-modal-icon svg{width:24px!important;height:24px!important;display:block}
/* the service rows inside */
.jtlw .consent-modal-content .consent-btn-holder{display:flex;flex-wrap:wrap;gap:10px;
  justify-content:flex-end;margin-top:18px}
.jtlw .consent-modal-content .consent-btn{width:auto!important;flex:0 0 auto;white-space:nowrap}
@media (max-width:640px){
  .jtlw .consent-modal-content{margin:12px auto;padding:20px 18px;border-radius:18px}
}

/* ---------- the reopen control, bottom left --------------------------------- */
/* razan.css defines #consent-settings-btn as a 40px fixed button and hides it until
   consent has been recorded. Its icon is the same unsized inline svg, so once it
   appeared it was an empty circle. Sized and given Prisma chrome. */
.jtlw #consent-settings-btn{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:1px solid var(--line2);border-radius:999px;
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.jtlw #consent-settings-btn:hover,.jtlw #consent-settings-btn:focus{background:var(--sand);color:var(--ink)}
.jtlw #consent-settings-btn .consent-icon{width:auto!important;height:auto!important;margin:0!important}
.jtlw #consent-settings-btn .consent-icon svg{width:22px!important;height:22px!important}

/* anything interactive the manager holds needs its pointer events back */
.jtlw #consent-manager .consent-modal,
.jtlw #consent-manager .consent-modal *,
.jtlw #consent-settings-btn{pointer-events:auto}

/* =============================================================================
   19. MOBILE SHELL — the phone header, ticker, footer and breadcrumb
   The desktop masthead is a divided row: a flush search cell between hairlines
   and a full-height dark cart slab closing the row. Under 960px that row was
   reduced to burger + logo + two icons, which left the search unreachable, a
   wide dead gap in the middle of the bar, and a square black slab stopping 22px
   short of the screen edge (the .rz-wrap gutter) — which reads as a clipped
   block rather than a control. Everything below restates the shell at phone
   size instead of hiding parts of it.
   ========================================================================== */

/* ---------- the ticker is one line, not a wall ------------------------------
   .rz-ticker is a wrapping centered flex row. That is right on a 1320px page,
   where all five USPs sit on one line; on a 390px phone every item takes a line
   of its own, so a five-item strip opened the page with ~190px of stacked mono
   text above the logo. It becomes what its name says here: a single line that
   scrolls sideways. Not animated on purpose — auto-moving text needs a pause
   control under WCAG 2.2.2, and a swipeable strip needs none. */
@media (max-width:960px){
  .jtlw .rz-topbar .rz-wrap{display:block;padding-left:0;padding-right:0}
  .jtlw .rz-ticker{display:flex;flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    scroll-snap-type:x proximity;
    /* the strip keeps the page gutter, and fades at the right edge so the items
       past the fold announce themselves */
    padding-left:22px;padding-right:22px;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%)}
  .jtlw .rz-ticker::-webkit-scrollbar{display:none}
  .jtlw .rz-ticker__item{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;
    gap:0;padding:5px 0;min-height:30px}
  /* the "·" is the only thing separating items once the padding is gone */
  .jtlw .rz-ticker__sep{padding:0 14px}
}

/* ---------- the search comes back, on its own row --------------------------
   It was display:none!important under 960px. A shop header with no search field
   is the largest thing this template was missing on a phone, and the icon row
   has no width to hold one — so the header row wraps and the search takes the
   full width beneath the logo. Off the desktop hairline cell it needs its own
   outline, since there is nothing left for it to divide. */
@media (max-width:960px){
  .jtlw .rz-header .rz-wrap{flex-wrap:wrap;min-height:0;row-gap:10px;
    padding-top:10px;padding-bottom:12px}
  .jtlw .rz-headwrap.rz-stuck .rz-header .rz-wrap{min-height:0}
  /* row 1 carries its own height now that the wrap no longer sets one */
  .jtlw .rz-burger,.jtlw .rz-logo,.jtlw .rz-icons{min-height:52px}
  .jtlw .rz-search{display:flex!important;order:9;flex:0 0 100%;
    border:1px solid var(--line2);border-radius:14px;background:var(--surface);
    padding:0 8px 0 14px;gap:11px}
  /* 16px is the floor iOS Safari will render without zooming the page on focus */
  .jtlw .rz-search input{padding:11px 0;font-size:16px}
  /* the ↵ keycap is a hardware-keyboard affordance; a phone has no use for it */
  .jtlw .rz-search__hint{display:none}
  .jtlw .rz-search-btn{padding:8px 15px;font-size:13px}
}

/* ---------- the cart closes the row as a control, not a slab ----------------
   height:100% + border-radius:0 is the desktop design: the slab meets the top
   and bottom rules of the masthead and the container edge. On a phone that edge
   is 22px inside the screen, so the same slab reads as a black rectangle that
   has been cut off — and it sits beside a round account icon, which is the
   mixed-design effect this whole section is about. It becomes a pill in the
   icon row, consistent with the icon next to it. */
@media (max-width:960px){
  .jtlw .rz-icons{align-items:center;gap:4px}
  /* --panel is the always-dark chrome pair, so in dark mode the pill is a dark
     shape on a dark header — as a full-height slab its edges did that work, as
     a pill it needs a hairline. Invisible in light, where the pill is already
     near-black on cream. */
  .jtlw .rz-cart-btn{height:44px;padding:0 16px;border-radius:999px;align-self:center;
    border:1px solid var(--line)}
  .jtlw .rz-cart-count{top:-5px;right:-6px}
  /* the icon cells lose their divider rules — there is no divided row left */
  .jtlw .rz-ic{min-height:44px;padding:0 10px;justify-content:center}
}

/* ---------- the theme toggle is reachable again -----------------------------
   It is the only control for dark mode, and hiding it under 960px with nothing
   in the drawer to replace it meant a phone could not leave the theme it
   started in. It is icon-only and narrow, so it stays in the row. */
@media (max-width:960px){
  .jtlw .rz-ic--theme{display:flex!important;padding:0 8px}
}

/* ---------- section heads stack before they crowd ---------------------------
   .rz-sec-head already wraps, but its "Zeige alle …" link is white-space:nowrap
   and the h2 shrinks to clamp's 24px floor, so at 390px the two met in the
   middle of the row with nothing between them. Below 560 the link drops under
   its heading. */
@media (max-width:560px){
  .jtlw .rz-sec-head{flex-direction:column;align-items:flex-start;gap:8px}
  .jtlw .rz-sec-head .rz-seeall{white-space:normal}
}

/* ---------- the footer link groups are styled on a phone too ----------------
   Each footer column is a JTL link-group box, and every one emits TWO headings:
   a .productlist-filter-headline for desktop (carrying d-none d-md-flex) and an
   a.box-normal-link collapse toggle for mobile. rz.css hides the toggle from
   768px up so the two never double — but nothing ever styled it, so under 768px
   the footer lost its mono column titles and fell back to a bare link, with
   Bootstrap's .nav-link padding indenting every entry beneath it. The toggle is
   skinned as the column title it stands in for. */
@media (max-width:767.98px){
  .jtlw #footer-boxes .box-normal-link,
  .jtlw .rz-footer-col .box-normal-link{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted);margin-bottom:14px;text-decoration:none}
  .jtlw #footer-boxes .box-normal-link:hover{color:var(--ink)}
  /* it is a collapse toggle, so it owes the reader its state */
  .jtlw #footer-boxes .box-normal-link::after{content:"";width:7px;height:7px;flex-shrink:0;
    border:1.5px solid currentColor;border-left:0;border-top:0;
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s ease}
  .jtlw #footer-boxes .box-normal-link.collapsed::after{
    transform:rotate(-45deg) translate(-1px,1px)}
  .jtlw #footer-boxes .box-normal-link .text-truncate{overflow:visible}
}
/* the group body carries Bootstrap's list chrome at every width — the indent it
   produced was merely invisible on desktop, where the column is narrow and the
   real heading sits above it */
.jtlw #footer-boxes .box{margin:0;padding:0;border:0;background:none}
.jtlw #footer-boxes .nav{margin:0;padding:0}
.jtlw #footer-boxes .nav-item{list-style:none}
.jtlw #footer-boxes .nav-link{padding:0 0 9px!important;border:0!important;border-radius:0!important;
  font-size:13.5px;color:var(--ink2)!important}
.jtlw #footer-boxes .nav-link:hover{background:none!important;color:var(--red)!important}

/* ---------- breadcrumb: one trail, not two ----------------------------------
   layout/breadcrumb.tpl emits NOVA's `.breadcrumb-arrow` — a single "up one
   level" link meant to be the ONLY crumb on a phone, with the full <ol> shown
   from md up. That swap lives in themes/base/sass/components/_breadcrumbs.scss,
   which is not part of the razan → rz → prisma chain, so only half of it was
   ever in force: rz.css hides the arrow from 768px, but nothing hid the trail
   below it. Both rendered, so a product page opened with the parent link, then
   Startseite, then the whole path again — 1034px of crumbs inside a 346px
   column, which is what made the PDP scroll sideways on a phone. The missing
   half is stated here.

   The crumb kept is taken from the <ol> itself — :nth-last-child(2), the entry
   before the current page — and NOT from `.breadcrumb-arrow`. The template
   builds that arrow as $Brotnavi[count-2], but on a live product page it came
   back holding the product's own name and its own URL, so as the only crumb on
   screen it would be a "go up" link pointing at the page you are already on.
   The rendered list is unambiguous: whatever sits second from the end is the
   parent. The arrow is dropped at every width instead (rz.css already drops it
   from 768px up, where it duplicated the trail's own parent entry). */
@media (max-width:767.98px){
  .jtlw .breadcrumb-item{display:none}
  .jtlw .breadcrumb .breadcrumb-item:nth-last-child(2){display:flex;align-items:center;gap:7px;
    padding-left:0;font-size:13px;color:var(--ink2)}
  /* razan.css draws the "/" separator as a ::before on every crumb after the
     first — with one crumb left there is nothing for it to separate */
  .jtlw .breadcrumb .breadcrumb-item:nth-last-child(2)::before{content:"";width:7px;height:7px;
    flex-shrink:0;border:1.5px solid currentColor;border-right:0;border-bottom:0;
    padding:0;opacity:1;transform:rotate(-45deg)}
}
.jtlw .breadcrumb .breadcrumb-arrow{display:none!important}

/* ---------- the drawer closes with the cells the header could not keep ------
   .rz-drawer-panel is a flex column whose viewport takes the free space, so a
   sibling after it pins to the bottom of the drawer without any positioning. */
.rz-drawer-foot{display:flex;flex-direction:column;flex-shrink:0;
  padding:10px 12px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--surface)}
.rz-drawer-foot a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  font-size:14.5px;font-weight:600;color:var(--ink);transition:background .18s ease}
.rz-drawer-foot a:hover{background:var(--sand);color:var(--ink)}
.rz-drawer-foot svg{width:19px;height:19px;flex-shrink:0;color:var(--muted)}