/* ============================================================================
   RAZAN / NAZAR — bespoke design system
   Ported pixel-for-pixel from design_handoff_nazar_storefront (Nazar Storefront.dc.html)
   Fonts: Schibsted Grotesk (display) + Instrument Sans (body) — loaded in header.tpl
   This file is the authoritative visual layer; loaded LAST so rz-* wins the cascade.
   Shell chrome (header/topbar/nav/drawer/mini-cart/footer) lives in rz-nav.css.
   ============================================================================ */

/* ------------------------------------------------------------------ tokens */
:root{
  --ink:#1b1a16; --ink2:#5f5c53; --ink3:#8b8779;
  --line:#e5e0d4; --line2:#d7d1c2;
  --paper:#f4efe6; --surface:#ffffff; --soft:#faf8f2;
  --red:#f80808; --redink:#c20606; --sand:#d8c7ad;
  --ok:#2c7a48; --ok-bg:#e8f5ec; --star:#e0a500;
  --maxw:1290px;
  --head:'Schibsted Grotesk','Instrument Sans',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sh-drop:0 20px 50px rgba(0,0,0,.12);
  --sh-mega:0 24px 44px rgba(0,0,0,.09);
  --sh-cart:-20px 0 60px rgba(0,0,0,.18);
  /* harmonize any lingering prior-skin references to the new brand red */
  --primary:var(--red);
  --grad:linear-gradient(135deg,#f80808,#c20606);
}

/* media "fabric" placeholder — used until real photography is supplied */
.rz-fabric{
  background:
    repeating-linear-gradient(115deg, rgba(0,0,0,.035) 0 1px, transparent 1px 8px),
    linear-gradient(150deg, rgba(255,255,255,.42), rgba(0,0,0,.16)),
    var(--sand);
}

/* ---------------------------------------------------------------- base/reset */
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-size:15px;
  line-height:1.5;
}
.rz-scope h1,.rz-scope h2,.rz-scope h3,.rz-scope h4,.rz-scope h5,
h1.rz,h2.rz,h3.rz{
  font-family:var(--head); margin:0; font-weight:600;
  letter-spacing:-.02em; line-height:1.05; text-wrap:balance; color:var(--ink);
}
.rz-scope p{margin:0;}
.rz-scope a{color:inherit; text-decoration:none;}
.rz-scope a:hover{color:var(--red);}
.rz-scope ul,.rz-scope ol{margin:0; padding:0; list-style:none;}
.rz-scope img{display:block; max-width:100%;}
.rz-scope button{font-family:inherit; cursor:pointer;}
/* only reset UNCLASSED buttons — component buttons (.rz-btn/.rz-addbig/.rz-iadd/
   the stock template .btn) keep their own background/border/color */
.rz-scope button:not([class]){border:none; background:none; color:inherit;}
.rz-qty button,.rz-mci__qty button{border:none; background:none;}
.rz-scope input,.rz-scope textarea,.rz-scope select{font-family:inherit; font-size:15px;}
.rz-scope ::placeholder{color:#a29d90;}
::selection{background:var(--red); color:#fff;}

@keyframes rzFade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@keyframes rzSlideIn{from{transform:translateX(-100%);} to{transform:none;}}
@keyframes rzSlideInRight{from{transform:translateX(100%);} to{transform:none;}}
@keyframes rzDrop{from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:none;}}

/* ------------------------------------------------------------------- layout */
.rz-wrap{max-width:var(--maxw); margin:0 auto; padding-left:22px; padding-right:22px;}
.rz-scope{animation:rzFade .35s ease;}
.rz-eyebrow{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--red);}
.rz-eyebrow--wide{letter-spacing:.14em;}
.rz-sec-head{display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:20px;}
.rz-sec-head h2{font-size:clamp(26px,3.4vw,38px); margin-top:6px;}
.rz-sec-head .rz-seeall{font-weight:600; white-space:nowrap;}

/* ------------------------------------------------------------------ buttons */
.rz-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--ink); color:#fff; border-radius:999px;
  padding:15px 28px; font-weight:600; font-size:15.5px; line-height:1;
  border:1px solid transparent; transition:transform .12s ease, opacity .12s ease;
}
.rz-btn:hover{color:#fff; opacity:.92;}
.rz-btn--sm{padding:11px 20px; font-size:14px;}
.rz-btn--red{background:var(--red); color:#fff;}
.rz-btn--red:hover{color:#fff;}
.rz-btn--ghost{background:var(--surface); color:var(--ink); border-color:var(--line2);}
.rz-btn--ghost:hover{color:var(--ink); border-color:var(--ink);}
.rz-btn--light{background:rgba(255,255,255,.75); color:var(--ink);}
.rz-btn--light:hover{color:var(--ink);}
.rz-btn--block{display:flex; width:100%;}
/* square icon add-to-cart button */
.rz-iadd{
  width:40px; height:40px; border-radius:11px; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.rz-iadd:hover{color:#fff; opacity:.9;}
.rz-iadd svg{width:19px; height:19px;}
/* When a button is an <a>, the base `.rz-scope a{color:inherit}` rule (specificity
   0,1,1) would otherwise beat `.rz-btn` (0,1,0) and make white-on-ink text/icons
   invisible. Re-assert the intended colors at higher specificity. */
.rz-scope a.rz-btn,.rz-scope a.rz-iadd,.rz-scope a.rz-addbig,
.rz-scope a.rz-btn:hover,.rz-scope a.rz-iadd:hover,.rz-scope a.rz-addbig:hover{color:#fff;}
.rz-scope a.rz-btn--ghost,.rz-scope a.rz-btn--light,
.rz-scope a.rz-btn--ghost:hover,.rz-scope a.rz-btn--light:hover{color:var(--ink);}

/* ------------------------------------------------------------- product card */
.rz-plist{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px;}
/* product rail → horizontal slider (no more 5-in-a-row + 1 orphan).
   Cards sit in a scroll row; rz-nav.js wires the arrow buttons (.rz-railwrap). */
.rz-railwrap{position:relative;}
.rz-rail{
  display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding:2px 1px 8px;
}
.rz-rail::-webkit-scrollbar{display:none;}
.rz-rail > *{flex:0 0 230px; min-width:0; scroll-snap-align:start;}
.rz-rail-nav{
  position:absolute; top:38%; transform:translateY(-50%); z-index:4;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 12px rgba(27,26,22,.12); transition:opacity .2s, border-color .2s;
}
.rz-rail-nav:hover{border-color:var(--ink);}
.rz-rail-prev{left:-14px;} .rz-rail-next{right:-14px;}
.rz-rail-nav.is-disabled{opacity:0; pointer-events:none;}
@media (max-width:640px){
  .rz-rail > *{flex-basis:74%;}
  .rz-rail-nav{display:none;}
}
.rz-card{
  position:relative; /* containing block for .rz-card__wish — without it the heart
                        escapes to the nearest positioned ancestor (page corner) */
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; display:flex; flex-direction:column;
}
.rz-card__media{position:relative; display:block; aspect-ratio:1/1; overflow:hidden; cursor:pointer; background:#fff;}
/* SQUARE frame + CONTAIN + white bg: shows the WHOLE product, never crops it. The old
   4/3 + cover cropped TALL garments (aprons, jackets) top & bottom — that's the reported
   "cut / pushed-up" look on clothing listings. Pack-shots sit on white studio backgrounds,
   so the contain margins blend invisibly into the white card; the small padding keeps the
   product off the edges. Verified against the real Schürzen catalogue photos. */
.rz-card__media img{width:100% !important; height:100% !important; object-fit:contain !important; object-position:center !important; display:block; padding:10px; box-sizing:border-box;}
/* product-rail / slider cards (item_slider.tpl → .item-slider .square-image .inner .product-image):
   fill the square frame (COVER) so short / lifestyle photos don't leave white space at the top. */
.item-slider.square-image,.item-slider .square-image,.item-slider.productbox-image{overflow:hidden;}
.item-slider .inner{position:absolute !important; inset:0 !important; width:100%; height:100%; overflow:hidden;}
.item-slider .inner img,.item-slider .inner .product-image,.item-slider .inner picture,.item-slider .inner picture img,.item-slider .inner source{
  width:100% !important; height:100% !important; max-width:100% !important; object-fit:cover !important; object-position:center !important; display:block;}
.rz-card__badge{
  position:absolute; top:12px; left:12px; color:#fff; font-size:11px; font-weight:700;
  padding:5px 10px; border-radius:999px; background:var(--ink); z-index:2;
}
.rz-card__badge--sale{background:var(--red);}
.rz-card__wish{
  position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:999px;
  background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; z-index:2;
}
.rz-card__wish svg{width:17px; height:17px;}
.rz-card__body{padding:14px 15px 16px; display:flex; flex-direction:column; flex:1;}
.rz-card__cat{font-size:11.5px; color:var(--ink3); margin-bottom:3px;}
.rz-card__name{font-weight:600; font-size:15px; line-height:1.25; margin-bottom:7px; color:var(--ink);}
/* parts-list quantity chip ("2×") — set contents on the PDP */
.rz-card__qty{
  display:inline-block; background:var(--soft); border:1px solid var(--line); border-radius:999px;
  padding:0 7px; margin-right:2px; font-size:12px; font-weight:700; color:var(--ink2);
  vertical-align:1px; white-space:nowrap;}
.rz-card__rating{display:flex; align-items:center; gap:5px; margin-bottom:10px;}
.rz-stars{color:var(--star); font-size:13px; letter-spacing:1px; white-space:nowrap;}
.rz-card__rating .rz-rcount{font-size:12px; color:var(--ink3);}
.rz-card__foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px;}
.rz-price{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;}
.rz-price__now{font-weight:700; font-size:17px; color:var(--ink);}
.rz-price--sale .rz-price__now{color:var(--redink);}
.rz-price__old{font-size:13px; color:var(--ink3); text-decoration:line-through;}

/* --------------------------------------------------------------------- HOME */
.rz-hero{position:relative; border-radius:24px; overflow:hidden;
  background:linear-gradient(120deg,#e7dcc7,#d3c3a6 60%,#c3a988);
  min-height:clamp(360px,52vw,540px); display:flex; align-items:flex-end;}
.rz-hero__weave{position:absolute; inset:0; background:repeating-linear-gradient(118deg, rgba(0,0,0,.04) 0 1px, transparent 1px 9px);}
.rz-hero__glow{position:absolute; top:0; right:0; width:46%; height:100%; background:linear-gradient(160deg, rgba(255,255,255,.28), rgba(0,0,0,.12));}
.rz-hero__inner{position:relative; padding:clamp(28px,4vw,56px); max-width:620px;}
.rz-hero__pill{display:inline-block; background:rgba(255,255,255,.7); backdrop-filter:blur(4px);
  padding:7px 15px; border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); margin-bottom:20px;}
.rz-hero__inner h1{font-size:clamp(38px,6vw,68px); font-weight:800; margin-bottom:18px;}
.rz-hero__inner h1 em{font-style:italic; color:var(--redink); font-weight:800;}
.rz-hero__lede{font-size:clamp(15px,1.5vw,18px); color:#3f3a30; max-width:460px; margin-bottom:52px; line-height:1.55;}
/* more breathing room above the hero buttons (per request) */
.rz-hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px;}
.rz-hero__badge{position:absolute; bottom:22px; right:24px; background:rgba(27,26,22,.85);
  color:#fff; padding:8px 16px; border-radius:999px; font-size:13px; font-weight:600;}
/* uploaded hero image (Startseite → "Hero-Bild") — fills the whole poster (cover).
   A warm scrim on the text side keeps the dark headline readable over any photo;
   falls back to the texture when no image is set or it fails to load. */
.rz-hero__img{position:absolute; inset:0; z-index:1; background-size:cover; background-position:center; background-repeat:no-repeat;}
.rz-hero__img::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(247,239,230,.93) 0%,rgba(247,239,230,.5) 42%,rgba(247,239,230,0) 68%);}
.rz-hero__inner{z-index:3;}
.rz-hero__badge{z-index:3;}

.rz-usps{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px;}
.rz-usp{display:flex; align-items:center; gap:14px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; padding:16px 18px;}
.rz-usp__ic{font-size:22px; line-height:1;}
.rz-usp__t{font-weight:700; font-size:14.5px;}
.rz-usp__s{font-size:12.5px; color:var(--ink2);}

.rz-mosaic{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px;}
.rz-tile{position:relative; border-radius:16px; overflow:hidden; display:flex; align-items:flex-end; padding:20px;}
.rz-tile--big{grid-column:span 2; grid-row:span 2;}
.rz-tile__scrim{position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.32), transparent 60%);}
.rz-tile__cap{position:relative; color:#fff;}
.rz-tile__cap b{font-family:var(--head); font-weight:700; font-size:21px; display:block;}
.rz-tile__cap span{font-size:13.5px; opacity:.9;}

.rz-promo{display:grid; grid-template-columns:1.1fr .9fr; border-radius:22px; overflow:hidden; border:1px solid var(--line);}
.rz-promo__copy{background:var(--ink); color:#fff; padding:clamp(30px,4vw,52px); display:flex; flex-direction:column; justify-content:center;}
.rz-promo__copy .rz-eyebrow{color:var(--sand); margin-bottom:12px;}
.rz-promo__copy h2{font-size:clamp(28px,4vw,44px); color:#fff; margin-bottom:14px;}
.rz-promo__copy p{color:#c9c4b8; max-width:400px; margin-bottom:26px; line-height:1.5;}
.rz-promo__copy .rz-btn{align-self:flex-start;}
.rz-promo__vis{background:linear-gradient(150deg,#c7d0c0,#aeb9a4); min-height:240px; position:relative;}
.rz-promo__vis::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(100deg, rgba(0,0,0,.05) 0 1px, transparent 1px 10px);}
.rz-promo__tag{position:absolute; bottom:20px; right:22px; background:rgba(255,255,255,.85); padding:8px 15px; border-radius:999px; font-weight:700; font-size:13px;}
/* no promo image → one full-width dark band, not an empty colour panel */
.rz-promo--noimg{grid-template-columns:1fr;}
.rz-promo--noimg .rz-promo__copy{padding-block:clamp(34px,5vw,60px);}
.rz-promo--noimg .rz-promo__copy p{max-width:640px;}

.rz-quote{background:var(--surface); border:1px solid var(--line); border-radius:22px;
  padding:clamp(30px,5vw,60px); text-align:center; max-width:820px; margin:0 auto;}
.rz-quote__mark{font-family:var(--head); font-size:60px; line-height:.6; color:var(--sand);}
.rz-quote blockquote{font-family:var(--head); font-size:clamp(20px,2.6vw,29px); font-weight:500; line-height:1.35; margin:8px 0 26px;}
.rz-quote__by{display:flex; align-items:center; justify-content:center; gap:12px;}
.rz-quote__av{width:46px; height:46px; border-radius:999px; background:linear-gradient(135deg,#d8b6ab,#c99e90);}
.rz-quote__by b{font-weight:700; display:block; text-align:left;}
.rz-quote__by span{font-size:12.5px; color:var(--ink2);}

.rz-nl{background:linear-gradient(120deg,#eee7d8,#e3d8c2); border-radius:22px;
  padding:clamp(30px,4vw,50px); display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center;}
.rz-nl h2{font-size:clamp(26px,3.4vw,38px); margin:8px 0 10px;}
.rz-nl p{color:var(--ink2); line-height:1.5; max-width:420px;}
.rz-nl__form{display:flex; gap:10px; flex-wrap:wrap;}
.rz-nl__form input{flex:1; min-width:200px; border:1px solid var(--line2); background:#fff; border-radius:999px; padding:15px 20px; outline:none;}

/* ------------------------------------------------------------------ LISTING */
.rz-cathero{position:relative; overflow:hidden; border-radius:20px; margin-bottom:22px;
  background-color:#4b463e; background-position:center; background-size:cover; background-repeat:no-repeat;
  min-height:clamp(240px,26vw,340px); display:flex; align-items:flex-end;}
/* two-layer scrim: a left-weighted wash for the copy + a bottom vignette, so the
   text stays readable no matter how busy or bright the category photo is */
.rz-cathero__scrim{position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(20,19,15,.82) 0%, rgba(20,19,15,.55) 45%, rgba(20,19,15,.12) 100%),
             linear-gradient(0deg, rgba(20,19,15,.45), transparent 55%);}
.rz-cathero--plain{background-image:linear-gradient(120deg,#5f584d,#3f3a33); min-height:200px;}
.rz-cathero__in{position:relative; width:100%; padding-top:clamp(28px,4vw,44px); padding-bottom:clamp(24px,3.5vw,38px);}
.rz-cathero__copy{max-width:600px;}
.rz-cathero .rz-eyebrow{color:var(--sand);}
.rz-cathero h1{font-size:clamp(30px,4.2vw,48px); color:#fff; margin:8px 0 10px; text-shadow:0 1px 18px rgba(0,0,0,.35);}
.rz-cathero p{color:#ece6da; line-height:1.55; font-size:15px; margin:0; text-shadow:0 1px 12px rgba(0,0,0,.35);}
.rz-cathero__count{margin-top:14px; display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(4px);
  color:#fff; font-weight:600; font-size:13px; padding:6px 14px; border-radius:999px;}
@media (max-width:767.98px){
  .rz-cathero{border-radius:16px; min-height:200px;}
  .rz-cathero__scrim{background:linear-gradient(0deg, rgba(20,19,15,.8), rgba(20,19,15,.35));}
}

.rz-chips{display:flex; gap:10px; flex-wrap:wrap;}
.rz-chip{padding:9px 16px; border-radius:999px; border:1px solid var(--line2); background:#fff; font-size:13.5px; font-weight:600; color:var(--ink);}
.rz-chip:hover{border-color:var(--ink); color:var(--ink);}

.rz-listing{display:grid; grid-template-columns:264px 1fr; gap:26px; align-items:start;}
.rz-listing--nofilter{grid-template-columns:1fr;}
.rz-filters{position:sticky; top:150px; display:flex; flex-direction:column; gap:16px;}
.rz-fgroup{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px;}
.rz-fgroup__t{font-weight:700; font-size:14px; margin-bottom:12px;}
.rz-swatches{display:flex; flex-wrap:wrap; gap:9px;}
.rz-sw{width:30px; height:30px; border-radius:999px; border:2px solid var(--line2); box-shadow:0 0 0 2px #fff inset;}
.rz-sw.is-active{border-color:var(--ink);}
.rz-checks{display:flex; flex-direction:column; gap:9px;}
.rz-check{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink2); cursor:pointer;}
.rz-check__box{width:19px; height:19px; border-radius:6px; border:1.5px solid var(--line2); background:#fff;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; flex-shrink:0;}
.rz-check.is-on .rz-check__box,.rz-check__box.is-on{background:var(--ink); border-color:var(--ink);}
.rz-check__count{font-size:12px; color:var(--ink3); margin-left:auto;}

.rz-toolbar{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px;}
.rz-toolbar__l{display:flex; align-items:center; gap:12px;}
.rz-toolbar__r{display:flex; align-items:center; gap:10px;}
.rz-count{font-size:13.5px; color:var(--ink2);}
.rz-sortbox{display:flex; align-items:center; gap:8px; border:1px solid var(--line2); background:#fff; border-radius:999px; padding:8px 8px 8px 16px;}
.rz-sortbox > span:first-child{font-size:13px; color:var(--ink2);}
.rz-sortbox b{font-weight:600; font-size:13.5px;}
.rz-sortbox .rz-caret{color:var(--ink3); font-size:11px;}
.rz-sortbox select{border:none; background:none; outline:none; font-weight:600; font-size:13.5px; color:var(--ink); cursor:pointer;}
.rz-viewtoggle{display:flex; border:1px solid var(--line2); background:#fff; border-radius:10px; overflow:hidden;}
.rz-viewtoggle a,.rz-viewtoggle button{width:38px; height:38px; display:flex; align-items:center; justify-content:center; color:var(--ink3);}
.rz-viewtoggle .is-active{background:var(--ink); color:#fff;}
.rz-activechips{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:18px;}
.rz-achip{display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:#fff; padding:7px 8px 7px 14px; border-radius:999px; font-size:12.5px; font-weight:600;}
.rz-achip:hover{color:#fff;}
.rz-achip button,.rz-achip .x{color:#fff; opacity:.7; font-size:15px; line-height:1;}
.rz-clearall{font-size:12.5px; color:var(--ink3); text-decoration:underline;}

.rz-pager{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:32px; flex-wrap:wrap;}
.rz-pager a,.rz-pager span{min-width:40px; height:40px; padding:0 6px; border-radius:10px; border:1px solid var(--line2); background:#fff;
  display:inline-flex; align-items:center; justify-content:center; color:var(--ink); font-weight:600;}
.rz-pager .is-active{background:var(--ink); color:#fff; border-color:var(--ink);}
.rz-pager .is-nav{color:var(--ink3);}
/* category SEO block below the grid — flush with the product grid (see footer.tpl) */
.rz-listing-seo{padding:0; margin:0; max-width:none;}
.rz-seo{margin-top:26px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 28px;}
.rz-seo h1,.rz-seo h2,.rz-seo h3{font-size:19px; margin-bottom:10px;}
.rz-seo p{color:var(--ink2); line-height:1.6; font-size:14.5px; margin-bottom:12px;}

/* list-view row (alternate to gallery grid) */
.rz-lrow{display:flex; gap:18px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:14px;}
.rz-lrow__media{width:150px; aspect-ratio:1/1; border-radius:12px; flex-shrink:0; overflow:hidden;}
.rz-lrow__body{flex:1; display:flex; flex-direction:column;}

/* subcategory tiles (listing top) */
.rz-subcats{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-bottom:8px;}
.rz-subcat{position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16/9; display:flex; align-items:flex-end; padding:16px;}
.rz-subcat__scrim{position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.34), transparent 60%);}
.rz-subcat b{position:relative; color:#fff; font-family:var(--head); font-weight:700; font-size:16px;}

/* ---------------------------------------------------------------------- PDP */
.rz-pdp{display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(24px,4vw,54px); align-items:start;}
/* columns MUST be allowed to shrink to their fr share — without this the gallery image
   + 120px thumbnail rail min-content forces the gallery column wide and squishes the
   buy box (title/stock wrap badly). Keeps the layout proportional. */
.rz-pdp{min-width:0;}
.rz-pdp > *,.rz-gallery-col,.rz-buy-col{min-width:0;}
.rz-gallery,.rz-gallery-stage-wrap,.rz-gallery-stage{max-width:100%;}
.rz-product-slider{max-width:100%; overflow:hidden;}
.rz-product-slider-track{max-width:100%; overflow-x:auto;}
.rz-crumb{font-size:12.5px; color:var(--ink3);}
.rz-crumb b{color:var(--ink2); font-weight:400;}
.rz-gallery{position:sticky; top:150px;}
.rz-gallery__row{display:flex; gap:14px;}
.rz-gallery__thumbs{display:flex; flex-direction:column; gap:10px;}
.rz-gthumb{width:64px; height:76px; border-radius:10px; border:2px solid var(--line2); flex-shrink:0; overflow:hidden; padding:0; background:#fff;}
.rz-gthumb img{width:100%; height:100%; object-fit:cover;}
.rz-gthumb.is-active{border-color:var(--ink);}
.rz-gmain{position:relative; flex:1; aspect-ratio:4/5; border-radius:18px; overflow:hidden;}
.rz-gmain img{width:100%; height:100%; object-fit:cover;}
.rz-gmain__badge{position:absolute; top:16px; left:16px; color:#fff; font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; background:var(--red); z-index:2;}
.rz-gmain__acts{position:absolute; bottom:16px; right:16px; display:flex; gap:8px; z-index:2;}
.rz-gmain__acts button,.rz-gmain__acts a{width:42px; height:42px; border-radius:999px; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;}

.rz-buy__cat{font-size:12.5px; color:var(--ink3); margin-bottom:6px;}
.rz-buy h1{font-size:clamp(21px,2.7vw,30px); margin-bottom:12px;}
.rz-buy__meta{display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
.rz-buy__meta .rz-stars{font-size:16px; letter-spacing:1.5px;}
.rz-buy__meta a{font-size:13.5px; color:var(--ink2); text-decoration:underline;}
.rz-buy__meta .rz-sku{font-size:12.5px; color:var(--ink3);}
/* price.tpl (the real JTL price template) outputs the price PLUS tax/min-order notes and
   the tier-price table. Flex+baseline was jamming them into one row → "everything mixed".
   Stack them as a clean block and give each piece its own rhythm. */
.rz-buy__price{display:block; margin-bottom:18px;}
.rz-buy__price .price{display:inline-block; font-family:var(--head) !important; font-weight:700 !important; font-size:34px !important; color:var(--ink) !important; line-height:1.1;}
.rz-buy__price .min-value-wrapper{font-size:12.5px; color:var(--ink3); margin-top:6px;}
.rz-buy__price .suggested-price,.rz-buy__price .yousave,.rz-buy__price .discount,.rz-buy__price .text-stroke,.rz-buy__price .text-danger{display:block; font-size:13px; color:var(--ink3); margin-top:4px; text-align:left;}
.rz-buy__price .yousave{color:var(--ok);}
/* Staffelpreise (tier pricing, JTL Wawi) → designed "Mengenrabatt" card:
   soft titled header + hairline tier rows, quantity left / red unit price right. */
.rz-buy__price .bulk-prices{margin-top:18px; max-width:360px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:0 1px 2px rgba(27,26,22,.04);}
.rz-buy__price .bulk-prices::before{content:"Mengenrabatt \2014 mehr sparen"; display:block; padding:11px 16px; font-family:var(--head); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink); background:var(--soft); border-bottom:1px solid var(--line);}
.rz-buy__price .bulk-prices table{width:100%; margin:0; border-collapse:collapse; font-size:14px; background:none;}
.rz-buy__price .bulk-prices thead th{font-family:var(--head); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink3); padding:12px 16px 8px !important; border:0 !important; text-align:left; background:none !important;}
.rz-buy__price .bulk-prices thead th + th{text-align:right;}
.rz-buy__price .bulk-prices tbody td{padding:11px 16px !important; border:0 !important; border-top:1px solid var(--line) !important; color:var(--ink); background:none !important; vertical-align:middle;}
.rz-buy__price .bulk-prices tbody td:first-child{font-weight:700; color:var(--ink2);}
.rz-buy__price .bulk-prices tbody td + td{text-align:right;}
.rz-buy__price .bulk-prices .bulk-price{color:var(--redink); font-weight:700;}
.rz-buy__price .bulk-prices .bulk-base-price{color:var(--ink3); font-weight:400; font-size:12px;}
.rz-buy__price .bulk-prices tbody tr:hover td{background:var(--soft) !important;}
.rz-buy__price .now{font-family:var(--head); font-weight:700; font-size:34px; color:var(--ink);}
.rz-buy__price.is-sale .now{color:var(--redink);}
.rz-buy__price .old{font-size:18px; color:var(--ink3); text-decoration:line-through;}
.rz-buy__price .pct{background:var(--red); color:#fff; font-size:12px; font-weight:700; padding:4px 9px; border-radius:6px;}
.rz-buy__tax{font-size:12.5px; color:var(--ink3); margin-bottom:22px;}
.rz-buy__tax a{text-decoration:underline;}
.rz-buy__desc{color:var(--ink2); line-height:1.6; margin-bottom:24px;}
.rz-varhead{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; font-family:var(--head); font-weight:600; font-size:14.5px; color:var(--ink);}
.rz-varhead b{font-weight:700; font-size:14px;}
.rz-varhead span{font-size:13.5px; color:var(--ink2);}
.rz-varblock{margin-bottom:20px;}
.rz-varblock--size{margin-bottom:24px;}
.rz-colorsw{display:flex; gap:11px; flex-wrap:wrap;}
.rz-colorsw button,.rz-colorsw label{width:42px; height:42px; border-radius:999px; border:2px solid var(--line2); box-shadow:0 0 0 3px #fff inset; cursor:pointer;}
.rz-colorsw .is-active{border-color:var(--ink);}
.rz-sizes{display:flex; gap:10px; flex-wrap:wrap;}
.rz-sizes button,.rz-sizes label{padding:11px 18px; border-radius:10px; border:1.5px solid var(--line2); background:#fff; color:var(--ink); font-weight:600; font-size:13.5px; cursor:pointer;}
.rz-sizes .is-active{border-color:var(--ink); background:var(--ink); color:#fff;}

/* ---- variation SELECTBOX: jtl.article.js wraps every .variations <select> in
   bootstrap-select, so the VISIBLE control is its .dropdown-toggle button + .dropdown-menu
   list (the native .rz-select is hidden underneath). Style them to the rz field so the
   open list is a clean floating dropdown, not an unstyled block. ---- */
.variations .bootstrap-select,.variations .bootstrap-select.form-control,.variations .bootstrap-select.rz-select{
  width:100% !important; border:0 !important; padding:0 !important; margin:0 !important; min-height:0 !important; height:auto !important;
  background:none !important; background-image:none !important; box-shadow:none !important;}
.variations .bootstrap-select > .dropdown-toggle,.variations .bootstrap-select > button.dropdown-toggle{
  width:100% !important; min-height:50px; display:flex !important; align-items:center; position:relative;
  border:1px solid var(--line2) !important; border-radius:12px !important; background:#fff !important;
  color:var(--ink) !important; padding:12px 46px 12px 16px !important; box-shadow:none !important; outline:none !important;
  font-family:var(--body) !important; font-size:15px !important; font-weight:500 !important; white-space:nowrap;}
.variations .bootstrap-select > .dropdown-toggle:hover{border-color:var(--ink3) !important;}
.variations .bootstrap-select.show > .dropdown-toggle,
.variations .bootstrap-select > .dropdown-toggle:focus,
.variations .bootstrap-select > .dropdown-toggle:active{border-color:var(--ink) !important; box-shadow:none !important; outline:none !important; background:#fff !important; color:var(--ink) !important;}
.variations .bootstrap-select > .dropdown-toggle .filter-option-inner-inner{color:var(--ink) !important; font-weight:500;}
.variations .bootstrap-select > .dropdown-toggle::after{
  content:"" !important; border:0 !important; width:16px; height:16px; margin:0; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231b1a16' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:15px;}
.variations .bootstrap-select .dropdown-menu{
  border:1px solid var(--line) !important; border-radius:14px !important; box-shadow:var(--sh-drop) !important;
  padding:6px !important; margin-top:6px !important; background:#fff !important; overflow:hidden;}
.variations .bootstrap-select .dropdown-menu .inner{padding:0 !important; max-height:320px !important; overflow-y:auto;}
.variations .bootstrap-select .dropdown-menu ul{padding:0 !important; margin:0 !important;}
.variations .bootstrap-select .dropdown-menu li{margin:0 !important;}
.variations .bootstrap-select .dropdown-menu li a,.variations .bootstrap-select .dropdown-item{
  border-radius:9px !important; padding:10px 12px !important; color:var(--ink) !important; font-size:14.5px !important; outline:none !important;}
.variations .bootstrap-select .dropdown-menu li a .text{color:inherit !important;}
.variations .bootstrap-select .dropdown-menu li a:hover,.variations .bootstrap-select .dropdown-menu li a:focus,
.variations .bootstrap-select .dropdown-menu li a.active,.variations .bootstrap-select .dropdown-menu li.selected a,
.variations .bootstrap-select .dropdown-item:hover,.variations .bootstrap-select .dropdown-item.active{
  background:var(--soft) !important; color:var(--ink) !important;}
.variations .bootstrap-select .no-results{padding:10px 12px; color:var(--ink3); font-size:13.5px;}
.rz-stock{display:flex; align-items:center; gap:9px; margin-bottom:20px; font-size:14px; flex-wrap:wrap;}
.rz-stock__dot{width:9px; height:9px; border-radius:999px; background:#3a9d5d;}
.rz-stock__on{color:var(--ok); font-weight:600;}
.rz-stock__note{color:var(--ink3);}
.rz-buyrow{display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; align-items:stretch;}
.rz-qty{display:flex; align-items:center; border:1.5px solid var(--line2); border-radius:16px; background:#fff; min-width:150px;}
/* value + unit centred as a group between the − / + buttons */
.rz-qty__mid{flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:5px; min-width:0;}
.rz-qty button{width:46px; height:56px; font-size:20px; color:var(--ink); transition:background .15s ease;}
.rz-qty button:hover{background:var(--soft);}
.rz-qty__val{min-width:38px; text-align:center; font-weight:700; font-size:16px;}
.rz-qty input{width:44px; text-align:center; font-weight:700; font-size:16px; border:none; background:none; outline:none; -moz-appearance:textfield;}
.rz-qty input::-webkit-outer-spin-button,.rz-qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
/* Refined-ink CTA: equal height with the stepper (56px), softer 16px corners, a soft
   ink drop-shadow, and a subtle lift on hover (press-down on click). */
.rz-addbig{flex:1; min-width:200px; background:var(--ink); color:#fff; border-radius:16px; padding:0 22px; min-height:56px;
  font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 10px 24px rgba(27,26,22,.18); transition:transform .18s ease, box-shadow .18s ease;}
.rz-addbig:hover{color:#fff; transform:translateY(-2px); box-shadow:0 16px 32px rgba(27,26,22,.26);}
.rz-addbig:active{transform:translateY(0); box-shadow:0 8px 20px rgba(27,26,22,.2);}
/* Perfectly centre the label + icon. The button holds TWO children — the visible
   label span AND a success-checkmark <svg>; left inline, the svg is a flex sibling that
   shoves the text off-centre. Make the svg an absolute overlay so only the label centres. */
.rz-addbig{position:relative;}
.rz-addbig .btn-basket-check{display:inline-flex; align-items:center; justify-content:center; gap:8px; line-height:1; margin:0;}
.rz-addbig > svg{position:absolute; top:50%; left:50%; width:28px; height:28px; transform:translate(-50%,-50%); pointer-events:none;}
.rz-trust{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0; padding:18px 20px; background:var(--soft); border:1px solid var(--line); border-radius:14px;}
.rz-trust li{display:flex; align-items:center; gap:9px; font-size:13.5px;}
.rz-facts{border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.rz-facts__h{padding:14px 18px; font-weight:700; font-size:14px; background:var(--soft); border-bottom:1px solid var(--line);}
.rz-facts li{display:flex; justify-content:space-between; padding:12px 18px; font-size:13.5px; border-bottom:1px solid var(--line);}
.rz-facts li:last-child{border-bottom:none;}
.rz-facts li span:first-child{color:var(--ink3);}
.rz-facts li span:last-child{font-weight:600; text-align:right;}

.rz-tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:24px; overflow-x:auto;}
.rz-tabs button,.rz-tabs a{padding:14px 18px; font-weight:600; font-size:15px; color:var(--ink3); border-bottom:2px solid transparent; white-space:nowrap;}
.rz-tabs .is-active{color:var(--ink); border-bottom-color:var(--ink);}
.rz-tabpane{max-width:900px;}
.rz-desc2{display:grid; grid-template-columns:1.4fr 1fr; gap:30px; max-width:900px;}
.rz-desc2 p{color:var(--ink2); line-height:1.7; margin-bottom:16px;}
.rz-featlist{display:flex; flex-direction:column; gap:12px;}
.rz-featlist li{display:flex; gap:10px; font-size:14px; color:var(--ink2);}
.rz-featlist li span{color:var(--red);}
.rz-reviews{display:grid; grid-template-columns:280px 1fr; gap:30px;}
.rz-rsum{background:var(--soft); border:1px solid var(--line); border-radius:16px; padding:24px; align-self:start;}
.rz-rsum__big{font-family:var(--head); font-size:46px; font-weight:700;}
.rz-rsum__stars{color:var(--star); font-size:16px; letter-spacing:1.5px; margin:4px 0;}
.rz-rsum__n{font-size:13px; color:var(--ink2); margin-bottom:16px;}
.rz-rbar{display:flex; align-items:center; gap:8px; margin-bottom:7px; font-size:12.5px;}
.rz-rbar__l{width:34px; color:var(--ink2);}
.rz-rbar__track{flex:1; height:7px; background:var(--line2); border-radius:4px; overflow:hidden;}
.rz-rbar__fill{display:block; height:100%; background:var(--star);}
.rz-rvlist{display:flex; flex-direction:column; gap:16px;}
.rz-rv{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px;}
.rz-rv__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.rz-rv__top .rz-stars{letter-spacing:1px;}
.rz-rv__date{font-size:12px; color:var(--ink3);}
.rz-rv__title{font-weight:700; margin-bottom:6px;}
.rz-rv p{color:var(--ink2); font-size:14px; line-height:1.6; margin-bottom:10px;}
.rz-rv__by{font-size:12.5px; color:var(--ink3);}
.rz-rv__by .ok{color:var(--ok);}

/* --------------------------------------------------------------------- CART */
.rz-pagehead{margin-bottom:26px;}
.rz-pagehead h1{font-size:clamp(30px,4vw,44px); margin-top:6px;}
.rz-pagehead p{color:var(--ink2); margin-top:6px;}
.rz-empty{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:70px 22px; text-align:center;}
.rz-empty__ic{font-size:52px; margin-bottom:16px;}
.rz-empty h2{font-size:24px; margin-bottom:10px;}
.rz-empty p{color:var(--ink2); max-width:440px; margin:0 auto 24px; line-height:1.5;}
.rz-cart{display:grid; grid-template-columns:1fr 360px; gap:24px; align-items:start;}
.rz-citems{background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden;}
.rz-citem{display:flex; gap:18px; padding:20px 22px; border-bottom:1px solid var(--line);}
.rz-citem__media{width:96px; height:118px; border-radius:12px; flex-shrink:0; overflow:hidden;}
.rz-citem__media img{width:100%; height:100%; object-fit:cover;}
.rz-citem__body{flex:1; min-width:0; display:flex; flex-direction:column;}
.rz-citem__top{display:flex; justify-content:space-between; gap:12px;}
.rz-citem__cat{font-size:11.5px; color:var(--ink3);}
.rz-citem__name{font-weight:600; font-size:16px; margin:2px 0;}
.rz-citem__var{font-size:13px; color:var(--ink2);}
.rz-citem__rm{color:var(--ink3); font-size:20px; line-height:1; height:fit-content;}
.rz-citem__rm:hover{color:var(--red);}
/* wishlist + delete sit side by side; the stock template skins the wishlist button as a red
   circle while the delete stays a bare box. Normalize both to quiet icon buttons. */
.rz-citem__topactions{display:flex; align-items:center; gap:4px;}
.rz-citem__topactions .btn,.rz-citem__topactions button,.rz-citem__topactions a{
  background:none !important; border:none !important; box-shadow:none !important;
  width:32px; height:32px; min-width:0; padding:0 !important; margin:0 !important; border-radius:8px;
  display:inline-flex !important; align-items:center; justify-content:center;
  color:var(--ink3) !important; line-height:1;}
.rz-citem__topactions .btn:hover,.rz-citem__topactions button:hover,.rz-citem__topactions a:hover{
  background:var(--soft) !important; color:var(--red) !important;}
.rz-citem__topactions .rz-citem__rm{font-size:20px !important;}
.rz-citem__topactions i,.rz-citem__topactions svg{font-size:15px; width:15px; height:15px;}
/* the stock template adds its own caret to [data-toggle=collapse]; we already render one */
.rz-coupon-toggle::after,.rz-coupon-toggle::before{content:none !important; display:none !important;}
.rz-citem__foot{margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between;}
.rz-qty--pill{border-radius:999px;}
.rz-qty--pill button{width:34px; height:34px; font-size:17px;}
.rz-qty--pill .rz-qty__val{min-width:28px;}
.rz-qty--pill input{height:34px;}
.rz-citem__linetot{text-align:right;}
.rz-citem__linetot b{font-weight:700; font-size:18px; display:block;}
.rz-citem__linetot span{font-size:12px; color:var(--ink3);}
.rz-cartcont{padding:18px 22px;}
.rz-cartcont a{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--ink2);}
.rz-summary{position:sticky; top:150px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px;}
.rz-summary__t{font-family:var(--head); font-weight:700; font-size:19px; margin-bottom:18px;}
.rz-coupon-toggle{width:100%; display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
  border:1px dashed var(--line2); border-radius:12px; background:var(--soft); margin-bottom:16px; font-weight:600; font-size:14px;}
.rz-coupon-toggle .rz-caret{color:var(--ink3);}
.rz-coupon-row{display:flex; gap:8px; margin-bottom:16px;}
.rz-coupon-row input{flex:1; border:1px solid var(--line2); border-radius:10px; padding:11px 14px; outline:none;}
.rz-coupon-row button{background:var(--ink); color:#fff; padding:0 18px; border-radius:10px; font-weight:600;}
.rz-sumline{display:flex; justify-content:space-between; margin-bottom:10px; color:var(--ink2); font-size:14.5px;}
.rz-sumline--tax{color:var(--ink3); font-size:13.5px;}
/* shipping row: "Zzgl. Versandkosten … bei Lieferung nach Deutschland" is a long sentence,
   so break it onto its own line UNDER the "Versand" label instead of cramming it on one row. */
.rz-sumline.shipping-costs{flex-direction:column; align-items:flex-start; gap:3px;}
.rz-sumline.shipping-costs > span:first-child{font-weight:600; color:var(--ink);}
.rz-sumline.shipping-costs > span:last-child{color:var(--ink3); font-size:12.5px; line-height:1.5; font-weight:400;}
.rz-sumrule{height:1px; background:var(--line); margin-bottom:14px;}
.rz-sumtotal{display:flex; justify-content:space-between; margin-bottom:6px; font-weight:700; font-size:20px;}
.rz-suminc{font-size:12px; color:var(--ink3); margin-bottom:16px;}
.rz-freehint{background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:11px 14px; font-size:13px; color:var(--ink2); margin-bottom:16px;}
.rz-summary__trust{display:flex; flex-direction:column; gap:8px; margin-top:6px;}
.rz-summary__trust li{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink2);}

/* ----------------------------------------------------------------- CHECKOUT */
.rz-checkout{max-width:1080px; margin:0 auto;}
.rz-co-head{text-align:center; margin-bottom:26px;}
.rz-co-head h1{font-size:clamp(28px,4vw,40px); margin-top:6px;}
.rz-stepper{display:flex; align-items:center; justify-content:center; margin-bottom:34px; flex-wrap:wrap;}
.rz-step{display:flex; align-items:center; gap:10px;}
.rz-step__badge{width:32px; height:32px; border-radius:999px; background:var(--line2); color:var(--ink2);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;}
.rz-step.is-active .rz-step__badge,.rz-step.is-done .rz-step__badge{background:var(--ink); color:#fff;}
.rz-step__label{font-weight:600; font-size:14px; color:var(--ink3);}
.rz-step.is-active .rz-step__label,.rz-step.is-done .rz-step__label{color:var(--ink);}
.rz-step__line{width:clamp(24px,5vw,60px); height:2px; background:var(--line2); margin:0 8px;}
.rz-cogrid{display:grid; grid-template-columns:1fr 320px; gap:26px; align-items:start;}
.rz-panel{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px;}
.rz-panel h2{font-size:20px; margin-bottom:18px;}
.rz-stack{display:flex; flex-direction:column; gap:20px;}
.rz-formgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.rz-field{display:block;}
.rz-field--full{grid-column:span 2;}
.rz-field > span,.rz-label{font-size:13px; font-weight:600; color:var(--ink2); display:block; margin-bottom:6px;}
.rz-input,.rz-select,.rz-textarea{width:100%; border:1px solid var(--line2); border-radius:10px; padding:12px 14px; outline:none; background:#fff; color:var(--ink);}
.rz-input:focus,.rz-select:focus,.rz-textarea:focus{border-color:var(--ink);}
/* the variation dropdown also carries .custom-select; the `background:#fff` above is a
   shorthand that wiped its arrow, leaving a blank oversized box that read as a broken
   text field. Restore appearance + a real chevron so it clearly looks like a dropdown. */
.rz-select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  cursor:pointer; min-height:50px; line-height:1.3; padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231b1a16' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:15px;
}
.rz-select:hover{border-color:var(--ink3);}
.rz-select::-ms-expand{display:none;}
.rz-textarea{resize:vertical; font-size:15px;}
.rz-inline-check{display:flex; align-items:center; gap:10px; margin-top:16px; font-size:14px; color:var(--ink2); cursor:pointer;}
.rz-inline-check--start{align-items:flex-start; line-height:1.5;}
.rz-inline-check .rz-check__box.is-on{background:var(--ink); border-color:var(--ink);}
.rz-inline-check a{text-decoration:underline;}
.rz-formnav{display:flex; justify-content:space-between; margin-top:24px; gap:12px; flex-wrap:wrap;}
.rz-radios{display:flex; flex-direction:column; gap:12px;}
.rz-radio{display:flex; align-items:center; gap:14px; border:1.5px solid var(--line2); border-radius:12px; padding:16px; cursor:pointer;}
.rz-radio.is-active{border:2px solid var(--ink);}
.rz-radio__dot{width:20px; height:20px; border-radius:999px; border:2px solid var(--line2); flex-shrink:0;}
.rz-radio.is-active .rz-radio__dot{border:6px solid var(--ink);}
.rz-radio__main{flex:1;}
.rz-radio__main b{font-weight:600; display:block;}
.rz-radio__main span{font-size:13px; color:var(--ink2);}
.rz-radio__tag{background:var(--soft); padding:4px 10px; border-radius:6px; font-size:12px; font-weight:700;}
.rz-cocards{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.rz-cocard{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px;}
.rz-cocard__h{display:flex; justify-content:space-between; margin-bottom:10px;}
.rz-cocard__h b{font-weight:700; font-size:14px;}
.rz-cocard__h a{font-size:13px; text-decoration:underline;}
.rz-cocard p{font-size:14px; color:var(--ink2); line-height:1.6;}
.rz-coitems{background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
.rz-coitems__h{padding:16px 20px; font-weight:700; border-bottom:1px solid var(--line);}
.rz-coitem{display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--line);}
.rz-coitem__media{width:52px; height:62px; border-radius:9px; flex-shrink:0; overflow:hidden;}
.rz-coitem__body{flex:1;}
.rz-coitem__body b{font-weight:600; font-size:14.5px; display:block;}
.rz-coitem__body span{font-size:12.5px; color:var(--ink3);}
.rz-done{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:56px 30px; text-align:center;}
.rz-done__ic{width:80px; height:80px; border-radius:999px; background:var(--ok-bg); display:flex; align-items:center; justify-content:center; margin:0 auto 22px;}
.rz-done h2{font-size:clamp(26px,4vw,36px); margin-bottom:12px;}
.rz-done p{color:var(--ink2); max-width:460px; margin:0 auto 8px; line-height:1.6;}
.rz-done__no{color:var(--ink3); font-size:14px; margin-bottom:26px;}
.rz-cosum{position:sticky; top:150px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px;}
.rz-cosum__t{font-weight:700; font-size:17px; margin-bottom:16px;}
.rz-cosum__list{display:flex; flex-direction:column; gap:12px; margin-bottom:16px; max-height:220px; overflow:auto;}
.rz-cosum__row{display:flex; align-items:center; gap:12px;}
.rz-cosum__row .m{width:44px; height:52px; border-radius:8px; flex-shrink:0; overflow:hidden;}

/* ------------------------------------------------------------------ ACCOUNT */
.rz-acct{display:grid; grid-template-columns:256px 1fr; gap:24px; align-items:start;}
.rz-acct-nav{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px;}
.rz-acct-id{display:flex; align-items:center; gap:12px; padding:8px 8px 16px; border-bottom:1px solid var(--line); margin-bottom:10px;}
.rz-acct-id__av{width:44px; height:44px; border-radius:999px; background:linear-gradient(135deg,#c3a988,#a98d68); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;}
.rz-acct-id b{font-weight:700; font-size:14.5px; display:block;}
.rz-acct-id span{font-size:12px; color:var(--ink3); overflow:hidden; text-overflow:ellipsis; display:block; white-space:nowrap;}
.rz-acct-nav a{width:100%; text-align:left; display:flex; align-items:center; gap:11px; padding:12px; border-radius:10px;
  font-weight:600; font-size:14.5px; color:var(--ink2);}
.rz-acct-nav a:hover{background:var(--soft); color:var(--ink);}
.rz-acct-nav a.is-active{background:var(--soft); color:var(--ink);}
.rz-acct-sep{height:1px; background:var(--line); margin:10px 4px;}
.rz-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;}
.rz-stat{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px;}
.rz-stat__k{font-size:13px; color:var(--ink3);}
.rz-stat__v{font-family:var(--head); font-size:30px; font-weight:700;}
.rz-card-plain{background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
.rz-card-plain__h{display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line); font-weight:700;}
.rz-card-plain__h a{font-size:13.5px; text-decoration:underline; font-weight:400;}
.rz-orow{display:flex; align-items:center; gap:14px; padding:16px 20px; border-bottom:1px solid var(--line);}
.rz-orow__ic{width:34px; height:34px; border-radius:9px; background:var(--soft); display:flex; align-items:center; justify-content:center;}
.rz-orow__body{flex:1;}
.rz-orow__body b{font-weight:600; font-size:14.5px; display:block;}
.rz-orow__body span{font-size:12.5px; color:var(--ink3);}
.rz-obadge{font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:999px;}
.rz-obadge--ok{color:var(--ok); background:var(--ok-bg);}
.rz-obadge--ship{color:#8a6d00; background:#fbf1cf;}
.rz-obadge--open{color:var(--ink2); background:var(--soft);}
.rz-otot{font-weight:700; min-width:80px; text-align:right;}
.rz-two{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.rz-infocard{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px;}
.rz-infocard b{font-weight:700; display:block; margin-bottom:10px;}
.rz-infocard p{font-size:14px; color:var(--ink2); line-height:1.6;}
/* account main column: vertical stack of panels (handoff gap:18px) */
.rz-acct-main{display:flex; flex-direction:column; gap:18px; min-width:0;}
.rz-panel--narrow{max-width:460px;}
.rz-account-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px; justify-content:space-between; margin-top:4px;}
.rz-infocard p + p{margin-top:10px; font-size:13px;}
@media (max-width:640px){ .rz-account-actions{flex-direction:column; align-items:stretch;} }

/* --------------------------------------------------------------------- AUTH */
.rz-auth{max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.rz-auth__aside h1{font-size:clamp(30px,4vw,44px); margin:10px 0 16px;}
.rz-auth__aside p{color:var(--ink2); line-height:1.6; margin-bottom:24px; max-width:360px;}
.rz-benefits{display:flex; flex-direction:column; gap:12px;}
.rz-benefits li{display:flex; gap:10px; color:var(--ink2); font-size:14.5px;}
.rz-benefits li span{color:var(--red);}
.rz-authcard{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:30px;}
.rz-authtabs{display:flex; gap:6px; background:var(--soft); border-radius:12px; padding:5px; margin-bottom:24px;}
.rz-authtabs a,.rz-authtabs button{flex:1; text-align:center; padding:11px; border-radius:9px; font-weight:600; font-size:14.5px; color:var(--ink2);}
.rz-authtabs .is-active{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.06);}
.rz-authcard .rz-field{margin-bottom:12px;}
.rz-forgot{text-align:right; margin-bottom:18px;}
.rz-forgot a{font-size:13px; color:var(--ink2); text-decoration:underline;}
.rz-authswitch{text-align:center; font-size:13.5px; color:var(--ink3); margin-top:14px;}
.rz-authswitch a{color:var(--ink); font-weight:600; text-decoration:underline;}

/* ----------------------------------------------------------- CONTENT PAGES */
.rz-404{max-width:760px; margin:0 auto; text-align:center;}
.rz-404__big{font-family:var(--head); font-size:clamp(90px,18vw,180px); font-weight:800; line-height:.9; letter-spacing:-.04em;
  background:linear-gradient(150deg,#c3a988,#9d8261); -webkit-background-clip:text; background-clip:text; color:transparent;}
.rz-404 h1{font-size:clamp(26px,4vw,38px); margin:8px 0 14px;}
.rz-404 p{color:var(--ink2); max-width:480px; margin:0 auto 28px; line-height:1.6;}
.rz-404__cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:40px;}
.rz-404__cats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px;}
.rz-404__cats a{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px; font-weight:600;}
.rz-404__cats a:hover{border-color:var(--ink); color:var(--ink);}

.rz-contact{display:grid; grid-template-columns:1.4fr 1fr; gap:26px; align-items:start;}
.rz-contact__info{display:flex; flex-direction:column; gap:14px;}
.rz-icard{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px;}
.rz-icard__ic{font-size:22px; margin-bottom:8px;}
.rz-icard b{font-weight:700; display:block; margin-bottom:2px;}
.rz-icard .rz-icard__v{font-size:14px; color:var(--ink2);}
/* Google Maps embed / placeholder */
.rz-map{margin-top:26px; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--soft); position:relative;}
.rz-map iframe{display:block; width:100%; height:clamp(280px,38vw,420px); border:0; filter:grayscale(.15) contrast(1.02);}
.rz-map__ph{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  height:clamp(280px,38vw,420px); text-align:center; padding:24px; color:var(--ink2);
  background:repeating-linear-gradient(135deg, rgba(0,0,0,.03) 0 1px, transparent 1px 12px),
    linear-gradient(160deg, #e7e2d6, #d7d1c2);}
.rz-map__ph .ic{font-size:34px;}
.rz-map__ph b{font-family:var(--head); font-size:18px; color:var(--ink);}
.rz-map__ph a{font-weight:600; text-decoration:underline;}

.rz-legaltabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; border-bottom:1px solid var(--line); padding-bottom:14px;}
.rz-legaltabs a{padding:9px 16px; border-radius:999px; font-weight:600; font-size:13.5px; background:var(--soft); color:var(--ink2);}
.rz-legaltabs .is-active{background:var(--ink); color:#fff;}
.rz-legalbody{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:clamp(24px,4vw,44px);
  color:var(--ink2); line-height:1.75; font-size:15px;}
.rz-legalbody p{margin-bottom:16px;}
.rz-legalbody h2,.rz-legalbody h3{color:var(--ink); margin:22px 0 10px;}
.rz-legalbody ul,.rz-legalbody ol{margin:0 0 16px 20px; list-style:revert;}

.rz-blog-head{text-align:center; margin-bottom:32px;}
.rz-blog-head h1{font-size:clamp(30px,4.5vw,48px); margin:8px 0 10px;}
.rz-blog-head p{color:var(--ink2); max-width:520px; margin:0 auto; line-height:1.6;}
.rz-blog-feat{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:20px; overflow:hidden; margin-bottom:26px; background:var(--surface);}
.rz-blog-feat__img{min-height:300px;}
.rz-blog-feat__body{padding:clamp(26px,4vw,44px); display:flex; flex-direction:column; justify-content:center;}
.rz-blog-feat__body h2{font-size:clamp(24px,3vw,34px); margin-bottom:14px;}
.rz-blog-feat__body p{color:var(--ink2); line-height:1.6; margin-bottom:20px; max-width:460px;}
.rz-blog-meta{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--ink3); flex-wrap:wrap;}
.rz-blog-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px;}
.rz-post{background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column;}
.rz-post__img{aspect-ratio:16/10;}
.rz-post__body{padding:20px; display:flex; flex-direction:column; flex:1;}
.rz-post__body h3{font-size:18px; line-height:1.25; margin-bottom:10px;}
.rz-post__body p{font-size:14px; color:var(--ink2); line-height:1.55; margin-bottom:16px;}
.rz-post__meta{margin-top:auto; display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink3);}

/* ------------------------------------------------------------ COMPARE table */
.rz-comptable-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:18px; background:var(--surface);}
.rz-comptable{width:100%; border-collapse:collapse; min-width:640px;}
.rz-comptable th{padding:18px 16px; text-align:left; border-bottom:1px solid var(--line); border-left:1px solid var(--line); vertical-align:top;}
.rz-comptable th:first-child{width:150px; padding:18px 20px; vertical-align:bottom; border-left:none; font-size:13px; color:var(--ink3); font-weight:600;}
.rz-comptable td{padding:14px 16px; font-size:14px; border-bottom:1px solid var(--line); border-left:1px solid var(--line);}
.rz-comptable td:first-child{padding:14px 20px; font-size:13.5px; color:var(--ink3); font-weight:600; background:var(--soft); border-left:none;}
.rz-comphead{position:relative;}
.rz-comphead__media{display:block; width:100%; aspect-ratio:1/1; border-radius:12px; margin-bottom:12px; overflow:hidden;}
.rz-comphead__name{font-weight:600; font-size:14.5px; display:block; margin-bottom:6px;}
.rz-comphead__rm{position:absolute; top:0; right:0; color:var(--ink3); font-size:18px; line-height:1;}
.rz-comphead__rm:hover{color:var(--red);}

/* ----------------------------------------------------------------- utilities */
.rz-sec{max-width:var(--maxw); margin:0 auto; padding:24px 22px;}
/* PDP sections (parts list, cross-sell) carry a bare h2.rz rather than .rz-sec-head,
   and h1/h2/h3.rz reset margin to 0 — without this the heading sits flush on the grid. */
.rz-sec > h2.rz{font-size:clamp(22px,2.6vw,30px); margin-bottom:18px;}
/* product bundle summary bar (productdetails/bundle.tpl) */
.rz-bundle__foot{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:16px 20px; margin-top:18px;}
.rz-bundle__sum{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; min-width:0;}
.rz-bundle__label{font-size:13.5px; color:var(--ink2);}
.rz-bundle__price{font-family:var(--head); font-weight:700; font-size:22px; color:var(--ink);}
.rz-bundle__save{
  background:var(--ok-bg); color:var(--ok); border-radius:999px;
  padding:3px 10px; font-size:12.5px; font-weight:600;}
.rz-bundle__vpe{font-size:12.5px; color:var(--ink3);}
@media (max-width:560px){
  .rz-bundle__foot{align-items:stretch;}
  .rz-bundle__foot .rz-btn{width:100%;}
}
.rz-sec--tight{padding:14px 22px 24px;}
.rz-sec--flush{padding-left:22px; padding-right:22px;}
.rz-hide{display:none !important;}
.rz-mt0{margin-top:0 !important;}

/* --------------------------------------------------------------- responsive */
@media (max-width:900px){
  .rz-listing{grid-template-columns:1fr;}
  .rz-filters{display:none;}
  .rz-pdp{grid-template-columns:1fr;}
  .rz-gallery{position:static;}
  .rz-gallery__row{flex-direction:column-reverse;}
  .rz-gallery__thumbs{flex-direction:row; overflow-x:auto;}
  .rz-cart{grid-template-columns:1fr;}
  .rz-summary,.rz-cosum{position:static;}
  .rz-cogrid{grid-template-columns:1fr;}
  .rz-acct{grid-template-columns:1fr;}
  .rz-auth{grid-template-columns:1fr;}
  .rz-auth__aside{display:none;}
  .rz-contact{grid-template-columns:1fr;}
  .rz-blog-feat{grid-template-columns:1fr;}
  .rz-promo{grid-template-columns:1fr;}
  .rz-nl{grid-template-columns:1fr;}
  .rz-desc2,.rz-reviews{grid-template-columns:1fr;}
  .rz-cocards,.rz-two{grid-template-columns:1fr;}
  .rz-mosaic{grid-template-columns:1fr 1fr; grid-auto-rows:160px;}
  .rz-tile--big{grid-column:span 2; grid-row:span 1;}
}
@media (max-width:560px){
  .rz-formgrid{grid-template-columns:1fr;}
  .rz-field--full{grid-column:span 1;}
  .rz-trust{grid-template-columns:1fr;}
  .rz-mosaic{grid-template-columns:1fr;}
  .rz-tile--big{grid-column:span 1;}
}

/* ============================================================================
   LISTING BRIDGE — restyle the stock template's productlist toolbar / sort / view-toggle /
   pagination / filter sidebar to the handoff look (their markup is JS-bound, so
   we skin it in place instead of replacing it).
   ============================================================================ */
#result-wrapper{max-width:var(--maxw); margin:0 auto; padding:22px;}
.rz-cathero + #product-list-type + *,
#result-wrapper > .rz-toolbar{margin-top:8px;}
/* HARDENED product grid — #product-list is an ID, so force the grid. The card is
   the grid item now; any legacy .product-wrapper is flattened with display:contents
   so its child becomes the grid item instead of collapsing to a sliver. */
/* exactly 5 per row on desktop (was auto-fill, which drifted to 6 on wide screens),
   stepping down cleanly so cards never get too narrow. minmax(0,1fr) lets them
   share the row evenly instead of overflowing. */
#product-list.rz-plist{display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:16px !important; align-items:stretch;}
@media (max-width:1400px){#product-list.rz-plist{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}}
@media (max-width:1050px){#product-list.rz-plist{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}}
@media (max-width:700px){#product-list.rz-plist{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media (max-width:420px){#product-list.rz-plist{grid-template-columns:repeat(1,minmax(0,1fr)) !important;}}
#product-list.rz-plist > .product-wrapper{display:contents !important;}
#product-list.rz-plist > .rz-card,
#product-list.rz-plist > .product-wrapper > .rz-card{
  width:auto !important; min-width:0 !important; max-width:none !important;
  margin:0 !important; padding:0 !important; float:none !important;}
#product-list.rz-plist .rz-card__media img{width:100% !important; height:100% !important; object-fit:contain !important; object-position:center; padding:10px; box-sizing:border-box;}
/* toolbar row */
.productlist-page-nav.rz-toolbar{margin:0 0 16px !important; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.productlist-page-nav.rz-toolbar > [class*="col"]{padding:0; width:auto; max-width:none; flex:0 0 auto; margin:0;}
/* toolbar header (redesign): no card look — transparent + borderless — and it scrolls
   horizontally WITHIN itself instead of wrapping / widening the page. */
.rz-toolbar-header,.rz-toolbar-footer{background:transparent !important; background-color:transparent !important;
  border:0 !important; box-shadow:none !important;
  flex-wrap:nowrap !important; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;}
.rz-toolbar-header::-webkit-scrollbar,.rz-toolbar-footer::-webkit-scrollbar{height:0 !important; width:0 !important;}

/* ---- (a) breadcrumb moved INTO the category hero ----
   hide the page-level breadcrumb on all listing pages; the hero renders its own. */
#content-wrapper.is-item-list .breadcrumb-container{display:none !important;}
.rz-cathero__crumb{position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  font-size:12.5px; margin-bottom:12px; color:#f3efe6;}
.rz-cathero__crumb a{color:#f3efe6; opacity:.88; text-decoration:none;}
.rz-cathero__crumb a:hover{opacity:1; text-decoration:underline;}
.rz-cathero__crumb .sep{opacity:.5;}
.rz-cathero__crumb .is-current{color:#fff; font-weight:600;}
/* plain (imageless) hero is light → dark crumb so it stays readable */
.rz-cathero--plain .rz-cathero__crumb{color:var(--ink2);}
.rz-cathero--plain .rz-cathero__crumb a{color:var(--ink2);}
.rz-cathero--plain .rz-cathero__crumb .is-current{color:var(--ink);}
/* the breadcrumb row used to sit between the top menu and the content and gave it
   breathing room; with the breadcrumb now inside the hero, add that gap back so the
   filters + hero don't butt straight against the category nav. */
#content-wrapper.is-item-list{padding-top:clamp(24px,2.6vw,44px);}

/* ---- (b) listing uses more of the window (less empty left/right margin) ----
   The listing was capped ~1250px (container-fluid-xl) and centred, leaving a wide
   margin. Widen the container + the inner wrappers so the rail/breadcrumb sit near
   the window edge. Other page types keep their normal container. */
@media (min-width:1200px){
  #content-wrapper.is-item-list{max-width:min(1860px,97vw) !important; margin-left:auto !important; margin-right:auto !important;
    padding-left:clamp(20px,2vw,38px) !important; padding-right:clamp(20px,2vw,38px) !important;}
  #content-wrapper.is-item-list #result-wrapper{max-width:none; padding-left:0; padding-right:0;}
  #content-wrapper.is-item-list .rz-cathero__in.rz-wrap{max-width:none;}
}
.productlist-item-info{font-size:13.5px; color:var(--ink2);}
.productlist-page-nav-top,.productlist-page-nav-bottom,hr.productlist-page-nav-top,hr.productlist-page-nav-bottom{border:0; border-top:1px solid var(--line); margin:20px 0;}
/* the shared rule above zeroes the top margin on BOTH toolbars, which left the
   footer pagination butting straight against the last row of products */
#product-list.rz-plist{margin-bottom:30px !important;}
.productlist-page-nav.rz-toolbar-footer{margin-top:30px !important; margin-bottom:8px !important;}
/* Sidebar filter accordions open/close INSTANTLY. The previous .3s height slide made
   the page-load settle (the stock template re-applies remembered open/closed filter state via JS on
   load) play out as a visible "filter slides open then closes" flash. Instant toggling
   removes the flash outright and still works for user clicks; Bootstrap 4's
   emulateTransitionEnd timer fires the collapse cleanup even with no transition. */
#sidepanel_left .collapsing,#collapseFilter .collapsing,.js-collapse-filter .collapsing,
.productlist-filter .collapsing,.box .collapsing{
  transition:none !important; overflow:hidden;}
/* the modal/off-canvas filter (mobile) keeps a gentle slide */
#collapseFilter.modal .collapsing{transition:height .25s ease !important;}
#sidepanel_left [data-toggle="collapse"]{cursor:pointer;}
/* any sidebar link the stock template still paints with the accent colour (e.g. "Alle anzeigen") */
#sidepanel_left a:not(.btn):not(.rz-btn){color:var(--ink2) !important;}
#sidepanel_left a:not(.btn):not(.rz-btn):hover{color:var(--red) !important;}
.displayoptions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
/* sort + per-page dropdowns → pill */
.rz-toolbar .btn-group > .btn,.rz-toolbar .dropdown-toggle,#js-filters,#improve_search .btn{
  border:1px solid var(--line2) !important; background:#fff !important; color:var(--ink) !important;
  border-radius:999px !important; padding:9px 16px !important; font-size:13.5px !important; font-weight:600 !important; box-shadow:none !important;}
.rz-toolbar .dropdown-menu{border:1px solid var(--line); border-radius:12px; box-shadow:var(--sh-drop); padding:6px; margin-top:6px;}
.rz-toolbar .dropdown-item{border-radius:8px; padding:8px 12px; font-size:14px; color:var(--ink);}
.rz-toolbar .dropdown-item.active,.rz-toolbar .dropdown-item:active,.rz-toolbar .dropdown-item:hover{background:var(--soft) !important; color:var(--ink) !important;}
/* view toggle (gallery/list) */
.btn-option.ed{border:1px solid var(--line2) !important; background:#fff !important; color:var(--ink3) !important;
  width:38px; height:38px; display:inline-flex !important; align-items:center; justify-content:center; box-shadow:none !important; border-radius:0 !important;}
.btn-group > .btn-option.ed:first-child{border-radius:10px 0 0 10px !important;}
.btn-group > .btn-option.ed:last-child{border-radius:0 10px 10px 0 !important; border-left:0 !important;}
.btn-option.ed.active{background:var(--ink) !important; color:#fff !important; border-color:var(--ink) !important;}
/* pagination → pill */
.navbar-pagination .pagination{gap:6px; display:flex; margin:0; padding:0; flex-wrap:wrap;}
.navbar-pagination .page-item{list-style:none;}
.navbar-pagination .page-link,.navbar-pagination .dropdown-toggle{min-width:40px; height:40px; border-radius:10px !important;
  border:1px solid var(--line2) !important; background:#fff !important; color:var(--ink) !important;
  display:inline-flex !important; align-items:center; justify-content:center; font-weight:600 !important; box-shadow:none !important; padding:0 12px;}
.navbar-pagination .page-item.active .page-link,.navbar-pagination .dropdown-item.active .page-link{
  background:var(--ink) !important; color:#fff !important; border-color:var(--ink) !important;}
.navbar-pagination .page-item.disabled .page-link{color:var(--ink3) !important; opacity:.6;}
.productlist-pagination{margin-top:4px;}
/* filter sidebar (the stock template left boxes) → rz facet cards.
   the stock template emits .box > .productlist-filter-headline + .nav-panel > ul.nav > li > .nav-link,
   and paints every .nav-link with --primary. Left alone the whole column reads as a
   wall of red links in unbranded boxes, so each of those hooks is skinned here. */
#sidepanel_left{position:sticky; top:150px; align-self:flex-start; display:flex; flex-direction:column;}
/* a facet rail does not need a third of the viewport — and the stock template
   pushes the content column right (justify-end + ml-auto), leaving a big empty
   gap beside the filters. Sit the content right next to the rail and let it use
   the full remaining width (wider product area, filters closer to the content). */
@media (min-width:992px){
  #content > .row.justify-content-lg-end{justify-content:flex-start !important;}
  #content > .row.justify-content-lg-end > #sidepanel_left{flex:0 0 325px !important; max-width:325px !important;}
  #content > .row.justify-content-lg-end > .col-lg-8,
  #content > .row.justify-content-lg-end > .col-xl-9{
    margin-left:0 !important; flex:1 1 0 !important; max-width:none !important;}
}
#sidepanel_left .box,#sidepanel_left .filterbox,#sidepanel_left .card{
  background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:14px !important;
  margin-bottom:14px !important; box-shadow:none !important; overflow:hidden; padding-bottom:6px;}
/* headings — eyebrow caps, matching the section heads elsewhere */
#sidepanel_left .productlist-filter-headline,#sidepanel_left .box-normal-link,
#sidepanel_left .card-header,#sidepanel_left .filter-title,#sidepanel_left .box-title{
  font-family:var(--head) !important; font-weight:700 !important; font-size:11.5px !important;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink) !important;
  background:transparent !important; border:0 !important; padding:14px 16px 8px !important;
  align-items:center; justify-content:space-between; gap:8px;}
/* .productlist-filter-headline already carries d-md-flex; .box-normal-link is the
   mobile accordion header and razan.css display:none's it at >=768px — so never
   force display here or both headings render side by side on desktop. */
#sidepanel_left .productlist-filter-headline{display:flex;}
@media (max-width:767.98px){#sidepanel_left .box-normal-link{display:flex;}}
/* desktop: hide the mobile accordion toggle so the categories box isn't titled twice */
@media (min-width:768px){#sidepanel_left .box-normal-link{display:none !important;}}
/* footer link groups have the SAME double-title issue (mobile toggle + desktop title):
   hide the toggle on desktop so "Informationen" / "Gesetzliche Informationen" don't repeat */
@media (min-width:768px){.rz-footer-col .box-normal-link,#footer-boxes .box-normal-link{display:none !important;}}
/* space between the active-filter chips and the product grid (per request) */
#result-wrapper .active-filters,.rz-cart-page .active-filters,.active-filters{margin:2px 0 22px !important;}
/* "Vertrag widerrufen" (consent-withdrawal) → red pill button (button.png).
   This is the ONE sanctioned red CTA, so it must beat the BUTTON BRIDGE below
   (which forces every .btn-primary to ink at up to .btn-primary:not(:disabled)
   :not(.disabled):active = specificity 0,4,0). These selectors are 0,4,1 so they
   win, and we null BOTH the `background` shorthand and `background-color` longhand
   plus the gradient image, exactly as the bridge does. */
a.btn.btn-primary.css-withdrawal-button,
a.btn.btn-primary.css-withdrawal-button:not(.disabled),
a.btn.btn-primary.css-withdrawal-button:active{
  background:var(--red) !important; background-color:var(--red) !important; background-image:none !important;
  border:0 !important; color:#fff !important; border-radius:999px !important; padding:9px 22px !important;
  font-weight:600 !important; box-shadow:none !important;
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;}
a.btn.btn-primary.css-withdrawal-button:hover,
a.btn.btn-primary.css-withdrawal-button:focus{
  background:var(--redink) !important; background-color:var(--redink) !important; color:#fff !important; text-decoration:none;}
/* fallback if a JTL version renders it without .btn-primary (bridge then absent) */
a.css-withdrawal-button,button.css-withdrawal-button,.css-withdrawal-button{
  background:var(--red) !important; background-image:none !important; color:#fff !important; border:0 !important;
  border-radius:999px !important; padding:9px 22px !important; font-weight:600 !important; box-shadow:none !important;
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;}
#sidepanel_left .box-normal-link:hover{color:var(--ink) !important; text-decoration:none;}
/* facet links */
#sidepanel_left .nav{flex-direction:column; margin:0; padding:0;}
#sidepanel_left .nav-item{list-style:none;}
#sidepanel_left .nav-link,#sidepanel_left .nav-link > a{
  color:var(--ink2) !important; font-size:14px !important; font-weight:500 !important;
  line-height:1.35; border:0 !important; border-radius:0 !important; text-decoration:none;
  display:flex; align-items:center; justify-content:space-between; gap:8px;}
#sidepanel_left .nav-link{padding:7px 16px !important;}
#sidepanel_left .nav-link > a{padding:0 !important; flex:1 1 auto; min-width:0;}
#sidepanel_left .nav-link:hover,#sidepanel_left .nav-link:hover > a,
#sidepanel_left .nav-link:focus,#sidepanel_left .active > .nav-link,#sidepanel_left .nav-link.active{
  color:var(--ink) !important; background:var(--soft) !important;}
/* nested category levels — hairline rail + indent instead of deeper red lists */
#sidepanel_left .snippets-categories-collapse{margin:0 0 4px 16px; border-left:1px solid var(--line);}
#sidepanel_left .snippets-categories-nav-link-child{font-size:13.5px !important; color:var(--ink3) !important;}
/* caret — the stock template's solid triangle → a clean chevron that flips open/closed.
   A two-border box rotated 45° is the chevron; keep it square, size via box-sizing,
   and do the vertical centering with translateY applied BEFORE the rotate (screen
   space) so it never skews. The previous rule chained translate AFTER rotate, which
   moved the glyph along its rotated axis and rendered as a lopsided diagonal mark. */
#sidepanel_left .dropdown-toggle::after{
  content:''; display:inline-block; box-sizing:border-box; flex:0 0 auto;
  width:7px; height:7px; margin-left:8px; border:0;
  border-right:1.5px solid var(--ink3); border-bottom:1.5px solid var(--ink3);
  transform:translateY(-2px) rotate(45deg); transform-origin:center;
  transition:transform .18s ease;}
#sidepanel_left .dropdown-toggle:hover::after{border-color:var(--ink2);}
#sidepanel_left .dropdown-toggle[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg);}
/* filter-box headers (Größe, Farbe, Preisspanne…) are btn-block buttons, so their
   chevron would sit inline right after the label. Make them flex so it lands at the
   right edge, matching the category tree above. */
#sidepanel_left .btn-filter-box.dropdown-toggle{
  display:flex !important; align-items:center; justify-content:space-between; gap:8px;
  width:100%; text-align:left;}
#sidepanel_left .btn-filter-box .characteristic-collapse-btn-inner{flex:1 1 auto; min-width:0;}
/* subcategory image tiles — shown only for CONTAINER categories with no direct products
   (e.g. Arbeitskleidung). Styled as a clean card grid so those pages aren't empty. */
/* ===== Subcategory CARDS on container-category pages (Kategorieseite.html design):
   image header with title overlay + count badge, description, "Beliebte Serien"
   list, and a "Zur Kategorie →" footer bar. Pixel values ported from the prototype. */
#result-wrapper .rz-subcards-wrap{margin:10px 0 30px;}
#result-wrapper .rz-subcards-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px;}
#result-wrapper .rz-subcards-head h2{font-size:clamp(20px,2.4vw,26px); margin:0;}
#result-wrapper .rz-subcards-head p{color:var(--ink2); font-size:14px; margin:5px 0 0;}
#result-wrapper .rz-subcards-all{display:inline-flex; align-items:center; gap:7px; background:var(--ink); color:#fff !important; padding:11px 20px; border-radius:999px; font-weight:600; font-size:14px; white-space:nowrap; text-decoration:none;}
#result-wrapper .rz-subcards-all:hover{background:#000; color:#fff !important;}
#result-wrapper .rz-subcats,
#result-wrapper .rz-subcards{display:grid !important; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:18px; align-items:stretch; margin:0;}
#result-wrapper .rz-subcard{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; height:100%;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;}
#result-wrapper .rz-subcard:hover{border-color:var(--line2); box-shadow:0 16px 38px rgba(27,26,22,.09); transform:translateY(-3px);}
#result-wrapper .rz-subcard__media{position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(150deg,#e7dcc7,#c3a988);}
#result-wrapper .rz-subcard__media img{position:absolute !important; inset:0; width:100% !important; height:100% !important; object-fit:cover !important; display:block; padding:0 !important; margin:0; border-radius:0;}
#result-wrapper .rz-subcard__scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, rgba(20,19,15,.42), rgba(20,19,15,0) 55%);}
#result-wrapper .rz-subcard__count{position:absolute; top:12px; left:12px; z-index:2; background:rgba(255,255,255,.93); color:var(--ink); font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px;}
#result-wrapper .rz-subcard__flag{position:absolute; top:12px; right:12px; z-index:2; background:var(--red); color:#fff; font-size:11px; font-weight:700; padding:5px 11px; border-radius:999px;}
#result-wrapper .rz-subcard__title{position:absolute; left:16px; bottom:14px; z-index:2; color:#fff !important; font-size:20px; font-weight:700; margin:0; line-height:1.1; text-shadow:0 1px 8px rgba(0,0,0,.25);}
#result-wrapper .rz-subcard__desc{padding:16px 18px 14px; border-bottom:1px solid var(--line);}
#result-wrapper .rz-subcard__desc p{font-size:14px; color:var(--ink2); line-height:1.55; margin:0;}
#result-wrapper .rz-subcard__series{padding:14px 18px 6px; flex:1 1 auto;}
#result-wrapper .rz-subcard__series-h{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); margin-bottom:10px;}
/* single column always (Koch-Hosen structure); each name clamped to 2 lines */
#result-wrapper .rz-subcard__list{display:grid; grid-template-columns:1fr; gap:4px 12px; margin:0; padding:0; list-style:none;}
#result-wrapper .rz-subcard__list li{margin:0; padding:0;}
#result-wrapper .rz-subcard__list a{position:relative; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; padding:6px 8px 6px 18px; margin-left:-8px; border-radius:7px; font-size:13.5px; color:var(--ink2) !important; line-height:1.35; text-decoration:none;}
#result-wrapper .rz-subcard__list a:hover{background:var(--soft); color:var(--ink) !important;}
#result-wrapper .rz-subcard__list a::before{content:""; position:absolute; left:7px; top:11px; width:3px; height:3px; border-radius:999px; background:var(--line2);}
#result-wrapper .rz-subcard__more-li{margin:0; padding:0; list-style:none;}
/* "+N weitere" is now a clickable toggle (rz-nav.js reveals the .rz-more-item series) */
#result-wrapper .rz-subcard__more{display:inline-flex; align-items:center; width:auto; background:none;
  border:0; box-shadow:none; font-family:inherit; font-size:12.5px; font-weight:600; color:var(--ink3);
  padding:8px 8px 4px; cursor:pointer; text-align:left;}
#result-wrapper .rz-subcard__more:hover{color:var(--red); text-decoration:underline;}
#result-wrapper .rz-subcard__foot{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border:0; border-radius:12px; font-weight:600; font-size:14px; background:var(--soft); color:var(--ink) !important; text-decoration:none; margin:auto 14px 14px;}
#result-wrapper .rz-subcard__foot:hover{background:var(--ink); color:#fff !important;}

/* ===== Product LIST view rows (Kochjacken Listenansicht design):
   media + "Auf Lager" pill | info (name, Art.-Nr., spec chips, variation form) |
   buy column (price, MwSt, availability, quantity + add-to-cart). The JTL buy form,
   variation selectors and add-to-cart stay functional; the form is display:contents
   so info + buy sit in the same CSS grid as the media. */
#result-wrapper .rz-lrow-outer{margin:0 0 14px; padding:0; border:0; background:none;}
#result-wrapper .rz-lrow-outer .productbox-inner{padding:0; margin:0;}
#result-wrapper .rz-lrow{display:grid; grid-template-columns:190px 1fr 236px; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:border-color .18s ease, box-shadow .18s ease;}
#result-wrapper .rz-lrow:hover{border-color:var(--line2); box-shadow:0 14px 32px rgba(27,26,22,.08);}
#result-wrapper .rz-lrow > form{display:contents;}
/* media */
#result-wrapper .rz-lrow__media{position:relative; background:var(--soft); min-height:190px; overflow:hidden;}
#result-wrapper .rz-lrow__media .productbox-images,
#result-wrapper .rz-lrow__media .list-gallery{display:block; width:100%; height:100%; margin:0;}
#result-wrapper .rz-lrow__media .square-image.second-wrapper,
#result-wrapper .rz-lrow__media .list-gallery img.second{display:none !important;}
#result-wrapper .rz-lrow__media .square-image{position:absolute; inset:0; width:100%; height:100%; padding:0; margin:0;}
#result-wrapper .rz-lrow__media .square-image .inner{width:100%; height:100%;}
#result-wrapper .rz-lrow__media img{width:100% !important; height:100% !important; object-fit:contain !important; padding:16px; box-sizing:border-box; border-radius:0;}
#result-wrapper .rz-lrow__avail{position:absolute; top:12px; left:12px; z-index:3;}
#result-wrapper .rz-lrow__avail .item-delivery-status{display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.94); border-radius:999px; padding:5px 11px; line-height:1;}
#result-wrapper .rz-lrow__avail .item-delivery-status > div{margin:0;}
#result-wrapper .rz-lrow__avail .item-delivery-status::before{content:""; width:6px; height:6px; border-radius:999px; background:#2c7a48; flex:none;}
#result-wrapper .rz-lrow__avail small,#result-wrapper .rz-lrow__avail .item-delivery-status{font-size:11.5px; font-weight:700; color:#2c7a48;}
#result-wrapper .rz-lrow__avail .estimated_delivery,#result-wrapper .rz-lrow__avail .availablefrom{display:none;}
#result-wrapper .rz-lrow__media .productbox-quick-actions{position:absolute; top:10px; right:10px; z-index:3; margin:0;}
/* info */
#result-wrapper .rz-lrow__info{min-width:0; padding:18px 20px; display:flex; flex-direction:column;}
#result-wrapper a.rz-lrow__name{font-family:'Schibsted Grotesk','Instrument Sans',sans-serif; font-weight:700; font-size:17px; line-height:1.3; color:var(--ink) !important; text-decoration:none; margin-bottom:6px;}
#result-wrapper a.rz-lrow__name:hover{color:var(--red) !important;}
#result-wrapper .rz-lrow__sku{font-size:12.5px; color:var(--ink3); margin-bottom:14px;}
#result-wrapper .rz-lrow__desc{font-size:13px; color:var(--ink2); line-height:1.5; margin-bottom:12px;}
#result-wrapper .rz-lrow__chips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px;}
#result-wrapper .rz-lrow__chips .rz-chip{display:inline-flex; align-items:center; gap:6px; background:var(--soft); border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-size:12.5px; color:var(--ink2); line-height:1.3;}
#result-wrapper .rz-lrow__chips .rz-chip__k{color:var(--ink3);}
#result-wrapper .rz-lrow__chips .rz-chip b{color:var(--ink); font-weight:600;}
/* variation form (real JTL selects/radios, restyled compact) */
#result-wrapper .rz-lrow__vars{margin-top:auto;}
#result-wrapper .rz-lrow__vars .variations{margin:0 -6px; row-gap:12px;}
#result-wrapper .rz-lrow__vars .variations > [class*="col"]{padding:0 6px;}
#result-wrapper .rz-lrow__vars .rz-varblock .variation-header,
#result-wrapper .rz-lrow__vars .rz-varblock label.variation-name{font-size:11.5px !important; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); margin-bottom:6px;}
/* buy */
#result-wrapper .rz-lrow__buy{min-width:0; padding:18px 20px; background:var(--soft); border-left:1px solid var(--line); display:flex; flex-direction:column; gap:8px;}
#result-wrapper .rz-lrow__buy .item-list-price{margin:0;}
#result-wrapper .rz-lrow__buy .price_wrapper .price,
#result-wrapper .rz-lrow__buy .price.productbox-price{font-family:'Schibsted Grotesk','Instrument Sans',sans-serif !important; font-weight:700 !important; font-size:25px !important; line-height:1 !important; color:var(--ink) !important;}
#result-wrapper .rz-lrow__buy .price_wrapper .footnote-reference{font-size:13px; color:var(--ink3); font-weight:500;}
#result-wrapper .rz-lrow__mwst{font-size:12px; color:var(--ink3);}
#result-wrapper .rz-lrow__buy .item-delivery-status{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:#2c7a48;}
#result-wrapper .rz-lrow__buy .item-delivery-status::before{content:""; width:7px; height:7px; border-radius:999px; background:#2c7a48; flex:none;}
#result-wrapper .rz-lrow__buy .item-delivery-status .estimated_delivery{color:var(--ink3); font-weight:500;}
#result-wrapper .rz-lrow__basket{margin:6px 0 0; display:flex; flex-direction:column; gap:9px;}
#result-wrapper .rz-lrow__basket .form-row{margin:0;}
#result-wrapper .rz-lrow__basket > [class*="col-"],#result-wrapper .rz-lrow__basket [class*="col-"]{padding:0; max-width:none; flex:0 0 auto; width:100%;}
#result-wrapper .rz-lrow__basket .btn-primary{border-radius:11px; padding:12px 16px; font-weight:600; font-size:14.5px;}
#result-wrapper .rz-lrow__basket .btn-outline-primary{border-radius:11px; padding:11px 16px; font-weight:600; font-size:14px;}
#result-wrapper .rz-lrow__basket .alert.choose-variations{background:#fff; border:1px solid var(--line); border-radius:11px; padding:11px 14px; font-size:12.5px; color:var(--ink2); line-height:1.45; margin:0;}
#result-wrapper .rz-lrow__basket .form-counter{margin:0; max-width:148px;}
/* NOVA reveals the variation form + add-to-cart on hover (absolute / opacity / transform).
   In the list row they live in the info & buy columns and must always be in normal flow. */
#result-wrapper .rz-lrow__info .productbox-onhover,
#result-wrapper .rz-lrow__buy .productbox-onhover{position:static !important; opacity:1 !important; visibility:visible !important; transform:none !important; height:auto !important; max-height:none !important; pointer-events:auto !important;}
/* An open variation dropdown (bootstrap-select) was TRAPPED: the card is
   overflow:hidden for its rounded corners, so the floating menu couldn't spill
   past the card and got forced up over the product's own image + clipped
   ("design over design"). While a select is open, lift the clip and raise the
   whole row above the following rows so the menu opens as a normal floating
   list. Closed state (and the rounded corners) is untouched. */
#result-wrapper .rz-lrow-outer:has(.bootstrap-select.show){position:relative; z-index:30;}
#result-wrapper .rz-lrow:has(.bootstrap-select.show){overflow:visible;}
#result-wrapper .rz-lrow .variations .bootstrap-select .dropdown-menu{z-index:60;}
/* same latent trap in the GRID tile: .rz-tile is overflow:hidden for its rounded
   image, and the variation form lives in an on-hover collapse. This is a no-op
   until a bootstrap-select is actually open inside a tile, so the closed/image
   state is untouched. */
#result-wrapper .rz-tile:has(.bootstrap-select.show){overflow:visible; position:relative; z-index:30;}
#result-wrapper .rz-tile .variations .bootstrap-select .dropdown-menu{z-index:60;}
/* narrow: drop the 3rd column, buy spans full width as a bottom bar */
@media (max-width:1180px){
  #result-wrapper .rz-lrow{grid-template-columns:160px 1fr;}
  #result-wrapper .rz-lrow__buy{grid-column:1 / -1; border-left:0; border-top:1px solid var(--line); flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;}
  #result-wrapper .rz-lrow__buy .item-list-price{margin-right:auto;}
  #result-wrapper .rz-lrow__basket{margin:0; flex:1 1 260px; max-width:340px;}
}
@media (max-width:640px){
  #result-wrapper .rz-lrow{grid-template-columns:1fr;}
  #result-wrapper .rz-lrow__media{min-height:220px;}
  #result-wrapper .rz-lrow__buy{flex-direction:column; align-items:stretch;}
  #result-wrapper .rz-lrow__basket{max-width:none;}
}
#sidepanel_left .custom-control-label,#sidepanel_left label{font-size:14px; color:var(--ink2);}
#sidepanel_left .badge,#sidepanel_left .filter-count{color:var(--ink3); background:transparent;}
/* price range — inputs + noUiSlider track.
   Two col-5 input-groups in a ~230px rail leave the number field ~15px wide, so the
   columns are widened to half each and the currency addon is slimmed down. */
#sidepanel_left .price-range-inputs{padding:6px 16px 2px; align-items:center; justify-content:space-between; gap:8px;}
#sidepanel_left .price-range-inputs > [class*="col-"]{flex:1 1 0; max-width:none; padding:0;}
#sidepanel_left .price-range-inputs .input-group{flex-wrap:nowrap;}
/* the "EUR" addon ate the field in a ~230px rail — the panel heading already says
   Preisspanne and the shop is single-currency, so the addon is dropped and the
   number field gets the full width */
#sidepanel_left .price-range-inputs .input-group-text{display:none !important;}
#sidepanel_left .price-range-input{
  flex:1 1 auto !important; width:100% !important; min-width:0 !important;
  padding:0 10px !important; text-align:center; border-radius:9px !important;}
#sidepanel_left .price-range-input,#sidepanel_left .input-group-text{
  border:1px solid var(--line2) !important; background:#fff !important; color:var(--ink) !important;
  font-size:13.5px !important; height:36px; box-shadow:none !important;}
#sidepanel_left .input-group-text{
  background:var(--soft) !important; color:var(--ink3) !important; font-size:11px !important;
  padding:0 7px !important; white-space:nowrap;}
#sidepanel_left .input-group > .form-control:first-child,
#sidepanel_left .input-group > .input-group-prepend > .input-group-text{border-radius:9px 0 0 9px !important;}
#sidepanel_left .input-group > .form-control:last-child,
#sidepanel_left .input-group > .input-group-append > .input-group-text{border-radius:0 9px 9px 0 !important;}
#sidepanel_left .price-range-slide{margin:16px 20px 14px;}
#sidepanel_left .noUi-target{background:var(--line) !important; border:0 !important; height:3px !important; box-shadow:none !important;}
#sidepanel_left .noUi-connect{background:var(--ink) !important;}
#sidepanel_left .noUi-handle{
  width:16px !important; height:16px !important; right:-8px !important; top:-7px !important;
  border:1px solid var(--line2) !important; border-radius:999px !important; background:#fff !important;
  box-shadow:0 1px 4px rgba(0,0,0,.18) !important; cursor:grab;}
#sidepanel_left .noUi-handle::before,#sidepanel_left .noUi-handle::after{display:none !important;}
/* mark the category you're actually in, so a long tree is readable at a glance */
#sidepanel_left .nav-link.active,#sidepanel_left .active > .nav-link,
#sidepanel_left li.active > a{color:var(--ink) !important; font-weight:700 !important; background:var(--soft) !important;}
/* hide facet panels the shop leaves empty (they read as broken boxes) */
#sidepanel_left .box:empty,#sidepanel_left .filterbox:empty{display:none !important;}
/* consistent bottom spacing + no stray double borders between stacked facets */
#sidepanel_left .box > *:last-child,#sidepanel_left .filterbox > *:last-child{margin-bottom:0 !important;}
#sidepanel_left hr{display:none !important;}

/* ===== RAZAN listing → bespoke handoff ====================================
   The handoff sidebar is ONLY filter cards (Farbe, Material, Verfügbarkeit,
   Preis), all expanded — no NOVA category tree, no accordion toggles. Nav lives
   in the subcategory pills under the hero + the mega-menu. */
#sidepanel_left .box-linkgroup,
#sidepanel_left .box-filter-special,
#sidepanel_left .box-wishlist{display:none !important;}
/* categories widget back in the sidebar, pinned ABOVE the filters (per request) */
#sidepanel_left .box-categories{display:block !important; order:-1;}
/* facet panels always open (handoff shows them expanded, not as dropdowns) */
#sidepanel_left .box-filter-characteristics .collapse,
#sidepanel_left .box-filter-availability .collapse,
#sidepanel_left .box-filter-pricerange .collapse,
#sidepanel_left .box-filter-rating .collapse,
#sidepanel_left .box-filter-manufacturer .collapse{
  display:block !important; height:auto !important; visibility:visible !important;}
/* the facet heading is no longer a toggle → drop its chevron + click affordance */
#sidepanel_left .btn-filter-box.dropdown-toggle::after{display:none !important;}
#sidepanel_left .btn-filter-box.dropdown-toggle{pointer-events:none; cursor:default;}
/* facet option rows → checkbox (left) + label + hover, matching the handoff list */
#sidepanel_left .filter-item{
  display:flex !important; align-items:center; gap:10px; padding:6px 16px !important;
  font-size:14px; color:var(--ink2) !important; text-decoration:none; border-radius:8px;}
#sidepanel_left .filter-item:hover{color:var(--ink) !important; background:var(--soft);}
#sidepanel_left .filter-item-value{flex:1 1 auto; min-width:0;}
#sidepanel_left .snippets-filter-item-icon-right{order:-1; margin:0 !important; color:var(--line2); font-size:16px;}
#sidepanel_left .filter-item.active .snippets-filter-item-icon-right,
#sidepanel_left .filter-item .fa-check-square,
#sidepanel_left .filter-item .fa-check{color:var(--ink) !important;}
#sidepanel_left .filter-item.active{color:var(--ink) !important; font-weight:600;}

/* subcategory pills under the hero (design handoff) */
.rz-subchips{padding:18px 22px 0; display:flex; flex-wrap:wrap; gap:10px;}
.rz-subchip{
  padding:9px 16px; border-radius:999px; border:1px solid var(--line2); background:#fff;
  font-size:13.5px; font-weight:600; color:var(--ink); text-decoration:none;
  transition:border-color .15s ease, background .15s ease;}
.rz-subchip:hover{border-color:var(--ink); color:var(--ink); background:var(--soft);}

/* breadcrumb: the "back to parent" arrow is a MOBILE affordance; on desktop it
   duplicated the parent category next to the full trail — hide it ≥768px */
@media (min-width:768px){
  #breadcrumb .breadcrumb-arrow,#breadcrumb .breadcrumb-backtolist{display:none !important;}
}

/* Farbe filter → colour swatch dots. JTL emits the colour value as plain TEXT (no colour
   data in the markup), so the common German colour names are mapped to a swatch via the
   item's [title]. Names not listed simply stay a clean checkbox row. */
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Blau" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Rot" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Schwarz" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Weiß" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Weiss" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Gelb" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Pink" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Grün" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Gruen" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Grau" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Braun" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Beige" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Orange" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Anthrazit" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Creme" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Natur" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Türkis" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Lila" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Violett" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Silber" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Gold" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Sand" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Rosa" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Magenta" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Multicolor" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Mehrfarbig" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Bunt" i] .filter-item-value::before{
  content:""; display:inline-block; width:15px; height:15px; border-radius:999px;
  margin-right:9px; vertical-align:-3px; border:1px solid rgba(0,0,0,.16); flex:0 0 auto;}
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Blau" i] .filter-item-value::before{background:#2f5fa8;}
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Rot" i] .filter-item-value::before{background:#c0392b;}
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Schwarz" i] .filter-item-value::before{background:#1b1a16;}
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Weiß" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Weiss" i] .filter-item-value::before{background:#f6f3ec;}
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Gelb" i] .filter-item-value::before{background:#e8c320;}
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Pink" i] .filter-item-value::before{background:#e84a8a;}
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Grün" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Gruen" i] .filter-item-value::before{background:#3a9d5d;}
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Grau" i] .filter-item-value::before{background:#9a968c;}
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Braun" i] .filter-item-value::before{background:#7a5230;}
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Beige" i] .filter-item-value::before{background:#d8c7ad;}
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Orange" i] .filter-item-value::before{background:#e07b39;}
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Anthrazit" i] .filter-item-value::before{background:#35342f;}
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Creme" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Natur" i] .filter-item-value::before{background:#efe7d6;}
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Türkis" i] .filter-item-value::before{background:#40b5ad;}
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Lila" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Violett" i] .filter-item-value::before{background:#7d5ba6;}
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Silber" i] .filter-item-value::before{background:#c7c7c7;}
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Gold" i] .filter-item-value::before{background:#c8a850;}
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Sand" i] .filter-item-value::before{background:#d8c7ad;}
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Rosa" i] .filter-item-value::before{background:#f4a7c3;}
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Magenta" i] .filter-item-value::before{background:#cf1d8b;}
/* multicolor → rainbow wheel (not a single colour) */
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Multicolor" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Mehrfarbig" i] .filter-item-value::before,
:is(#sidepanel_left,#collapseFilter) .filter-item[title^="Bunt" i] .filter-item-value::before{
  background:conic-gradient(#e74c3c,#f1c40f,#2ecc71,#3498db,#9b59b6,#e74c3c);}
/* ============================================================================
   BILDHINWEISE — legal note modal (footer "Bildhinweise" link → AI-image disclaimer)
   ============================================================================ */
.rz-note-modal .modal-dialog{max-width:520px;}
.rz-note-modal .modal-content{border:0; border-radius:16px; box-shadow:var(--sh-drop); overflow:hidden;}
.rz-note-modal .modal-header{border-bottom:1px solid var(--line); padding:18px 22px; align-items:center;}
.rz-note-modal .modal-title{font-family:var(--head) !important; font-weight:700 !important; font-size:18px !important; color:var(--ink) !important;}
.rz-note-modal .modal-header .close{opacity:1; color:var(--ink3); background:transparent; border:0; width:34px; height:34px;
  border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:22px; line-height:1; text-shadow:none;}
.rz-note-modal .modal-header .close:hover{background:var(--soft); color:var(--ink);}
.rz-note-modal .modal-body{padding:20px 22px;}
.rz-note-modal .modal-body p{margin:0; font-size:14.5px; line-height:1.6; color:var(--ink2);}
.rz-note-modal .modal-footer{border-top:1px solid var(--line); padding:14px 22px; justify-content:flex-end;}
.rz-note-modal .modal-footer .btn-primary{border-radius:999px !important; padding:10px 24px !important; font-weight:600 !important;}

/* ============================================================================
   MOBILE FILTER SHEET — #collapseFilter modal rendered as a BOTTOM SHEET on
   phones/tablets, per design_handoff_nazar_storefront/Mobile Filter.html.
   AJAX content: snippets/filter/mobile.tpl. Trigger: "Filter" button (#js-filters).
   ============================================================================ */
/* trigger button → rz pill with the sort/filter icon */
#js-filters{border:1px solid var(--line2) !important; background:#fff !important; color:var(--ink) !important;
  border-radius:999px !important; padding:10px 18px !important; font-size:14px !important; font-weight:600 !important;
  box-shadow:none !important; display:inline-flex; align-items:center; gap:8px;}
#js-filters .fa-filter{margin-right:0; color:var(--ink2);}
#js-filters .fa-filter.text-primary{color:var(--red) !important;}

/* --- bottom-sheet shell: anchored to the bottom, rounded top, slides up --- */
@media (max-width:991.98px){
  #collapseFilter.modal{padding:0 !important;}
  #collapseFilter.modal .modal-dialog{position:fixed; left:0; right:0; bottom:0; margin:0; width:100%;
    max-width:none; max-height:90vh; max-height:90dvh; display:flex;}
  #collapseFilter.modal.fade .modal-dialog{transform:translateY(100%); transition:transform .32s cubic-bezier(.32,.72,0,1);}
  #collapseFilter.modal.show .modal-dialog{transform:none;}
  #collapseFilter.modal .modal-content{width:100%; max-height:90vh; max-height:90dvh; border:0 !important;
    border-radius:22px 22px 0 0 !important; box-shadow:0 -14px 40px rgba(0,0,0,.22) !important;
    display:flex; flex-direction:column; overflow:hidden;}
  /* drag handle */
  #collapseFilter.modal .modal-content::before{content:''; flex:0 0 auto; width:38px; height:4px;
    border-radius:999px; background:var(--line2); margin:9px auto 0;}
  #collapseFilter.modal .modal-header{flex:0 0 auto;}
  #collapseFilter.modal .modal-body{flex:1 1 auto; min-height:0; overflow:hidden; padding:0 !important;
    display:flex; flex-direction:column;}
  #collapseFilter.modal .modal-body > .js-helpers{display:none;}
}
/* header: "Filter" + hit count · "Zurücksetzen" */
#collapseFilter .modal-header{border:0 !important; padding:12px 18px; align-items:center; justify-content:space-between; gap:12px;}
#collapseFilter .rz-mf-titlewrap{display:flex; align-items:baseline; gap:9px; min-width:0;}
#collapseFilter .rz-mf-title{font-family:var(--head); font-weight:700; font-size:18px; color:var(--ink);}
#collapseFilter .rz-mf-count{font-size:13px; color:var(--ink3); white-space:nowrap;}
#collapseFilter .rz-mf-reset{font-size:13px; font-weight:600; color:var(--ink2); text-decoration:underline;
  white-space:nowrap; background:none; border:0; padding:4px 2px;}
#collapseFilter .rz-mf-reset:hover{color:var(--ink);}
#collapseFilter .modal-header .close{opacity:1; color:var(--ink3); background:transparent; border:0; width:34px; height:34px;
  border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:22px; line-height:1; text-shadow:none;}
#collapseFilter .modal-header .close:hover{background:var(--soft); color:var(--ink);}

/* body = chips (fixed) · accordion (scroll) · footer (fixed) */
#collapseFilter .productlist-filter-wrapper{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
#collapseFilter .snippets-filter-mobile-heading{display:none;}   /* header already labels it */

/* active-filter chips — horizontal scroll strip under the header. The padded strip
   lives on .active-filters (only emitted when filters are set) so an unfiltered sheet
   shows no empty gap. */
#collapseFilter .productlist-applied-filter-top{flex:0 0 auto; margin:0; padding:0;}
#collapseFilter .productlist-applied-filter-top .active-filters{display:flex; align-items:center; gap:8px; flex-wrap:nowrap;
  padding:12px 18px; overflow-x:auto; -webkit-overflow-scrolling:touch;}
/* the duplicate bottom applied-filter list is redundant in the sheet */
#collapseFilter .productlist-filter-wrapper > .productlist-applied-filter:not(.productlist-applied-filter-top){display:none;}
/* chip pill */
#collapseFilter .snippets-filter-item{flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  background:var(--ink) !important; color:#fff !important; border:0 !important; border-radius:999px !important;
  padding:7px 10px 7px 13px !important; font-size:12.5px !important; font-weight:600 !important; line-height:1.2 !important; white-space:nowrap;}
#collapseFilter .snippets-filter-item .snippets-filter-item-icon-left,
#collapseFilter .snippets-filter-item .fa-times{margin:0; font-size:11px; color:#fff; opacity:.7;}
#collapseFilter .snippets-filter-item-all{flex:0 0 auto; align-self:center; white-space:nowrap;
  font-size:12.5px; font-weight:600; color:var(--ink2); text-decoration:underline; padding-left:2px;}

/* accordion (the scroll region) */
#collapseFilter .productlist-filter-accordion{flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  list-style:none !important; margin:0; padding:0; border:0 !important; border-top:1px solid var(--line) !important;}
#collapseFilter .snippets-filter-mobile-item,
#collapseFilter .snippets-filter-mobile-sorting{border-bottom:1px solid var(--line); list-style:none;}
/* group toggle row: name (+badge) · summary · caret */
#collapseFilter .snippets-filter-mobile-item > a,
#collapseFilter .snippets-filter-mobile-sorting > a{
  display:flex !important; align-items:center; justify-content:flex-start; gap:10px;
  padding:15px 18px !important; font-family:var(--head); font-weight:600; font-size:15px; color:var(--ink) !important; text-decoration:none;}
#collapseFilter .characteristic-collapse-btn-inner{display:inline-flex; align-items:center; gap:9px; min-width:0; flex:0 1 auto;}
/* selected-count badge next to the group name */
#collapseFilter .rz-mf-badge{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--red); color:#fff; font-size:10.5px; font-weight:700;}
/* right-aligned selection summary (rz-mf-sum + the sorting group's .font-italic) */
#collapseFilter .rz-mf-sum,
#collapseFilter .snippets-filter-mobile-item > a .font-italic,
#collapseFilter .snippets-filter-mobile-sorting > a .font-italic{
  margin-left:auto; max-width:44%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right;
  font-style:normal !important; font-weight:400; font-size:13px; color:var(--ink3);}
/* caret (flips when the section is open) */
#collapseFilter .snippets-filter-mobile-item > a::after,
#collapseFilter .snippets-filter-mobile-sorting > a::after{
  content:''; flex:0 0 auto; margin-left:10px; width:8px; height:8px; border-right:1.6px solid var(--ink3); border-bottom:1.6px solid var(--ink3);
  transform:translateY(-2px) rotate(45deg); transition:transform .18s ease;}
#collapseFilter .snippets-filter-mobile-item > a[aria-expanded="true"]::after,
#collapseFilter .snippets-filter-mobile-item > a:not(.collapsed)::after,
#collapseFilter .snippets-filter-mobile-sorting > a[aria-expanded="true"]::after,
#collapseFilter .snippets-filter-mobile-sorting > a:not(.collapsed)::after{transform:translateY(1px) rotate(-135deg);}

/* section body */
#collapseFilter .snippets-filter-mobile-item-collapse,
#collapseFilter .snippets-filter-mobile-sorting-collapse{padding:2px 18px 16px;}

/* default group = checkbox rows (Sortierung, Material, Einsatzbereich, …) */
#collapseFilter .filter-item,#collapseFilter .nav-link{
  display:flex !important; align-items:center; gap:11px; width:auto; margin:0 -10px !important; padding:11px 10px !important;
  border-radius:10px; font-size:14.5px; color:var(--ink2) !important; text-decoration:none;}
#collapseFilter .filter-item .box-link-wrapper{display:flex; align-items:center; gap:11px; width:100%; min-width:0;}
#collapseFilter .filter-item .snippets-filter-item-icon-right{flex:0 0 auto; font-size:18px; color:var(--line2);}
#collapseFilter .filter-item.active .snippets-filter-item-icon-right{color:var(--ink);}
#collapseFilter .filter-item .filter-item-value{flex:1 1 auto; min-width:0;}
#collapseFilter .filter-item .badge{margin-left:auto; padding:0 !important; border:0 !important; background:transparent !important;
  color:var(--ink3) !important; font-size:12.5px !important; font-weight:400 !important;}
#collapseFilter .filter-item.active{color:var(--ink) !important; font-weight:600;}
#collapseFilter .filter-item:hover{background:var(--soft);}
#collapseFilter .filter-item-count,#collapseFilter .filter-count{margin-left:auto; color:var(--ink3); font-size:12.5px;}

/* Größe group = pills */
#collapseFilter .rz-mf-grp--pill .filter-item{display:inline-flex !important; width:auto; min-width:46px; margin:0 8px 8px 0 !important;
  padding:9px 14px !important; justify-content:center; border:1.5px solid var(--line2); border-radius:10px; color:var(--ink) !important;}
#collapseFilter .rz-mf-grp--pill .filter-item .box-link-wrapper{width:auto; justify-content:center;}
#collapseFilter .rz-mf-grp--pill .filter-item .snippets-filter-item-icon-right,
#collapseFilter .rz-mf-grp--pill .filter-item .badge{display:none !important;}
#collapseFilter .rz-mf-grp--pill .filter-item .filter-item-value{flex:0 0 auto;}
#collapseFilter .rz-mf-grp--pill .filter-item.active{border-color:var(--ink); background:var(--ink); color:#fff !important;}

/* Farbe group = swatch cards (colour dot supplied by the swatch palette above) */
#collapseFilter .rz-mf-grp--swatch .filter-item{display:inline-flex !important; vertical-align:top; width:74px; margin:0 8px 8px 0 !important;
  flex-direction:column; align-items:center; gap:6px; padding:9px 4px !important; border:1.5px solid var(--line2); border-radius:12px; text-align:center;}
#collapseFilter .rz-mf-grp--swatch .filter-item .box-link-wrapper{flex-direction:column; align-items:center; gap:6px; width:100%;}
#collapseFilter .rz-mf-grp--swatch .filter-item .snippets-filter-item-icon-right,
#collapseFilter .rz-mf-grp--swatch .filter-item .badge{display:none !important;}
#collapseFilter .rz-mf-grp--swatch .filter-item .filter-item-value{display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; color:var(--ink); line-height:1.2;}
#collapseFilter .rz-mf-grp--swatch .filter-item-value::before{width:26px !important; height:26px !important; margin:0 !important; vertical-align:0 !important;}
#collapseFilter .rz-mf-grp--swatch .filter-item.active{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink) inset;}

/* Sortierung group = radio rows */
#collapseFilter .snippets-filter-mobile-sorting-collapse .filter-item{position:relative;}
#collapseFilter .snippets-filter-mobile-sorting-collapse .filter-item::before{content:''; flex:0 0 auto; width:19px; height:19px;
  border-radius:999px; border:1.5px solid var(--line2); background:#fff; transition:border-color .15s ease;}
#collapseFilter .snippets-filter-mobile-sorting-collapse .filter-item.active::before{border:6px solid var(--ink);}
#collapseFilter .snippets-filter-mobile-sorting-collapse .filter-item.active{color:var(--ink) !important; font-weight:600;}

/* price range — de-emphasised: neutral ink slider, not a loud red bar */
#collapseFilter .price-range-input,#collapseFilter .input-group-text{border:1.5px solid var(--line2) !important; background:#fff !important;
  color:var(--ink) !important; height:46px; box-shadow:none !important; border-radius:11px !important; font-weight:600;}
#collapseFilter .noUi-target{background:var(--line2) !important; border:0 !important; height:4px !important; box-shadow:none !important; margin:20px 11px 6px;}
#collapseFilter .noUi-connect{background:var(--ink) !important;}
#collapseFilter .noUi-handle{width:22px !important; height:22px !important; right:-11px !important; top:-9px !important;
  border:2px solid var(--ink) !important; border-radius:999px !important; background:#fff !important; box-shadow:0 2px 6px rgba(0,0,0,.16) !important;}
#collapseFilter .noUi-handle::before,#collapseFilter .noUi-handle::after{display:none !important;}

/* sticky footer — "Abbrechen" recedes, "N Artikel ansehen" dominates */
#collapseFilter .productlist-filter-footer{flex:0 0 auto; position:relative; z-index:2; margin-top:0;
  background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 18px rgba(0,0,0,.05);
  padding:12px 18px; padding-bottom:calc(12px + env(safe-area-inset-bottom));}
#collapseFilter .productlist-filter-footer .row,#collapseFilter .snippets-filter-mobile-buttons{display:flex; gap:10px; margin:0; align-items:stretch;}
#collapseFilter .productlist-filter-footer [class*="col"]{padding:0; max-width:none;}
#collapseFilter .productlist-filter-footer .snippets-filter-mobile-buttons > [class*="col"]:first-child{flex:0 0 auto;}
#collapseFilter .productlist-filter-footer .snippets-filter-mobile-buttons > [class*="col"]:last-child{flex:1 1 auto;}
#collapseFilter .productlist-filter-footer .btn{width:100%; border-radius:13px !important; font-weight:700 !important;
  padding:15px 18px !important; font-size:15px !important; box-shadow:none !important; white-space:nowrap;}
#collapseFilter .productlist-filter-footer .btn-primary{background:var(--ink) !important; border-color:var(--ink) !important; color:#fff !important;}
#collapseFilter .productlist-filter-footer .btn-outline-primary{background:#fff !important; border:1.5px solid var(--line2) !important;
  color:var(--ink2) !important; font-weight:600 !important;}

/* ============================================================================
   ORPHAN RECOVERY — classes still used by templates that the rz.css rewrite
   dropped. Without these the components render completely unstyled.
   ============================================================================ */
/* ---- add-to-cart confirmation (productdetails/pushed_success.tpl) ----
   Deliberately compact: the mini-cart drawer already shows the cart contents. */
.rz-added{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px 20px; margin:0 0 22px;}
.rz-added--card{box-shadow:var(--sh-drop);}
.rz-added__head{display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ok); margin-bottom:14px;}
.rz-added__check{width:26px; height:26px; border-radius:999px; background:var(--ok-bg); color:var(--ok);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.rz-added__check svg{width:15px; height:15px;}
.rz-added__head b{font-weight:600; color:var(--ink);}
.rz-added__item{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
/* hard cap the thumbnail — the stock template image rules would otherwise render it full-size */
.rz-added__thumb{width:64px !important; height:64px !important; flex:0 0 64px; border:1px solid var(--line);
  border-radius:10px; overflow:hidden; background:#fff; display:block;}
.rz-added__thumb img,.rz-added__thumb picture,.rz-added__thumb source{width:100% !important; height:100% !important;
  max-width:100% !important; object-fit:contain; display:block;}
/* placeholder when a set/bundle product has no image */
.rz-added__thumb--ph{display:flex !important; align-items:center; justify-content:center; background:var(--soft); color:var(--ink3);}
.rz-added__thumb--ph svg{width:26px; height:26px;}
.rz-added__info{flex:1; min-width:140px;}
.rz-added__name{font-weight:600; font-size:15px; color:var(--ink); display:block; line-height:1.3;}
.rz-added__meta{font-size:12.5px; color:var(--ink3); margin-top:2px;}
.rz-added__actions{display:flex; gap:9px; flex-wrap:wrap; margin-left:auto;}
.rz-added__actions .rz-btn{white-space:nowrap;}
.rz-added__xsell{margin-top:18px; padding-top:16px; border-top:1px solid var(--line);}
.rz-added__xsell-head{font-family:var(--head); font-weight:700; font-size:14.5px; margin-bottom:12px;}
/* compact cross-sell rows — proportional to the confirmation, no stranded card */
.rz-added__xlist{display:flex; flex-direction:column; gap:8px;}
.rz-added__xrow{display:flex; align-items:center; gap:12px; padding:8px 10px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface); transition:border-color .15s ease;}
.rz-added__xrow:hover{border-color:var(--line2);}
.rz-added__xthumb{width:52px; height:52px; flex:0 0 52px; border-radius:9px; overflow:hidden;
  background:var(--soft); display:block;}
.rz-added__xthumb img{width:100%; height:100%; object-fit:cover; display:block;}
.rz-added__xinfo{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.rz-added__xname{font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.rz-added__xprice{font-size:13.5px; font-weight:700; color:var(--ink);}
.rz-added__xadd{flex:0 0 auto; margin:0;}
.rz-iadd--sm{width:36px; height:36px;}
.rz-iadd--sm svg{width:17px; height:17px;}
@media (max-width:640px){
  .rz-added__actions{margin-left:0; width:100%;}
  .rz-added__actions .rz-btn{flex:1;}
}

/* ---- the add-to-cart popup modal (eModal size 'lg' + this cap) --------------
   Was eModal 'xl' (~1140px) — far wider than the confirmation content, so it read
   as mostly empty. Constrain it and give it the rz card look. Scoped via :has so no
   other modal is touched (product-image modal etc. keep their width). */
.modal:has(#pushed-success) .modal-dialog{max-width:640px; margin-left:auto; margin-right:auto;}
.modal:has(#pushed-success) .modal-content{border:none; border-radius:18px; box-shadow:var(--sh-drop); overflow:hidden;}
.modal:has(#pushed-success) .modal-header{border-bottom:1px solid var(--line); padding:18px 22px;}
.modal:has(#pushed-success) .modal-title{font-family:var(--head); font-weight:700; font-size:17px; color:var(--ink); line-height:1.3;}
.modal:has(#pushed-success) .modal-body{padding:20px 22px 22px;}
.modal:has(#pushed-success) #pushed-success.rz-added{border:none; box-shadow:none; padding:0; margin:0;}

/* ---- rz skin for EVERY Bootstrap / eModal dialog ---------------------------
   The saved-cart merge confirm, popups, alerts and the product-image modal are
   plain eModal chrome. This skins them all to one system. Modals mount on <body>
   (outside .rz-scope) but the tokens live on :root, so they resolve here. The
   consent manager uses its own .consent-* markup — not .modal — and is untouched.
   The #pushed-success rules above are more specific and still win for that one. */
.modal-content{border:none !important; border-radius:18px !important; box-shadow:var(--sh-drop) !important; overflow:hidden;}
.modal-header{border-bottom:1px solid var(--line) !important; padding:16px 20px !important; align-items:center;}
.modal-header .modal-title,.modal-title{font-family:var(--head) !important; font-weight:700 !important; font-size:16px !important; color:var(--ink) !important; line-height:1.3; margin:0;}
/* close × → round hit-area instead of a bare glyph */
.modal-header .close,.modal-header button.x,.modal-header .x.close{
  opacity:1 !important; color:var(--ink3) !important; background:transparent !important; border:0 !important;
  width:34px; height:34px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; text-shadow:none !important; margin:0; padding:0; transition:background .15s ease, color .15s ease;}
.modal-header .close:hover,.modal-header button.x:hover{background:var(--soft) !important; color:var(--ink) !important;}
.modal-header .close .fas,.modal-header button.x .fas,.modal-header .close span{font-size:15px !important; line-height:1 !important;}
.modal-body{padding:20px !important; color:var(--ink2); font-size:14.5px; line-height:1.55;}
.modal-footer{border-top:1px solid var(--line) !important; padding:14px 20px !important; gap:10px; justify-content:flex-end;}
.modal-footer > *{margin:0 !important;}
/* footer buttons → rz pills; colours kept semantic (primary = ink action, danger = red) */
.modal-footer .btn{border-radius:var(--r-pill) !important; font-weight:600 !important; font-size:14px !important;
  padding:9px 22px !important; box-shadow:none !important; border:1px solid transparent !important; min-width:88px;}
.modal-footer .btn-primary{background:var(--ink) !important; border-color:var(--ink) !important; color:#fff !important;}
.modal-footer .btn-primary:hover{opacity:.92; color:#fff !important;}
.modal-footer .btn-danger{background:var(--red) !important; border-color:var(--red) !important; color:#fff !important;}
.modal-footer .btn-danger:hover{opacity:.92; color:#fff !important;}
.modal-footer .btn-secondary,.modal-footer .btn-outline-secondary,.modal-footer .btn-outline-primary{
  background:#fff !important; border-color:var(--line2) !important; color:var(--ink) !important;}

/* ---- PDP fullscreen image viewer (#productImagesModal) --------------------
   The stock modal opened to a dark backdrop with no image: it wrapped each shot
   in NOVA's .square box and used {image lazy=true}, whose data-src never resolved
   inside the hidden dialog. product_images_modal.tpl now emits plain <img src>;
   these rules give it a clean centred lightbox that scrolls if there are several. */
.rz-imgmodal .modal-dialog{max-width:min(94vw,1040px) !important; margin:1.75rem auto !important;}
.rz-imgmodal .modal-content{position:relative; background:#fff !important;}
/* fullscreen viewer = horizontal scroll-snap gallery (swipe / scroll through images) */
.rz-imgmodal__body.modal-body{padding:0 !important; height:86vh; max-height:86vh;
  display:flex; flex-direction:row; flex-wrap:nowrap; gap:0; align-items:stretch; background:#fff;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--line2) transparent;}
.rz-imgmodal__img{flex:0 0 100% !important; width:100% !important; height:100%; max-width:100%;
  object-fit:contain; scroll-snap-align:center; display:block; background:#fff; padding:18px;}
.rz-imgmodal__body.modal-body::-webkit-scrollbar{height:8px;}
.rz-imgmodal__body.modal-body::-webkit-scrollbar-thumb{background:var(--line2); border-radius:8px;}
.rz-imgmodal__body.modal-body::-webkit-scrollbar-track{background:transparent;}
/* fullscreen viewer prev/next buttons (razan.js in product_images_modal.tpl scrolls the strip) */
.rz-imgmodal__nav{position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:48px; height:48px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.94); color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 2px 12px rgba(0,0,0,.14); transition:background .15s ease, color .15s ease;}
.rz-imgmodal__nav:hover{background:var(--ink); color:#fff;}
.rz-imgmodal__prev{left:16px;}
.rz-imgmodal__next{right:16px;}
@media (max-width:520px){.rz-imgmodal__nav{width:40px; height:40px;}}

/* ===== Wunschliste: wide horizontal item cards (replaces the cramped narrow grid card) === */
.snippets-wishlist .rz-plist{display:flex !important; flex-direction:column; gap:16px; grid-template-columns:none !important;}
.snippets-wishlist .wishlist-item.rz-card{flex-direction:row; align-items:stretch; max-width:none; width:100%;}
.snippets-wishlist .wishlist-item .rz-card__media{flex:0 0 clamp(120px,15vw,168px); aspect-ratio:1/1; margin:0; border-radius:16px 0 0 16px; overflow:hidden;}
.snippets-wishlist .wishlist-item .rz-card__media img{transform:none !important;}
.snippets-wishlist .wishlist-item .rz-card__body{
  flex:1 1 auto; display:grid; grid-template-columns:1fr minmax(210px,290px); grid-template-rows:auto auto auto 1fr;
  gap:4px 28px; align-items:start; padding:18px 22px;}
.snippets-wishlist .wishlist-item .rz-card__name{grid-column:1; grid-row:1; font-size:16px; margin:0 0 2px;}
.snippets-wishlist .wishlist-item .rz-card__price-wrap{grid-column:1; grid-row:2;}
.snippets-wishlist .wishlist-item .product-characteristics{grid-column:1; grid-row:3; font-size:12.5px; color:var(--ink2); margin-top:6px;}
.snippets-wishlist .wishlist-item .rz-card__wl-options{grid-column:2; grid-row:1 / span 4; display:flex; flex-direction:column; gap:10px; align-self:stretch;}
.snippets-wishlist .wishlist-item .rz-card__wl-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.snippets-wishlist .wishlist-item .rz-textarea{min-height:60px;}
@media (max-width:720px){
  .snippets-wishlist .wishlist-item.rz-card{flex-direction:column;}
  .snippets-wishlist .wishlist-item .rz-card__media{flex:none; width:100%; aspect-ratio:16/10; border-radius:16px 16px 0 0;}
  .snippets-wishlist .wishlist-item .rz-card__body{grid-template-columns:1fr;}
  .snippets-wishlist .wishlist-item .rz-card__wl-options{grid-column:1; grid-row:auto;}
}

/* ---- Wunschliste TOOLBAR redesign (three-dot · name · search) -------------- */
/* the stock row rendered as three mismatched Bootstrap controls; give it one
   clean, aligned Razan bar with rounded pill controls. */
.snippets-wishlist .wishlist-actions{display:flex; align-items:center; gap:10px;
  margin:8px 0 22px !important; flex-wrap:wrap;}
.snippets-wishlist .wishlist-actions > [class*="col"]{padding:0 !important; flex:0 0 auto; width:auto; max-width:none; margin:0;}
.snippets-wishlist .wishlist-actions > .wishlist-search-wrapper{flex:1 1 260px; min-width:220px;}
/* three-dot options button → round ghost icon */
.snippets-wishlist .wishlist-options .dropdown-toggle{width:46px; height:46px; padding:0; border-radius:999px !important;
  border:1px solid var(--line2) !important; background:#fff !important; color:var(--ink2) !important;
  display:inline-flex; align-items:center; justify-content:center; box-shadow:none !important;}
.snippets-wishlist .wishlist-options .dropdown-toggle:hover{border-color:var(--ink) !important; color:var(--ink) !important;}
/* wishlist-name dropdown → rounded outline pill */
.snippets-wishlist .wishlist-dropdown-name .dropdown-toggle{height:46px; border-radius:999px !important;
  border:1px solid var(--line2) !important; background:#fff !important; color:var(--ink) !important;
  font-weight:600 !important; padding:0 20px !important; box-shadow:none !important; display:inline-flex; align-items:center;}
.snippets-wishlist .wishlist-dropdown-name .dropdown-toggle:hover{border-color:var(--ink) !important;}
/* search → one rounded field with an ink "Suchen" pill on the end */
.snippets-wishlist #wishlist-search .input-group{background:#fff; border:1px solid var(--line2);
  border-radius:999px; padding:0 6px 0 20px; align-items:center; overflow:hidden; height:46px; flex-wrap:nowrap;}
.snippets-wishlist #wishlist-search .form-control{border:none !important; background:none !important;
  box-shadow:none !important; min-height:0 !important; height:44px !important; padding:0 !important; flex:1 1 auto;}
.snippets-wishlist #wishlist-search .input-group-append{margin:0;}
.snippets-wishlist #wishlist-search .wishlist-search-button{background:var(--ink) !important; color:#fff !important;
  border:none !important; border-radius:999px !important; padding:0 18px !important; height:36px; font-weight:600 !important;
  box-shadow:none !important; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;}
.snippets-wishlist #wishlist-search .wishlist-search-button:hover{background:#000 !important; color:#fff !important;}
.snippets-wishlist #wishlist-search .wishlist-search-button + .input-group-append .btn,
.snippets-wishlist #wishlist-search .input-group-append .btn[value=""]{background:none !important; color:var(--ink3) !important; border:none !important;}
@media (max-width:600px){
  .snippets-wishlist #wishlist-search .wishlist-search-button-text{display:none;}
  .snippets-wishlist .wishlist-dropdown-name > .btn{padding:0 14px !important;}
}

/* ---- Wunschliste spacing fixes (per request) ------------------------------ */
/* space between the pagination row (the "10 / Einträge" bar) and the products */
.snippets-wishlist #wl-items-form{margin-top:24px;}
.snippets-wishlist .productlist-page-nav,
.snippets-wishlist .pagination-wrapper{margin-bottom:6px;}
/* space above the "Alles in den Warenkorb" button so it doesn't hug the last card */
.snippets-wishlist .wishlist-all-to-cart{margin-top:22px; padding-top:2px;}
.rz-imgmodal__close{position:absolute; top:12px; right:14px; z-index:6;
  width:40px; height:40px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.94); color:var(--ink); font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.12); transition:background .15s ease, transform .15s ease;}
.rz-imgmodal__close:hover{background:var(--soft); transform:scale(1.05);}

/* ---- button modifier still referenced by older templates ---- */
.rz-btn--primary{background:var(--ink); color:#fff;}
.rz-scope a.rz-btn--primary,.rz-scope a.rz-btn--primary:hover{color:#fff;}
/* ---- PDP buy-box leftovers (productdetails/basket.tpl) ---- */
.rz-buybox{display:flex; flex-direction:column; gap:12px;}
.rz-buy-add{display:flex; gap:12px; flex-wrap:wrap; align-items:stretch;}
.rz-hint{font-size:12.5px; color:var(--ink3); line-height:1.5;}
/* "Dieser Artikel hat Variationen…" — was bare grey text jammed under the stock line.
   Make it a quiet info note so it reads as guidance, not an afterthought. */
.rz-hint.choose-variations{
  margin-top:4px; padding:11px 14px; border-radius:10px;
  background:var(--soft); border:1px solid var(--line);
  color:var(--ink2); font-size:13px; line-height:1.45;
}
.rz-qty-unit{font-size:13px; color:var(--ink3); margin-left:8px;}
/* ---- wishlist card extras (snippets/wishlist.tpl) ---- */
.rz-card__price-wrap{margin-top:auto; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;}
.rz-card__wl-options{display:flex; flex-direction:column; gap:8px; margin:10px 0; font-size:13.5px; color:var(--ink2);}
.rz-card__wl-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
/* ---- contact consent / captcha ---- */
.rz-contact__consent{margin:16px 0;}
.rz-contact__captcha{margin:12px 0;}
.rz-contact__consent.has-error,.rz-contact__captcha.has-error{color:var(--red);}
/* ---- compare header stars ---- */
.rz-comphead__stars{color:var(--star); font-size:12px; margin-bottom:6px;}
/* ---- cart / checkout column wrappers ---- */
.rz-cart__main,.rz-cogrid__main{min-width:0;}
.rz-summary__body{display:block;}
/* ---- footer newsletter children (only render when enabled) ---- */
.rz-newsletter-copy{min-width:0;}
.rz-newsletter-form{min-width:0;}
/* ---- mobile search panel (layout/header_nav_search.tpl) ---- */
.rz-search-panel{padding:12px 16px; background:var(--soft); border-bottom:1px solid var(--line);}
.rz-search-panel form{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line2); border-radius:999px; padding:0 8px 0 16px;}
.rz-search-panel input{flex:1; min-width:0; border:none; background:none; outline:none; padding:11px 0;}

/* ============================================================================
   the stock template BUTTON BRIDGE — the stock template paints .btn-primary with the accent colour, so its
   product sliders / boxes showed bright-red "In den Warenkorb" buttons that
   clash with the design (here red is reserved for sale badges & accents; the
   primary CTA is ink).
   ============================================================================ */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled),
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active{
  background-color:var(--ink) !important; border-color:var(--ink) !important; color:#fff !important; box-shadow:none !important;}
.btn-primary:hover,.btn-primary:focus{
  background-color:#000 !important; border-color:#000 !important; color:#fff !important; box-shadow:none !important;}
.btn-outline-primary{border-color:var(--line2) !important; color:var(--ink) !important; background:#fff !important;}
.btn-outline-primary:hover,.btn-outline-primary:focus{
  background-color:var(--ink) !important; border-color:var(--ink) !important; color:#fff !important;}
/* the stock template product tiles inside sliders/boxes — soften to match the card design */
.productbox,.product-box{border-radius:16px; border-color:var(--line);}

/* password reveal toggle (JTL core injects [data-toggle-password] into password
   fields) — it was rendering as a red box with "•••". Make it a quiet grey icon
   sitting inside the field, turning ink on hover. */
[data-toggle-password]{
  background:none !important; border:0 !important; box-shadow:none !important;
  color:var(--ink3) !important; width:auto !important; height:auto !important;
  min-width:0 !important; padding:4px !important; right:12px !important; border-radius:6px !important;}
[data-toggle-password] *,[data-toggle-password] i,[data-toggle-password] svg{
  color:var(--ink3) !important; fill:currentColor !important; background:none !important;
  border:0 !important; box-shadow:none !important; font-size:14px !important;}
[data-toggle-password]:hover,[data-toggle-password]:hover *{color:var(--ink) !important;}
/* give the password inputs room so the toggle never overlaps typed characters */
.register-form-account-password .form-control,
.register-form-account-password-repeat .form-control,
#password,#password2,#neuesPasswort1,#neuesPasswort2,#passwort,input[type="password"].form-control{padding-right:2.6rem !important;}

/* ============================================================================
   the stock template FORM DE-SKIN — make every Bootstrap-rendered form control look
   Razan, so forms the design didn't hand-rebuild (checkout customer data,
   register, address, payment) stop resembling the stock template. Bespoke rz-* controls use
   their own classes and are untouched.
   ============================================================================ */
/* text inputs / selects / textareas */
.form-control,.custom-select,select.form-control,textarea.form-control,
.input-group .form-control{
  border:1px solid var(--line2) !important; border-radius:10px !important;
  background-color:#fff !important; color:var(--ink) !important;
  box-shadow:none !important; min-height:48px; padding:14px 16px !important; font-size:15px;}
textarea.form-control{min-height:120px;}
.form-control:focus,.custom-select:focus,textarea.form-control:focus{
  border-color:var(--ink) !important; box-shadow:0 0 0 3px rgba(27,26,22,.08) !important; outline:none !important;}
.form-control::placeholder{color:#a29d90 !important;}
.custom-select{background-position:right 14px center !important;}
/* floating / plain labels */
.col-form-label,.form-label-group > label,label.control-label{color:var(--ink2) !important; font-weight:500;}
/* buttons — pills, ink primary, ghost secondary, no red. NOTE: the prior skin
   paints these with `background:var(--grad)` (a RED gradient IMAGE), so we must
   override `background` (shorthand) + null the image, not just background-color. */
.btn{border-radius:999px !important; font-weight:600 !important; box-shadow:none !important; letter-spacing:0; transform:none !important;}
.btn-primary,.btn-primary:active,.btn-primary.active,.btn-secondary,
.btn-success,.btn-info,.btn-buy,.add-to-cart,.btn-add-to-cart{
  background:var(--ink) !important; background-image:none !important; background-color:var(--ink) !important;
  border:1px solid var(--ink) !important; color:#fff !important; box-shadow:none !important;}
.btn-primary:hover,.btn-primary:focus,.btn-secondary:hover,.btn-secondary:focus,
.btn-success:hover,.btn-info:hover,.btn-buy:hover,.add-to-cart:hover,.btn-add-to-cart:hover{
  background:#000 !important; background-image:none !important; background-color:#000 !important; border-color:#000 !important; color:#fff !important; box-shadow:none !important;}
/* kill the leftover "shine sweep" pseudo the old skin added to primary buttons */
.btn-primary:not(.dropdown-toggle)::after{content:none !important; display:none !important;}
.btn-outline-primary,.btn-outline-secondary,.btn-outline-dark,.btn-light,.btn-default{
  background-color:#fff !important; border:1px solid var(--line2) !important; color:var(--ink) !important;}
.btn-outline-primary:hover,.btn-outline-secondary:hover,.btn-outline-dark:hover,.btn-light:hover,.btn-default:hover{
  background-color:var(--ink) !important; border-color:var(--ink) !important; color:#fff !important;}
.btn-link{color:var(--ink) !important; text-decoration:underline; font-weight:500;}
.btn-link:hover{color:var(--red) !important;}
/* Bootstrap custom checkboxes + radios — checked state was red, make it ink */
.custom-control-label::before{border:1.5px solid var(--line2) !important; background:#fff !important; background-image:none !important; box-shadow:none !important;}
/* checked state was a red gradient IMAGE — override background + null the image */
.custom-control-input:checked ~ .custom-control-label::before{background:var(--ink) !important; background-image:none !important; background-color:var(--ink) !important; border-color:var(--ink) !important;}
.custom-control-input:focus ~ .custom-control-label::before{box-shadow:0 0 0 3px rgba(27,26,22,.12) !important; border-color:var(--ink) !important;}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before{border-color:var(--ink3) !important;}
.custom-checkbox .custom-control-label::before{border-radius:6px !important;}
.custom-radio .custom-control-label::before{border-radius:999px !important;}
.custom-control-label{color:var(--ink2) !important;}
/* legacy plain checkbox/radio accent */
input[type="checkbox"],input[type="radio"]{accent-color:var(--ink);}
/* bootstrap-select (dropdown) button → clean field */
.bootstrap-select > .dropdown-toggle,.bootstrap-select button.btn{
  background:#fff !important; border:1px solid var(--line2) !important; border-radius:10px !important;
  color:var(--ink) !important; box-shadow:none !important; min-height:46px;}
/* validation: keep error red (that's meaningful), just soften the field */
.has-error .form-control,.form-control.is-invalid,.is-invalid{border-color:var(--red) !important;}
.form-error-msg,.invalid-feedback{color:var(--red) !important;}
/* the base theme paints a red SVG "!" icon INSIDE every invalid field (+ forces a big
   padding-right). It reads as a stray red blob at the field's right edge. Drop it in the
   rz forms — the red border above + the message below already signal the error clearly. */
.rz-scope .form-control.is-invalid,.rz-scope .was-validated .form-control:invalid,
.rz-scope select.form-control.is-invalid,.rz-scope .was-validated select.form-control:invalid,
.rz-checkout .form-control.is-invalid,.rz-checkout .was-validated .form-control:invalid,
.rz-scope .has-error .form-control,.rz-checkout .has-error .form-control{
  background-image:none !important; padding-right:16px !important;}
/* the jtl-validate message (appended .form-error-msg) → tidy red line under the field */
.rz-scope .form-error-msg,.rz-checkout .form-error-msg{
  width:100%; font-size:12.5px; line-height:1.4; margin-top:5px; color:var(--red) !important;}
/* the stock template alerts → soft cards instead of loud Bootstrap bars */
.alert{border-radius:12px !important; border:1px solid var(--line) !important; font-size:14.5px;}
.alert-danger{background:#fdecec !important; border-color:#f6c9c9 !important; color:#9a1b1b !important;}
.alert-success{background:var(--ok-bg) !important; border-color:#bfe4cc !important; color:var(--ok) !important;}
.alert-info,.alert-warning{background:var(--soft) !important; color:var(--ink2) !important;}
/* input-group addons (currency, etc.) on the stock template forms */
.input-group-text{background:var(--soft) !important; border:1px solid var(--line2) !important; color:var(--ink3) !important;}

/* ---- Klarna / payment "Ratenzahlung" note the plugin injects into the cart top.
   It's plugin markup (not in the theme), so we catch its common containers and
   turn the plain text into a prominent branded callout with a Klarna-pink accent. ---- */
/* scoped to .rz-cart-page so it can't accidentally box the Klarna PAYMENT option in checkout */
.rz-cart-page [class*="klarna"],.rz-cart-page [class*="Klarna"],.rz-cart-page klarna-placement,
.rz-cart-page .payment-hint,.rz-cart-page .zahlungshinweis,.rz-cart-page .basket-payment-note{
  display:block; background:#fff7fb; border:1px solid #ffc7e6; border-left:4px solid #ffb3c7;
  border-radius:14px; padding:16px 20px 16px 52px; margin:0 0 22px; position:relative;}
.rz-cart-page [class*="klarna"]::before,.rz-cart-page .payment-hint::before,.rz-cart-page .zahlungshinweis::before{
  content:"💳"; position:absolute; left:18px; top:16px; font-size:20px; line-height:1;}
.rz-cart-page [class*="klarna"] h1,.rz-cart-page [class*="klarna"] h2,.rz-cart-page [class*="klarna"] h3,
.rz-cart-page [class*="klarna"] strong,.rz-cart-page [class*="klarna"] b,
.rz-cart-page .payment-hint h2,.rz-cart-page .zahlungshinweis h2{
  font-family:var(--head); font-size:16px !important; font-weight:700 !important; color:var(--ink) !important; margin:0 0 4px !important;}
.rz-cart-page [class*="klarna"] p,.rz-cart-page .payment-hint p,.rz-cart-page .zahlungshinweis p{
  color:var(--ink2) !important; font-size:13.5px !important; line-height:1.55 !important; margin:0 !important;}
/* the admin/OPC cart note (the Klarna "Ratenzahlung" text set in the shop admin) is wrapped
   in .rz-cart-note by basket/index.tpl — turn it into a prominent branded callout. */
.rz-cart-page .rz-cart-note:empty{display:none;}
.rz-cart-page .rz-cart-note:not(:has(p)){display:none;}
.rz-cart-page .rz-cart-note{
  background:var(--soft); border:1px solid var(--line2); border-left:4px solid var(--red);
  border-radius:14px; padding:15px 20px 15px 54px; margin:0 0 22px; position:relative;}
.rz-cart-page .rz-cart-note::before{
  content:"💳"; position:absolute; left:18px; top:14px; font-size:22px; line-height:1;}
.rz-cart-page .rz-cart-note p{color:var(--ink2); font-size:13.5px; line-height:1.55; margin:0;}
.rz-cart-page .rz-cart-note p:first-child{font-family:var(--head); color:var(--ink); font-weight:700; margin:0 0 4px;}
.rz-cart-page .rz-cart-note p:first-child span,.rz-cart-page .rz-cart-note p:first-child b{
  font-size:16px !important; font-weight:700 !important; color:var(--ink) !important;}

/* ---- PDP gallery thumbnail slider: the prior skin painted the arrows + scrollbar
   red (var--primary/--grad). Make them quiet ink chrome. ---- */
.rz-product-slider-arrow{color:var(--ink) !important; background:#fff !important; background-image:none !important;
  border:1px solid var(--line2) !important; box-shadow:0 2px 10px rgba(0,0,0,.10) !important;}
.rz-product-slider-arrow:hover{background:var(--ink) !important; background-image:none !important; color:#fff !important; border-color:var(--ink) !important;}
.rz-product-slider-track::-webkit-scrollbar{height:0 !important;}          /* rail uses the arrows, not a red bar */
.rz-product-slider-track::-webkit-scrollbar-thumb{background:var(--line2) !important;}
.rz-product-slider-track::-webkit-scrollbar-track{background:transparent !important;}
.rz-product-slider-track{scrollbar-width:none;}
.rz-product-slide.is-selected{border-color:var(--ink) !important;}

/* ---- gallery: full-size images in a horizontal scroll-snap filmstrip ---------------
   Each slide is the WHOLE product image (contain, nothing cropped) at the stage size;
   swipe / scroll horizontally or tap a thumbnail (razan.js scrolls the strip). ------- */
.rz-gallery-stage-wrap{position:relative;}
.rz-gallery-stage{
  display:flex !important; flex-wrap:nowrap !important;
  overflow-x:auto !important; overflow-y:hidden !important;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
  aspect-ratio:1/1 !important; height:auto !important; background:#fff; border-radius:16px;
  scrollbar-width:thin; scrollbar-color:var(--line2) transparent;
}
.rz-gallery-slide{
  flex:0 0 100% !important; width:100% !important; height:100%; margin:0; overflow:hidden;
  scroll-snap-align:center; display:flex; align-items:center; justify-content:center;
}
/* hover-zoom (magnifier): razan.js scales the image + follows the cursor on mouseover */
.rz-gallery-stage-img{width:100% !important; height:100% !important; object-fit:contain !important; display:block;
  transition:transform .18s ease; cursor:zoom-in;}
.rz-gallery-stage::-webkit-scrollbar{height:6px;}
.rz-gallery-stage::-webkit-scrollbar-thumb{background:var(--line2); border-radius:6px;}
.rz-gallery-stage::-webkit-scrollbar-track{background:transparent;}
.rz-product-slide{flex:0 0 auto !important; width:120px !important; height:auto !important; aspect-ratio:16/9 !important; overflow:hidden; border-radius:10px; border:1px solid var(--line); background:#fff; opacity:.72; transition:opacity .15s ease, border-color .15s ease;}
/* selection: NO thick border — a thin ink hairline + full opacity marks the active thumb */
.rz-product-slide.is-selected,.rz-product-slide.is-active{border:1px solid var(--ink) !important; opacity:1;}
.rz-product-slide:hover{opacity:1;}
.rz-product-slide-img{width:100% !important; height:100% !important; object-fit:cover !important;}

/* ---- stock status: NOVA's .status-N painted "Sofort verfügbar" orange (--warning)
   with !important. Available states read green (matching the dot), out-of-stock red. ---- */
.rz-stock .status-1,.rz-stock .status-2,.rz-stock .rz-stock__on,.rz-stock__on{color:var(--ok) !important;}
.rz-stock .status-3{color:var(--redink) !important;}
.rz-stock .rz-stock__dot{background:var(--ok);}
.rz-stock i,.rz-stock .fas,.rz-stock .fa{color:var(--ok) !important;}
/* "Sofort verfügbar" & co: no dot/icon, text flush-left (per request) */
.rz-stock__dot{display:none !important;}
.rz-stock i,.rz-stock .fa,.rz-stock .fas,
.delivery-status i,.delivery-status .fa,.delivery-status .fas,
.status .fa-truck{display:none !important;}
.rz-stock,.delivery-status{justify-content:flex-start !important; text-align:left !important;}
/* "zzgl. Versand" and other inline info links in the buy box → ink, not red */
.rz-buy a,.rz-buy__tax a,.product-info a.popup{color:var(--ink2) !important; text-decoration:underline;}
.rz-buy a:hover,.rz-buy__tax a:hover{color:var(--red) !important;}

/* ============================================================================
   PDP BRIDGE — the buy-box/variations/stock/trust/facts are ported to rz-* by
   markup; the gallery, tabs, reviews & price stay the stock template (JS-coupled) and are
   skinned here to the handoff look.
   ============================================================================ */
/* handoff heading font on the product page (it isn't inside .rz-scope) */
.product-detail h1,.rz-buy h1,.rz-pdp h1,.rz-pdp h2,.rz-pdp h3,
#product-tabs h1,#product-tabs h2,#product-tabs h3,.product-info h1{font-family:var(--head) !important; letter-spacing:-.02em;}
.rz-buy h1,.product-info h1.product-title,.product-detail .product-title{font-size:clamp(21px,2.7vw,30px) !important; font-weight:600 !important;}
/* PDP price → big Schibsted */
.rz-buy__price .price,.product-offer .price,.product-detail .price .price{font-family:var(--head) !important; font-weight:700 !important; font-size:34px !important; color:var(--ink) !important;}
.product-offer .price .strike-price,.product-detail .price del,.old-price{color:var(--ink3) !important; text-decoration:line-through; font-size:18px !important; font-weight:400 !important;}
/* rating stars gold */
.product-detail .rating .fa-star,.product-detail .rating .fas.fa-star,.rz-buy__meta .fa-star,.rating-stars .checked,.stars .active{color:var(--star) !important;}
/* the stock template {tabs} → rz-tabs */
#product-tabs .nav-tabs,.product-tabs .nav-tabs,#tabAccordion .nav-tabs{border-bottom:1px solid var(--line); gap:6px; flex-wrap:nowrap; overflow-x:auto; margin-bottom:0;}
#product-tabs .nav-tabs .nav-link,.product-tabs .nav-tabs .nav-link{border:none !important; border-bottom:2px solid transparent !important; color:var(--ink3) !important; font-weight:600 !important; font-size:15px !important; padding:14px 18px !important; background:none !important; border-radius:0 !important;}
#product-tabs .nav-tabs .nav-link.active,.product-tabs .nav-tabs .nav-link.active{color:var(--ink) !important; border-bottom-color:var(--ink) !important;}
#product-tabs .tab-content,.product-tabs .tab-content{padding-top:24px; color:var(--ink2); line-height:1.7;}
#product-tabs .tab-content h2,#product-tabs .tab-content h3{color:var(--ink); font-family:var(--head);}
/* review cards */
.product-detail .review,.vote-item,.comment-item{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:16px;}
/* delivery/estimated badge already handled by .rz-stock */

/* ============================================================================
   CART / CHECKOUT BRIDGE — completes the interactive behaviour the static
   handoff couldn't show (native radio/checkbox hidden + :checked states) and
   skins JTL's macro-generated address / coupon / credit / comment form controls
   to the rz look. All selectors are scoped under rz components, so no other
   page is affected. Added for the cart+checkout port.
   ============================================================================ */

/* --- radio cards (shipping / payment): real input drives the card state --- */
.rz-radio input[type="radio"]{position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;}
.rz-radio:has(input:checked){border:2px solid var(--ink); background:#fff;}
.rz-radio:has(input:checked) .rz-radio__dot{border:6px solid var(--ink);}
.rz-radio:has(input:focus-visible){outline:2px solid var(--ink); outline-offset:2px;}
.rz-radio__main img{display:inline-block; max-height:22px; width:auto; vertical-align:middle; margin-right:6px;}
.rz-radio__tag img{display:block; max-height:22px; width:auto;}
.rz-radio__main .desc{display:block; font-size:12.5px; color:var(--ink3); margin-top:3px;}
.rz-radio__tag small{display:block; font-weight:400; color:var(--ink3);}

/* --- inline check (legal / plausi checkboxes): real input drives the box --- */
.rz-inline-check input[type="checkbox"],.rz-check input[type="checkbox"]{position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;}
.rz-inline-check input[type="checkbox"]:checked + .rz-check__box,
.rz-check input[type="checkbox"]:checked + .rz-check__box{background:var(--ink); border-color:var(--ink);}
.rz-inline-check input[type="checkbox"]:checked + .rz-check__box::after,
.rz-check input[type="checkbox"]:checked + .rz-check__box::after{content:"\2713";}
.rz-inline-check input[type="checkbox"]:focus-visible + .rz-check__box{outline:2px solid var(--ink); outline-offset:2px;}
.rz-inline-check__text{flex:1; min-width:0;}
.rz-inline-check__desc{font-size:12px; color:var(--ink3); margin:6px 0 0 29px;}
.snippets-checkbox-wrapper + .snippets-checkbox-wrapper{margin-top:6px;}
.rz-inline-check .moreinfo a,.rz-inline-check .optional{color:var(--ink3);}

/* --- shipping-cost estimator (cart): country · PLZ · button on one aligned line ---
   The fields sit in a .label-slide form, and the label-above bridge stacks each label
   over its input; the country select was label-less, so the labelled PLZ column was
   taller and dropped the PLZ input below the select + button ("the line is disturbed").
   Country now has a matching label (tpl), and the row bottom-aligns at one control
   height so all three line up. */
.shipping-calculator-main .form-row{align-items:flex-end; row-gap:12px;}
.shipping-calculator-main .form-group{margin-bottom:0;}
.shipping-calculator-main .custom-select,
.shipping-calculator-main .form-control{height:46px;}
.shipping-calculator-main .btn{height:46px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;}
/* the PLZ field is fine at a natural width — don't let size="8" pinch it or crowd the
   validation state */
.shipping-calculator-main #plz{width:100%; min-width:0;}
.shipping-calculator-main .invalid-feedback,.shipping-calculator-main .valid-feedback{margin-top:6px;}
@media (max-width:767.98px){
  .shipping-calculator-main .btn{width:100%;}
}

/* --- cart line-item extras (top actions, meta list, qty label) --- */
.rz-citem__top-main{min-width:0;}
.rz-citem__topactions{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.rz-citem__topactions .rz-citem__rm{background:none;}
ul.rz-citem__var{margin-top:2px;}
.rz-citem__var li + li{margin-top:2px;}
.rz-citem__var strong{font-weight:600; color:var(--ink2);}
.rz-citem__qty{font-size:13px; color:var(--ink2);}
.rz-citem__qty .rz-btn{margin-left:10px;}

/* --- checkout order-summary sidebar completion --- */
.rz-cosum__row .rz-coitem__body{flex:1; min-width:0;}
.rz-cosum__row .rz-coitem__body b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;}
.rz-cosum__price{margin-left:auto; font-weight:700; font-size:13.5px; white-space:nowrap;}
.rz-cosum__list .m img{width:100%; height:100%; object-fit:cover;}

/* --- confirmation item list completion --- */
.rz-coitems__h{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.rz-coitems__h a{font-size:13px; font-weight:400; text-decoration:underline;}
.rz-coitem__media img{width:100%; height:100%; object-fit:cover;}
.rz-coitem__price{margin-left:auto; font-weight:700; white-space:nowrap;}
.rz-cocard .title{font-weight:700; color:var(--ink);}
.rz-cocard__h a{white-space:nowrap;}
.rz-co-legal{font-size:13px; color:var(--ink2); margin:18px 0 12px; line-height:1.6;}
.rz-co-legal a{text-decoration:underline;}
.rz-co-checks{margin:0 0 18px;}

/* --- coupon toggle caret rotates when the collapse is open --- */
.rz-coupon-toggle[aria-expanded="true"] .rz-caret{transform:rotate(180deg);}
.rz-coupon-toggle .rz-caret{transition:transform .2s ease;}

/* --- JTL macro form controls inside checkout → rz-input look --- */
.rz-checkout .form-control,
.rz-checkout .custom-select,
.rz-checkout select.form-control,
.rz-checkout textarea{
  width:100%; border:1px solid var(--line2); border-radius:10px; padding:14px 16px;
  outline:none; background-color:#fff; color:var(--ink); font-size:15px; height:auto; box-shadow:none;
}
/* register / account / cart fields use the base theme padding, which is tight — the text
   hugged the field edges. Give them the same comfortable inner spacing; height:auto so the
   extra padding grows the field instead of clipping the text. */
.rz-scope .form-control,.rz-scope .custom-select,.rz-scope textarea{
  padding:14px 16px; height:auto; min-height:48px;}
/* the cart estimator keeps its fixed 46px row height (three controls aligned on one line) —
   pin padding that fits that height so nothing clips, overriding the comfortable default. */
.shipping-calculator-main .form-control,.shipping-calculator-main .custom-select{
  height:46px !important; min-height:0 !important; padding:10px 14px !important;}
.rz-checkout .custom-select{padding-right:36px;}
.rz-checkout .form-control:focus,
.rz-checkout .custom-select:focus,
.rz-checkout textarea:focus{border-color:var(--ink); box-shadow:none;}
.rz-checkout .form-group{margin-bottom:14px;}
.rz-checkout .form-group label,
.rz-checkout .form-group .col-form-label{font-size:13px; font-weight:600; color:var(--ink2); margin-bottom:6px; display:inline-block;}
.rz-checkout .h2{font-family:var(--head); font-size:20px; font-weight:600; margin-bottom:14px; letter-spacing:-.02em;}
.rz-checkout .h3{font-family:var(--head); font-size:15px; font-weight:700; margin-bottom:10px;}
.rz-checkout fieldset.rz-panel legend,
.rz-checkout .inc-billing-address-form{border:none; padding:0; margin:0;}
/* "Als Neukunde fortfahren" register panel + its inner billing fieldset → no drop-shadow (per request) */
.rz-checkout .checkout-register-form,
.rz-checkout .inc-billing-address-form,
.rz-checkout fieldset.inc-billing-address-form{box-shadow:none !important;}
/* no border on ANY checkout fieldset (e.g. the unclassed "Kontaktdaten" section) */
.rz-checkout fieldset{border:0 !important; min-width:0;}
.rz-checkout hr{border:none; border-top:1px solid var(--line); margin:16px 0;}
.rz-checkout .form-error-msg,.rz-checkout .invalid-feedback{color:var(--red); font-size:12.5px; margin-top:4px;}
.rz-checkout .inc-billing-address li,.rz-checkout .inc-delivery-address li{margin:0; line-height:1.6; color:var(--ink2); font-size:14px;}

/* --- ONE field treatment: label above the input, everywhere ----------------
   the stock template's {form} macro stamps .label-slide on every form. Its CSS absolutely-
   positions each label into the field and slides it down to double as a
   placeholder while the input is empty — but <select> and typeahead fields never
   match :placeholder-shown, so their labels stay notched in the border. One form
   therefore shows three different field looks at once (notched / placeholder-ish
   / bare). The label-above rule above already asked for the rz treatment, but
   the stock template's `.label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox)
   label` is (0,4,1) and out-specifies it — these selectors add a wrapper class to
   win. Scoped to rz page wrappers on purpose: the header search field
   (.main-search.label-slide) keeps its floating label. */
.rz-checkout .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox),
.rz-scope .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox){
  display:flex; flex-direction:column; position:relative;} /* relative, NOT static: the
  formgroup is the positioning context for validation tooltips/messages — static let them
  float to the wrong field (stray red marks over unrelated / optional fields). */
/* the stock template emits <input> BEFORE <label> (its slide rule relies on `~ label`), so
   static positioning alone would drop every label underneath its field. */
.rz-checkout .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) > label,
.rz-scope .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) > label{
  order:-1; position:static; transform:none; background:transparent; padding:0;
  font-size:13px; font-weight:600; line-height:1.3; color:var(--ink2);
  margin:0 0 6px; max-width:none; overflow:visible; white-space:normal;
  text-overflow:clip; pointer-events:auto; cursor:pointer; z-index:auto;}
/* the white bar that used to mask the border behind a notched label */
.rz-checkout .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) > label::after,
.rz-scope .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) > label::after{
  content:none; display:none;}
/* neutralise the slid-down state (top / font-size / colour) */
.rz-checkout .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) .form-control:placeholder-shown:not(:focus) ~ label,
.rz-scope .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) .form-control:placeholder-shown:not(:focus) ~ label{
  top:auto; font-size:13px; color:var(--ink2);}

/* --- section headings: quiet caps instead of the repeated red bar ----------
   custom.css gives every bare legend/.h2/.h3 a 3px red-gradient ::before bar. In
   a checkout step that motif fires five-plus times and dominates the page. Here
   the bar is dropped and the sub-section level (.h3 — "Name", "Rechnungsadresse",
   "Kontaktdaten") takes the same caps treatment as the filter-sidebar headings,
   so the two read as one system. .card-title is excluded: it is ALSO an .h3
   ("Ich bin bereits Kunde") but is the peer of the other column's .h2, so capping
   it would break the hierarchy between the two columns. Scoped to rz form pages —
   blog/news/order-detail headings keep the existing motif. */
.rz-checkout legend:not([class*="rz-"])::before,
.rz-checkout form .h2:not([class*="rz-"])::before,
.rz-checkout form .h3:not([class*="rz-"])::before,
.rz-checkout fieldset > .h2:not([class*="rz-"])::before,
.rz-checkout fieldset > .h3:not([class*="rz-"])::before,
.rz-scope form .h2:not([class*="rz-"])::before,
.rz-scope form .h3:not([class*="rz-"])::before,
.rz-scope fieldset > .h2:not([class*="rz-"])::before,
.rz-scope fieldset > .h3:not([class*="rz-"])::before{content:none; display:none;}
.rz-checkout legend:not([class*="rz-"]),
.rz-checkout form .h2:not([class*="rz-"]),
.rz-checkout form .h3:not([class*="rz-"]),
.rz-scope form .h2:not([class*="rz-"]),
.rz-scope form .h3:not([class*="rz-"]){padding-left:0;}
/* sub-section level → caps */
.rz-checkout form .h3:not([class*="rz-"]):not(.card-title),
.rz-checkout fieldset > .h3:not([class*="rz-"]):not(.card-title),
.rz-scope form .h3:not([class*="rz-"]):not(.card-title),
.rz-scope fieldset > .h3:not([class*="rz-"]):not(.card-title){
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink); margin:26px 0 14px; padding:0 0 9px;
  border-bottom:1px solid var(--line);}
/* first sub-section shouldn't push away from the intro copy */
.rz-checkout form .h3:not([class*="rz-"]):not(.card-title):first-child,
.rz-scope form .h3:not([class*="rz-"]):not(.card-title):first-child{margin-top:0;}

/* --- no card-inside-a-card -------------------------------------------------
   .rz-checkout fieldset (custom.css) paints a full panel: surface + border +
   radius + shadow. step0 nests <fieldset> inside {card}, so the login column
   drew two stacked boxes. Flatten the inner one. */
.rz-checkout .card fieldset,.rz-scope .card fieldset{
  background:none; border:0; box-shadow:none; padding:0; margin:0; border-radius:0;}

/* --- login button row ------------------------------------------------------
   "Passwort vergessen" sits in a col-lg-6 inside the narrow (col-lg-4) login
   card, which broke it mid-word across three lines. Stack the two actions and
   forbid mid-word breaking. */
.customer-login-buttons .row > [class*="col-"]{flex:0 0 100%; max-width:100%;}
.customer-login-buttons-forgot{
  word-break:normal; overflow-wrap:normal; hyphens:none;
  padding-left:0; padding-right:0; text-align:left; margin-top:4px;}

/* address / method summary text on confirmation */
.rz-cocard .inc-billing-address,.rz-cocard .inc-delivery-address{margin:2px 0 0;}

/* --- overrides for the superseded checkout/cart skin still in custom.css --- */
/* keep a single card per step: flatten JTL address fieldsets nested in a panel */
.rz-scope .rz-panel fieldset,.rz-scope .rz-cocard fieldset{background:none; border:0; box-shadow:none; padding:0; margin:0; border-radius:0;}
/* the delete "×" is a required JTL hook (.cart-items-delete-button) that custom.css
   paints as a pill button with !important — restore the clean glyph */
.rz-scope .rz-citem__rm.cart-items-delete-button{color:var(--ink3) !important; background:none !important;
  border-radius:0 !important; width:auto !important; height:auto !important; padding:0 !important; display:inline;}
.rz-scope .rz-citem__rm.cart-items-delete-button:hover{color:var(--red) !important; background:none !important;}

/* ============================================================================
   PDP DESCRIPTION + SPECIFICATIONS — design polish (design-handoff system)
   Two-column on desktop: readable description/safety on the left, a "spec card"
   (attributes) floating on the right. Branded bullets, clean rows, pill values.
   ============================================================================ */

/* readable measure for the whole info area */
#product-tabs .tab-content{ max-width:1100px; }

/* ---- description body ---- */
#product-tabs .tab-content .desc{ color:var(--ink2); line-height:1.8; font-size:15px; max-width:820px; }
#product-tabs .tab-content .desc > p{ margin:0 0 15px; }
#product-tabs .tab-content .desc strong{ color:var(--ink); font-weight:700; }
#product-tabs .tab-content .desc h1,
#product-tabs .tab-content .desc h2,
#product-tabs .tab-content .desc h3,
#product-tabs .tab-content .desc h4{ font-family:var(--head); color:var(--ink); margin:26px 0 12px; line-height:1.25; }
/* bulleted spec list → branded red dots */
#product-tabs .tab-content .desc ul{ list-style:none; padding:0; margin:2px 0 20px; display:grid; gap:11px; }
#product-tabs .tab-content .desc ul li{ position:relative; padding-left:26px; color:var(--ink2); }
#product-tabs .tab-content .desc ul li::before{
  content:""; position:absolute; left:3px; top:.6em; width:7px; height:7px; border-radius:50%;
  background:var(--red); box-shadow:0 0 0 3px rgba(248,8,8,.12);
}
/* numbered list → branded counters */
#product-tabs .tab-content .desc ol{ list-style:none; padding:0; margin:2px 0 20px; counter-reset:rzli; display:grid; gap:11px; }
#product-tabs .tab-content .desc ol li{ position:relative; padding-left:32px; counter-increment:rzli; color:var(--ink2); }
#product-tabs .tab-content .desc ol li::before{
  content:counter(rzli); position:absolute; left:0; top:-1px; width:20px; height:20px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--soft); color:var(--red); font-family:var(--head); font-weight:700; font-size:11px;
}

/* ---- product-safety / manufacturer info → soft card ---- */
.product-safety{
  margin:24px 0; padding:20px 24px; background:var(--soft);
  border:1px solid var(--line); border-radius:16px;
}
.product-safety h1,.product-safety h2,.product-safety h3{
  font-family:var(--head); font-size:16px; color:var(--ink); margin:0 0 12px;
  display:flex; align-items:center; gap:10px;
}
.product-safety h2::before{
  content:"\f3ed"; font-family:"Font Awesome 5 Free"; font-weight:900; color:var(--red); font-size:14px;
}
.product-safety strong{ color:var(--ink); }
.product-safety p{ color:var(--ink2); line-height:1.65; margin:6px 0 0; font-size:14px; }
.manufacturer-info p,.product-safety .manufacturer-info p{ color:var(--ink2); }

/* ---- attributes → spec card ---- */
.product-attributes.rz-specs{
  max-width:600px; margin-top:30px;
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:var(--surface); box-shadow:0 1px 2px rgba(27,26,22,.05), 0 6px 20px rgba(27,26,22,.05);
}
.rz-specs__title{
  padding:15px 20px; font-family:var(--head); font-weight:700; font-size:14px; color:var(--ink);
  border-bottom:1px solid var(--line); background:var(--soft);
  letter-spacing:.01em;
}
.product-attributes.rz-specs table{ width:100%; margin:0; border:0; background:none; }
.product-attributes.rz-specs table tr{ background:none !important; }
.product-attributes.rz-specs table tr + tr td{ border-top:1px solid var(--line2); }
.product-attributes.rz-specs td{ padding:13px 20px; border:0 !important; vertical-align:middle; }
.product-attributes.rz-specs td.h6{
  color:var(--ink3) !important; font-weight:500 !important; font-size:13.5px !important;
  width:48%; margin:0; text-transform:none; letter-spacing:0; font-family:var(--body);
}
.product-attributes.rz-specs td:not(.h6){
  text-align:right; font-weight:600; color:var(--ink); font-size:14.5px; font-family:var(--head);
}
.product-attributes.rz-specs .attr-characteristic,
.product-attributes.rz-specs .attr-characteristic a{ text-align:right; }
.product-attributes.rz-specs .badge,
.product-attributes.rz-specs .badge-primary{
  display:inline-block; background:var(--soft) !important; color:var(--red) !important;
  border:1px solid var(--line) !important; border-radius:999px !important;
  padding:5px 13px !important; font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
}
.product-attributes.rz-specs .badge:hover{ border-color:var(--red) !important; }
.product-attributes.rz-specs .weight-unit,
.product-attributes.rz-specs .attr-value{ color:var(--ink); }

@media (max-width:991px){
  .product-attributes.rz-specs{ max-width:none; margin-top:24px; }
}
/* inside the Eigenschaften tab: widen a touch, drop the duplicate title (tab already says it) */
#tab-attributes .product-attributes.rz-specs{ max-width:760px; margin-top:4px; }
#tab-attributes .rz-specs__title{ display:none; }

/* ============================================================================
   BEWERTUNGEN (reviews) tab — bespoke redesign
   ============================================================================ */
.reviews{ max-width:880px; }
.reviews > p{ color:var(--ink3); font-size:13.5px; margin:18px 0 10px; }
.reviews .subheadline{ font-family:var(--head); font-weight:700; font-size:15px; color:var(--ink); margin-bottom:12px; }

/* top row — average-rating summary card + "write a review" */
#reviews-overview{ align-items:stretch; margin-bottom:4px; }
#reviews-overview .card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; height:100%;
  box-shadow:0 1px 2px rgba(27,26,22,.05), 0 6px 20px rgba(27,26,22,.05); padding:20px 22px;
}
#reviews-overview .card-title{ margin:0 0 6px; padding:0; border:0; }
.reviews #ratingDropdown.btn-link{
  padding:0 !important; border:0; background:none; text-decoration:none !important;
  color:var(--ink) !important; font-family:var(--head); font-weight:700; font-size:17px;
  display:inline-flex; align-items:center; gap:9px;
}
.reviews #ratingDropdown span{ color:var(--ink3); font-weight:500; font-size:14px; }
.reviews .dropdown-toggle::after{ color:var(--ink3); margin-left:2px; }

/* gold stars throughout the reviews block */
.reviews .fa-star,.reviews .fas.fa-star,.reviews .rating .fa-star{ color:var(--star) !important; }

/* rating breakdown popover (5★ ▓▓▓ 12) */
.reviews .dropdown-menu{ border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-drop); padding:14px 16px; min-width:264px; }
.reviews .dropdown-body .row{ align-items:center; margin-bottom:7px; font-size:13px; color:var(--ink2); }
.reviews .progress{ height:8px; border-radius:999px; background:var(--soft); overflow:hidden; }
.reviews .progress-bar{ background:var(--star); }

/* "write a review" → rz ink pill */
.reviews .btn-outline-primary,.reviews .btn-outline-secondary{
  border-radius:999px !important; border:1px solid var(--ink) !important; color:var(--ink) !important;
  background:#fff !important; font-weight:600 !important; font-size:14px !important; padding:10px 24px !important; box-shadow:none !important;
}
.reviews .btn-outline-primary:hover{ background:var(--ink) !important; color:#fff !important; }
.reviews .verified-purchase-notice{ display:inline-block; width:auto; margin:6px 0 14px; }

/* individual review cards */
.reviews .card.review,.reviews .card.reviews-mosthelpful{
  background:var(--surface); border:1px solid var(--line) !important; border-radius:16px !important;
  padding:20px 22px !important; margin-bottom:14px; box-shadow:none !important;
}
.reviews .card.review .card-body,.reviews .card.reviews-mosthelpful .card-body{ padding:0 !important; background:none !important; }
.reviews .reviews-mosthelpful .card-header{ background:none !important; border:0 !important; padding:0 0 10px !important; }
.reviews .reviews-mosthelpful .card-header .h3{ font-family:var(--head); font-weight:700; font-size:14px; color:var(--ink); text-transform:none; }
.reviews blockquote{ margin:0; padding:0; border:0; }
.reviews blockquote .subheadline{ display:block; font-family:var(--head); font-weight:700; font-size:15.5px; color:var(--ink); margin-bottom:6px; }
.reviews blockquote p,.reviews blockquote [itemprop="reviewBody"]{ color:var(--ink2); line-height:1.65; margin-bottom:12px; font-size:14.5px; }
.reviews .blockquote-footer{ font-size:13px; color:var(--ink3); margin:0; }
.reviews .blockquote-footer::before{ content:none !important; }
.reviews .verified-purchase{ color:var(--ok); font-weight:600; }
.reviews .verified-purchase::before{ content:"\2713\00a0"; }
.reviews .blockquote-divider{ display:inline-block; width:3px; height:3px; border-radius:50%; background:var(--ink3); margin:0 9px 3px; vertical-align:middle; }

/* helpful thumbs */
.reviews .review-helpful{ gap:16px; margin-top:12px; }
.reviews .review-helpful .btn-icon{ border:1px solid var(--line2) !important; border-radius:999px !important; background:#fff !important; color:var(--ink3) !important; }
.reviews .review-helpful .btn-icon.on-list{ border-color:var(--ink) !important; color:var(--ink) !important; }
.reviews .review-helpful-total{ color:var(--ink3); font-size:12.5px; margin-bottom:6px; }
/* shop reply block */
.reviews .review-reply{ margin-top:14px; padding:14px 16px; background:var(--soft); border-radius:12px; }
.reviews .review-reply .subheadline{ font-size:13.5px; color:var(--ink); margin-bottom:4px; }

/* ============================================================================
   CHECKOUT · STEP 1 (Bestellvorgang · Adresse) — login + register redesign
   Fixes: the stock template "label-slide" floats each field label as an absolute white chip
   that clips at card/panel edges ("texts disappear at the edges") and clashes
   on the gray login card. We replace it inside checkout with clean STATIC top
   labels — nothing ever clips — and give the login card + register panel one
   consistent card style. Also: small "Passwort vergessen" link + spaced PayPal.
   ============================================================================ */

/* ---- 1. static, never-clipping field labels (kills the fragile float) ------
   `> label` hits only the floating field label (a direct child of .form-group);
   checkbox/.custom-control-label are nested deeper, so they stay untouched.
   !important beats the stock template's high-specificity :placeholder-shown rules. */
.rz-checkout .form-group > label:not(.custom-control-label){
  position:static !important; transform:none !important; top:auto !important;
  left:auto !important; right:auto !important; z-index:auto !important;
  display:block !important; background:none !important;
  font:600 13px/1.35 var(--body) !important; color:var(--ink2) !important;
  margin:0 0 6px !important; padding:0 !important;
  max-width:none !important; width:auto !important;
  overflow:visible !important; white-space:normal !important;
  text-overflow:clip !important; pointer-events:auto !important;
}
.rz-checkout .form-group > label:not(.custom-control-label):after{ display:none !important; }
/* the placeholder is masked to 0 opacity while the label floats — restore it */
.rz-checkout .form-group .form-control:placeholder-shown:not(:focus)::placeholder{ opacity:1 !important; }
/* "- optionale Angabe" suffix → quiet */
.rz-checkout .form-group > label .optional{ color:var(--ink3); font-weight:400; }
/* empty spacer label on the button group + top-hr contribute nothing → drop */
.rz-checkout .customer-login-buttons > label:not(.custom-control-label){ display:none !important; }
/* comfortable, even spacing between stacked fields */
.rz-checkout .form-group{ margin-bottom:16px; }

/* ---- 2. login card → matches the register panel (white · border · padded) --
   was .card-gray (#f5f7fa) which clashed with the white floating chips. */
.rz-checkout .checkout-existing-customer .card,
.rz-checkout .checkout-existing-customer .card.card-gray{
  background:var(--surface); border:1px solid var(--line);
  border-radius:16px; box-shadow:none;   /* shadow removed per request */
  overflow:visible;
}
.rz-checkout .checkout-existing-customer .card > .card-body{ padding:26px 24px; }
.rz-checkout .checkout-existing-customer .card-title.h3{
  font-family:var(--head); font-size:18px; font-weight:700; color:var(--ink);
  margin:0 0 20px; padding:0; border:0; text-transform:none; letter-spacing:0;
}
/* the login submit button spans the card; forgot link sits below it */
.rz-checkout .customer-login-buttons .btn-primary{ margin-top:2px; }

/* ---- 3. "Passwort vergessen" → small, quiet text link ---------------------- */
.rz-checkout .customer-login-buttons-forgot,
.rz-checkout .customer-login-buttons-forgot.btn,
.rz-checkout a.customer-login-buttons-forgot{
  display:inline-block; width:auto; min-height:0; margin:14px 0 0;
  padding:0 !important; border:0; background:none;
  font-size:13px !important; font-weight:500; line-height:1.3;
  color:var(--ink3) !important; text-align:left; text-decoration:underline;
  white-space:nowrap;
}
.rz-checkout .customer-login-buttons-forgot:hover{ color:var(--red) !important; }

/* ---- 4. PayPal express buttons → vertical gap (or stacked) ----------------- */
.rz-checkout .checkout-existing-customer .paypal-buttons + .paypal-buttons,
.rz-checkout .checkout-existing-customer .paypal-button-container > div + div,
.rz-checkout .checkout-existing-customer [class*="paypal"] + [class*="paypal"],
.rz-checkout .paypal-buttons + .paypal-buttons{
  margin-top:12px !important;
}
.rz-checkout .checkout-existing-customer .paypal-button-container{ display:block; margin-top:14px; }

/* ---- 5. register panel headings → consistent with the login card ----------- */
.rz-checkout .checkout-register-form .h2,
.rz-checkout fieldset.inc-billing-address-form > .h2{
  font-family:var(--head); font-size:20px; font-weight:700; color:var(--ink);
  margin:0 0 4px; padding:0; border:0; text-transform:none; letter-spacing:0;
}
/* first .h3 sub-header (NAME) shouldn't add a big gap after the top rule */
.rz-checkout fieldset.inc-billing-address-form > .h3:first-of-type{ margin-top:14px; }
/* the register panel is a bare <form> (no {card}), so it never got the white card
   treatment the login box has — its fields sat flush against the border. Give it the
   same padded card. Bootstrap row gutters (-15px) cancel col padding (+15px), so the
   fields land exactly at this padding edge. */
.rz-checkout .checkout-register-form{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:none;   /* shadow removed per request */
  padding:28px clamp(22px,2.2vw,30px);
}

/* ---- 6. the login column | register column layout ------------------------- */
.rz-checkout .checkout-existing-customer-hr{ margin:20px 0 4px; }
@media (min-width:992px){
  /* nudge the two columns to comfortable, equal gutters */
  #register-customer{ row-gap:20px; }
}

/* ============================================================================
   SCROLL-TO-TOP — own it. The stock component CSS (position/size) was dropped in
   the clean vendor build, so the button lost its sizing and stretched into a
   full-width red bar. Restyle as a small fixed circular button (ink, on-brand),
   shown past 300px by rz-nav.js (.is-visible). Wins over custom.css via source order.
   ============================================================================ */
.smoothscroll-top,.smoothscroll-top.scroll-to-top{
  position:fixed !important; right:20px; bottom:20px; z-index:9980;
  width:48px; height:48px; padding:0; margin:0;
  border-radius:50% !important; background:var(--ink) !important; color:#fff !important;
  border:0 !important; box-shadow:0 6px 20px rgba(27,26,22,.28) !important;
  display:flex !important; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s, transform .25s, visibility .25s, background .2s;
}
.smoothscroll-top.is-visible{opacity:1; visibility:visible; transform:none;}
.smoothscroll-top:hover{background:#000 !important; transform:translateY(-2px);}
.smoothscroll-top .scroll-top-inner{display:flex; align-items:center; justify-content:center; line-height:0;}
.smoothscroll-top .fa-chevron-up,.smoothscroll-top i{font-size:15px !important; line-height:1;}
@media (max-width:640px){.smoothscroll-top{right:14px; bottom:14px; width:44px; height:44px;}}

/* home promo banner (Startseite → "Werbebanner") — full-width image between the
   product rows, fills the width (cover), rounded to match the section cards. */
.rz-homebanner{
  display:block; width:100%; border-radius:20px; overflow:hidden;
  aspect-ratio:1290/300; background-size:cover; background-position:center; background-repeat:no-repeat;
  box-shadow:0 1px 2px rgba(27,26,22,.05), 0 6px 20px rgba(27,26,22,.05);
}
a.rz-homebanner{transition:transform .25s, box-shadow .25s;}
a.rz-homebanner:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(27,26,22,.12);}
@media (max-width:640px){.rz-homebanner{aspect-ratio:16/10; border-radius:14px;}}

/* Aktionsbanner right-side image (Startseite → "Aktionsbanner: Bild rechts") —
   the uploaded photo fills the right half (cover); drop the texture overlay over it. */
.rz-promo__vis--img::before{display:none;}

/* ============================================================================
   PDP TABS — clean editorial tab bar (Produktdetails / Bewertungen), matching a
   modern reference: dark active tab + dark underline (was red), larger calmer
   type, thin baseline. Overrides the red-accent tab styling in custom.css.
   ============================================================================ */
/* position:relative is REQUIRED: jtl.evo.js runs the tabdrop plugin on every .nav-tabs,
   which moves any tab whose offsetTop>0 into a hidden "more" dropdown. offsetTop is measured
   against the nearest positioned ancestor — without this, that's a far-up element and every
   tab reads as offsetTop>0, so all tabs get pulled into the dropdown and the bar looks empty
   ("appears then disappears"). Making .nav-tabs the offset parent → on-row tabs = offsetTop 0. */
.tab-navigation .nav-tabs{position:relative; border-bottom:1px solid var(--line); gap:0; flex-wrap:nowrap; margin-bottom:26px;}
.tab-navigation .nav-tabs .nav-item{margin-bottom:-1px;}
.tab-navigation .nav-tabs .nav-link{
  font-family:var(--head); font-weight:600; font-size:17px; line-height:1.2;
  color:var(--ink3) !important; background:none !important; border:0 !important;
  padding:14px 2px; margin-right:34px; position:relative; cursor:pointer; letter-spacing:.005em;
}
.tab-navigation .nav-tabs .nav-link:hover{color:var(--ink) !important;}
.tab-navigation .nav-tabs .nav-link.active,
.tab-navigation .nav-tabs .nav-item.show .nav-link{color:var(--ink) !important;}
.tab-navigation .nav-tabs .nav-link.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2.5px;
  width:auto; transform:none; border:0; border-radius:0; background:var(--ink) !important;
}
@media (max-width:640px){
  .tab-navigation .nav-tabs .nav-link{font-size:15px; margin-right:22px; padding:12px 2px;}
}