/* =============================================================================
prisma-list.css — Kategorie & Suche, ported from the design prototype
(_handoffs/prisma/Prisma JTL Template.dc.html, screens "Kategorie" / "Suche").
Loaded last in the chain. Targets the class names the productlist templates
and the scc/Bootstrap components actually emit, so no markup had to change
beyond the sub-category pills.
========================================================================== */
/* ---------- category hero --------------------------------------------------- */
/* The hero is a dark panel behind a scrim, so its copy has to be the always-dark
chrome's ink. Headings deliberately inherit their container's colour (so they
stay legible on light AND dark panels), which means the container has to state
one — this one did not, so the category title rendered near-black on a
near-black image and was effectively invisible. --onPanel does not invert with
the theme, which is right: the hero is dark in both. */
.jtlw .rz-cathero:not(.rz-cathero--plain) .rz-cathero__copy,
.jtlw .rz-cathero:not(.rz-cathero--plain) .rz-cathero__in{color:var(--onPanel)}
.jtlw .rz-cathero:not(.rz-cathero--plain) .rz-cathero__copy p{color:var(--onPanelMuted)}
.jtlw .rz-cathero:not(.rz-cathero--plain) .rz-crumb,
.jtlw .rz-cathero:not(.rz-cathero--plain) .rz-crumb a,
.jtlw .rz-cathero:not(.rz-cathero--plain) .breadcrumb,
.jtlw .rz-cathero:not(.rz-cathero--plain) .breadcrumb a{color:var(--onPanelMuted)}
.jtlw .rz-cathero:not(.rz-cathero--plain) .breadcrumb .active{color:var(--onPanel)}
/* ---------- SHARED PRODUCT CARD ------------------------------------------- */
/* snippets/rz_product_card.tpl is the ONE card used by the home rail, the
listing grid, the PDP related/x-sell grids, bundles and the basket. Its
metrics are corrected here rather than in prisma-home.css because this sheet
loads AFTER that one (see the chain in layout/header.tpl), so the shared
baseline can be stated once and the home rail can restate the two values the
design scales up for it. Everything below is measured off the prototype
(_handoffs/prisma/Prisma JTL Template.dc.html: listing card 670–684,
PDP related 570–581, home rail 303–317).
.jtlw is required on each rule: prisma.css skins .jtlw .rz-card at (0,2,0)
and would otherwise win on radius, hover offset and transition. */
.jtlw .rz-card{border-radius:20px;
transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
.jtlw .rz-card:hover{transform:translateY(-4px);box-shadow:var(--shadowLg)}
.jtlw .rz-card__body{padding:14px 15px 15px}
.jtlw .rz-card__name{font-size:14px;line-height:1.3;margin-bottom:8px}
.jtlw .rz-card__rating{gap:6px;margin-bottom:12px}
.jtlw .rz-stars{font-size:12px;letter-spacing:0}
.jtlw .rz-card__rating .rz-rcount{font-family:var(--mono);font-size:10px;color:var(--muted)}
/* the price row must not wrap: at narrow column widths the struck RRP dropped
under the current price and pushed the card a line taller than its siblings */
.jtlw .rz-price{flex-wrap:nowrap;min-width:0}
.jtlw .rz-price__now{font-size:18px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.jtlw .rz-price__old{font-family:var(--mono);font-size:11px;color:var(--muted)}
/* the sale price is the ONE colour the base sheet gets wrong at the source:
rz.css sets --redink, which is #FFFFFF — white on a white card. It is only
ever visible because prisma.css happens to !important it back to the accent.
State it here so the card does not depend on that accident. */
.jtlw .rz-price--sale .rz-price__now{color:var(--red)}
.jtlw .rz-card__badge{font-weight:400}
.jtlw .rz-card__wish{width:32px;height:32px}
.jtlw .rz-card__wish svg{width:14px;height:14px}
.jtlw .rz-iadd,.jtlw .rz-iadd.basket-details-add-to-cart{width:34px;height:34px}
.jtlw .rz-iadd svg{width:16px;height:16px}
/* home rail — the design scales the card up by one step there */
.jtlw .rz-prodgrid .rz-card__body{padding:15px 16px 16px}
.jtlw .rz-prodgrid .rz-card__name{font-size:14.5px}
.jtlw .rz-prodgrid .rz-price__now{font-size:19px}
.jtlw .rz-prodgrid .rz-price__old{font-size:11.5px}
.jtlw .rz-prodgrid .rz-card__badge{font-weight:500}
.jtlw .rz-prodgrid .rz-card__wish{width:34px;height:34px}
.jtlw .rz-prodgrid .rz-card__wish svg{width:15px;height:15px}
.jtlw .rz-prodgrid .rz-iadd,
.jtlw .rz-prodgrid .rz-iadd.basket-details-add-to-cart{width:36px;height:36px}
.jtlw .rz-prodgrid .rz-iadd svg{width:17px;height:17px}
/* ---------- PRODUCT GRIDS -------------------------------------------------- */
/* One formula for every product grid, from the prototype's `gridCols`:
repeat(auto-fill,minmax(216px,1fr)). rz.css pinned the listing to exactly 5
columns with a flat 16px gap and the PDP grids to minmax(220px) — so the
listing could not reflow between 5 and 4 columns, the gaps did not match the
rest of the page, and a 375px viewport got ONE column on the PDP instead of
two. !important answers rz.css's own !important on #product-list. */
.jtlw .rz-plist,
.jtlw #product-list.rz-plist,
.jtlw .rz-prodgrid{grid-template-columns:repeat(auto-fill,minmax(216px,1fr))!important;
gap:clamp(12px,1.6vw,20px)!important}
@media (max-width:940px){
.jtlw .rz-plist,
.jtlw #product-list.rz-plist,
.jtlw .rz-prodgrid{grid-template-columns:1fr 1fr!important}
}
/* ---------- sub-category pills -------------------------------------------- */
/* the design's row of outlined pills between the category hero and the toolbar */
.rz-subpills{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.jtlw .rz-subpill{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;
border:1px solid var(--line2);background:var(--surface);color:var(--ink);
font-size:14px;font-weight:600;white-space:nowrap;
transition:border-color .25s ease,background .25s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.jtlw .rz-subpill:hover{border-color:var(--ink);background:var(--sand);color:var(--ink);transform:translateY(-1px)}
.rz-subpill__count{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
/* ---------- toolbar (Sortierung … | N Artikel) ---------------------------- */
/* one bordered row, matching the design's chrome rather than a bare Bootstrap
form row */
.jtlw .productlist-nav-top,
.jtlw .pagination-selects{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:12px 18px;margin-bottom:16px}
.jtlw .pagination-entries{font-family:var(--mono);font-size:11px;color:var(--muted);margin:0}
.jtlw .pagination-selects .custom-select,
.jtlw .pagination-selects select{border:none!important;background:none!important;box-shadow:none!important;
font-size:13.5px;font-weight:700;color:var(--ink);padding:0 22px 0 0;height:auto;width:auto}
/* ---------- active filter chips ------------------------------------------- */
.jtlw .active-filter .btn,
.jtlw .active-filter a.filter-item{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;
background:var(--sand)!important;border:none!important;color:var(--ink2)!important;font-size:12.5px;font-weight:600}
.jtlw .active-filter .btn:hover,
.jtlw .active-filter a.filter-item:hover{background:var(--line2)!important;color:var(--ink)!important}
/* ---------- filter sidebar ------------------------------------------------- */
/* the design's sidebar is ONE bordered card whose sections are split by
hairlines — not a stack of separate boxes */
/* JTL emits one .box per filter group. The design shows them as a SINGLE card
whose groups are split by hairlines, so the boxes are joined: only the first
and last keep rounded corners, each seam is one border, and the inter-box
margin is removed (rz.css sets it, hence !important). */
/* The radius and bottom border come from the vendor base (razan.css), which
outranks a plain rule here — confirmed by probing computed style: margin
collapsed to 0 but border-radius stayed 14px. Answered at the same weight,
as the rest of this file already does for the widget skin. */
.jtlw #sidepanel_left .box,
.jtlw .productlist-filter > .box{border:1px solid var(--line)!important;border-bottom:none!important;
background:var(--surface);padding:0;overflow:hidden;margin:0!important;border-radius:0!important}
.jtlw #sidepanel_left .box:first-child,
.jtlw .productlist-filter > .box:first-child{border-radius:20px 20px 0 0!important}
.jtlw #sidepanel_left .box:last-child,
.jtlw .productlist-filter > .box:last-child{border-bottom:1px solid var(--line)!important;border-radius:0 0 20px 20px!important}
.jtlw #sidepanel_left .box:only-child,
.jtlw .productlist-filter > .box:only-child{border-radius:20px!important;border-bottom:1px solid var(--line)!important}
/* group headings are sentence case in the design; prisma.css uppercases them */
.jtlw .productlist-filter-headline,
.jtlw #sidepanel_left .box-title{padding:16px 18px;margin:0;border-bottom:1px solid var(--line);
font-size:14.5px;font-weight:700;letter-spacing:-.015em;color:var(--ink);
text-transform:none!important;font-family:'Outfit',sans-serif!important}
.jtlw #sidepanel_left .nav-panel,
.jtlw .productlist-filter .nav-panel{padding:14px 18px}
/* filter rows: label left, count right in mono. rz.css draws a border-bottom on
each row; the design separates them by spacing alone. */
.jtlw .productlist-filter .filter-item,
.jtlw #sidepanel_left .filter-item{display:flex;align-items:center;justify-content:space-between;gap:12px;
font-size:13.5px;color:var(--ink2);padding:7px 0;border-bottom:none!important}
.jtlw .productlist-filter .filter-item .badge,
.jtlw #sidepanel_left .filter-item .badge{background:none;color:var(--muted);font-family:var(--mono);font-size:10.5px;padding:0;font-weight:400}
/* ---------- pagination — circular buttons, accent for current ------------- */
.jtlw .pagination{display:flex;align-items:center;justify-content:center;gap:9px;margin:28px 0 0}
.jtlw .pagination .page-item{margin:0}
.jtlw .pagination .page-link{display:flex;align-items:center;justify-content:center;
min-width:38px;height:38px;padding:0 12px;border-radius:999px!important;
border:1px solid var(--line2)!important;background:var(--surface)!important;color:var(--ink2)!important;
font-size:13.5px;font-weight:600;transition:background .25s ease,color .25s ease,border-color .25s ease}
.jtlw .pagination .page-link:hover{background:var(--sand)!important;color:var(--ink)!important;border-color:var(--ink)!important}
.jtlw .pagination .page-item.active .page-link{background:var(--red)!important;border-color:var(--red)!important;color:var(--onRed)!important}
.jtlw .pagination .page-item.disabled .page-link{opacity:.4}
/* ---------- responsive ----------------------------------------------------- */
@media (max-width:940px){
.rz-subpills{gap:9px}
.jtlw .rz-subpill{padding:11px 17px;font-size:13.5px}
}
/* =============================================================================
KATEGORIE — brought onto the handoff design (screen "Kategorie", prototype
lines 598–668). Written against the markup the shop ACTUALLY emits, read off
a live capture: JTL renders each filter as its own Bootstrap collapse panel
(.box.box-filter-*, a .btn-filter-box toggle, a .collapse body of
.filter-item rows) separated by . The design is one
bordered card whose groups are split by hairlines, so the individual panels
are stripped of their own chrome and the rules between them are removed.
This section is last in the file on purpose: it settles every earlier rule.
========================================================================== */
/* ---------- category hero --------------------------------------------------- */
.jtlw .rz-cathero{position:relative;overflow:hidden;border-radius:24px;
min-height:clamp(180px,22vw,250px);display:flex;align-items:flex-end;
padding:clamp(22px,3vw,38px)}
/* the design's scrim: a top-to-bottom wash, dark enough at the foot to carry
white type over any product photograph */
.jtlw .rz-cathero__scrim,
.jtlw .rz-cathero::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(20,18,15,.15),rgba(20,18,15,.82))}
.jtlw .rz-cathero__in,.jtlw .rz-cathero__copy{position:relative;z-index:1}
.jtlw .rz-cathero h1{font-size:clamp(26px,4vw,48px);color:#fff;margin:0 0 12px}
.jtlw .rz-cathero__copy p,.jtlw .rz-cathero p{color:rgba(255,255,255,.78);max-width:52ch;font-size:15px;margin:0}
.jtlw .rz-cathero .rz-crumb,.jtlw .rz-cathero .breadcrumb{font-family:var(--mono);font-size:10.5px;
letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:12px;padding:0}
.jtlw .rz-cathero .rz-crumb a,.jtlw .rz-cathero .breadcrumb a,
.jtlw .rz-cathero .breadcrumb .active{color:rgba(255,255,255,.7)}
/* ---------- sub-category pills ---------------------------------------------- */
.jtlw .rz-subpills{display:flex;gap:9px;overflow-x:auto;padding-bottom:2px;margin:16px 0 0;
scrollbar-width:none}
.jtlw .rz-subpills::-webkit-scrollbar{display:none}
.jtlw .rz-subpill{display:flex;align-items:center;gap:9px;padding:9px 17px;border-radius:999px;
background:var(--surface);border:1px solid var(--line);color:var(--ink);
font-size:13.5px;font-weight:600;white-space:nowrap;transition:border-color .3s ease}
.jtlw .rz-subpill:hover{border-color:var(--red);background:var(--surface);transform:none}
.jtlw .rz-subpill__count{font-family:var(--mono);font-size:10px;color:var(--muted)}
/* ---------- filter sidebar = ONE card --------------------------------------- */
/* The aside must NOT be the clipping box. It carried overflow:hidden so its 20px
radius would clip the group seams — but it is also the sticky box, and when the
rail is taller than the column beside it (few products, or a long category
description) its box stops short and overflow:hidden cut the tail off. That is
why Preisspanne, last in the rail, was sliced through mid-slider.
So: the aside is chrome + sticky and overflows freely, and .rz-facets — sized by
its own content — does the clipping. */
.jtlw #sidepanel_left,.jtlw .productlist-filter{border:1px solid var(--line);border-radius:20px;
background:var(--surface);overflow:visible;position:sticky;top:150px}
.jtlw #sidepanel_left .rz-facets{border-radius:20px;overflow:hidden;flex:0 0 auto;min-height:auto}
/* the rules JTL draws between panels: the card's own hairlines replace them */
.jtlw #sidepanel_left hr,.jtlw .productlist-filter hr,.jtlw hr.box-normal-hr{display:none!important}
/* each panel loses its own chrome and becomes a section of the card */
.jtlw #sidepanel_left .box,.jtlw .productlist-filter .box,
.jtlw #sidepanel_left [class*="box-filter"],.jtlw .productlist-filter [class*="box-filter"]{
border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;
background:none!important;box-shadow:none!important;margin:0!important;padding:0!important}
.jtlw #sidepanel_left .box:last-child,.jtlw .productlist-filter .box:last-child{border-bottom:0!important}
/* group heading — JTL makes it a collapse toggle button */
.jtlw .btn-filter-box,.jtlw .btn.btn-filter-box{display:flex!important;align-items:center;
justify-content:space-between;gap:12px;width:100%;padding:16px 17px!important;
border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
color:var(--ink)!important;font-size:12.5px!important;font-weight:700!important;
text-align:left;text-decoration:none!important;text-transform:none;letter-spacing:0}
.jtlw .btn-filter-box:hover{background:var(--sand)!important}
.jtlw .btn-filter-box::after{content:"";width:9px;height:9px;flex-shrink:0;
border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
transform:rotate(45deg) translate(-2px,-2px);transition:transform .28s cubic-bezier(.16,1,.3,1)}
.jtlw .btn-filter-box[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px)}
.jtlw #sidepanel_left .collapse,.jtlw #sidepanel_left .collapsing,
.jtlw .productlist-filter .collapse,.jtlw .productlist-filter .collapsing{padding:0 17px 16px}
.jtlw #sidepanel_left .collapse ul,.jtlw .productlist-filter .collapse ul{
list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
/* option rows: label left, count right in mono, the whole row a hover target */
.jtlw .filter-item,.jtlw a.filter-item{display:flex!important;align-items:center;gap:11px;
padding:8px 10px!important;margin:0 -10px;border-radius:12px;border:0!important;
font-size:13.5px;color:var(--ink2)!important;text-decoration:none;transition:background .18s ease}
.jtlw .filter-item:hover{background:var(--sand);color:var(--ink)!important}
.jtlw .filter-item > span:first-child{flex:1;min-width:0}
.jtlw .filter-item .badge,.jtlw .filter-item .count{margin-left:auto;background:none!important;
color:var(--muted)!important;font-family:var(--mono);font-size:10px;font-weight:400;padding:0!important}
/* colour filters are 30px rounded squares, not pills */
.jtlw .filter-color,.jtlw .rz-swatch{width:30px;height:30px;border-radius:10px;
border:1px solid var(--line2);padding:0}
.jtlw .filter-color.active,.jtlw .rz-swatch.is-active{outline:2px solid var(--ink);outline-offset:2px;
box-shadow:none;border-color:var(--line2)}
/* ---------- toolbar + active chips ------------------------------------------ */
.jtlw .productlist-nav-top,.jtlw .pagination-selects,.jtlw .rz-toolbar{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 15px;
border:1px solid var(--line);border-radius:999px;background:var(--surface);margin-bottom:16px}
.jtlw .pagination-entries{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.jtlw .active-filter .btn,.jtlw .active-filter a.filter-item{
display:inline-flex!important;align-items:center;gap:8px;margin:0;
padding:7px 9px 7px 14px!important;border-radius:999px;background:var(--sand)!important;
border:0!important;color:var(--ink)!important;font-size:12.5px;font-weight:600}
.jtlw .active-filter .btn:hover{background:var(--line2)!important}
@media (max-width:940px){
.jtlw #sidepanel_left,.jtlw .productlist-filter{position:static}
}
/* ---------- listing toolbar, final form ------------------------------------
The design is ONE pill-shaped row: the sort control on the left, the article
count closing it on the right, and the Filter button only on mobile (on
desktop the sidebar is always open, so a button to reveal it is noise).
========================================================================== */
.jtlw .productlist-nav-top,.jtlw .pagination-selects,.jtlw .rz-toolbar{
justify-content:flex-start;padding:10px 15px;border-radius:999px}
.jtlw .productlist-nav-top label,.jtlw .pagination-selects label,
.jtlw .productlist-nav-top .control-label{margin:0;font-size:13px;font-weight:400;color:var(--muted)}
.jtlw .productlist-nav-top .bootstrap-select > .dropdown-toggle,
.jtlw .pagination-selects .bootstrap-select > .dropdown-toggle{
padding:0 18px 0 0;border:0;background:none;font-size:13px;font-weight:600;color:var(--ink)}
/* the count closes the row */
.jtlw .productlist-nav-top .pagination-entries,
.jtlw .pagination-selects .pagination-entries{margin-left:auto;font-family:var(--mono);
font-size:10.5px;color:var(--muted)}
/* desktop has the sidebar; the reveal button is a mobile affordance */
@media (min-width:941px){
.jtlw .productlist-nav-top .btn-filter,
.jtlw [data-toggle="collapse"][data-target*="filter"]{display:none!important}
}
/* =============================================================================
LISTING LAYOUT — head band full width, filter rail left, products right
(prototype line 615: `grid-template-columns:250px 1fr; gap:clamp(18px,2.4vw,30px);
align-items:start`, with the hero + sub-category pills as full-width sections
ABOVE it).
The stock template opens `#content > .row.justify-content-lg-end > .col-lg-8`
before the listing renders and appends the filter