@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:#FBE8D8; --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}
.jtlw .rz-mega-promo{border-radius:18px;padding:20px;background:var(--sand);display:flex;flex-direction:column;align-items:flex-start}
.jtlw .rz-mega-promo--img{background-size:cover;background-position:center;color:#fff;position:relative;justify-content:flex-end;min-height:200px}
.jtlw .rz-mega-promo--img::after{content:"";position:absolute;inset:0;border-radius:18px;background:linear-gradient(180deg,transparent,rgba(20,13,8,.68))}
.jtlw .rz-mega-promo--img > *{position:relative;z-index:1}
.jtlw .rz-mega-promo__ey{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.jtlw .rz-mega-promo--img .rz-mega-promo__ey{color:#fff}
.jtlw .rz-mega-promo b{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:7px}
.jtlw .rz-mega-promo p{font-size:13px;color:var(--ink2);margin-bottom:14px}
.jtlw .rz-mega-promo--img p{color:rgba(255,255,255,.86)}

/* ============================ 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}
.rz-drawer-search input{flex:1;min-width:0;border:none;background:none;outline:none;font-size:15px;color:var(--ink)}
.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}
  /* clean mobile header: burger + logo + account + cart. Everything else → drawer.
     !important + .jtlw prefix beats rz.css's higher-specificity shell rules. */
  .jtlw .rz-search,.jtlw .rz-mainnav,.jtlw .rz-ic__label{display:none!important}
  .jtlw .rz-ic--theme,.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-header .rz-wrap{min-height:60px;gap:6px}
  .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)}