/* ============================================================================= prisma-product.css — Produkt (PDP), ported from the design prototype (_handoffs/prisma/Prisma JTL Template.dc.html, screen "Produkt", lines 324–596; data bindings 2101–2199). The PDP is the design's reference screen — it is field-for-field faithful to JTL's article model, so the markup keeps every JTL hook and only the presentation is brought onto the design. Loaded last in the chain. EVERY rule below carries `.jtlw`, and a handful additionally carry !important. That is not defensive habit, it is arithmetic: * prisma.css (the vendored jtl-widgets skin) styles `.jtlw .rz-stock`, `.jtlw .rz-qty`, `.jtlw .rz-colorsw`, `.jtlw .rz-buy__cat` … at (0,2,0). An unprefixed rule here is (0,1,0) and LOSES, even loading last. * rz.css pins `.rz-buy h1`, `.rz-buy__price .price` and `.rz-stock__dot` with !important. Specificity alone cannot beat that — those five declarations need !important back. Both traps were live: the H1 was rendering at a 30px cap instead of the design's 42px, the price was frozen at 34px and never turned accent on sale, the stock line was drawn as a bordered card with its dot suppressed, and the add-to-cart button was a 14px rounded rect instead of a pill. ========================================================================== */ /* ---------- the page rail --------------------------------------------------- */ /* Measured on the live shop, the product page was running FOUR different rails: the masthead at 1320@60, the buy grid at 1232@104, the tab strip at 1218@111 and each related row at 1200@120 — every band starting at a different left edge down the page. The cause is nesting: the design's own .rz-sec (1320/22) sits INSIDE Bootstrap's .container (1250/15), and each level adds its gutter again. Tagging one wrapper was not enough, because the tabs and the related rows are emitted into containers of their own. So: on the product page every container IS the design rail, and a .rz-sec nested in one stops contributing a second gutter. data-page=1 is the article detail page (verified against the live DOM). */ /* The wrappers ABOVE the rail have to stop contributing a gutter of their own, or the rail can never reach --maxw: measured, .container.rz-pdpwrap came out 1276 where the masthead's .rz-wrap is 1320 — exactly one gutter pair short, inherited from its parent. */ .jtlw[data-page="1"] #content-wrapper, .jtlw[data-page="1"] #content{max-width:none;padding-left:0;padding-right:0} .jtlw .rz-pdpwrap, .jtlw[data-page="1"] .container{max-width:var(--maxw);padding-left:0;padding-right:0} .jtlw[data-page="1"] .rz-sec{max-width:none;padding-left:0;padding-right:0} /* ---------- breadcrumb ------------------------------------------------------ */ /* display:flex is not decoration here — on the live product page this list was computing to `block`, so every crumb sat on its own line and the trail ran five rows deep above the gallery. The gap/flex-wrap below were written for a flex row that was never actually flex. */ /* list-style:none is not cosmetic — this is an
    , and its markers were printing into the trail ("Startseite2. Bekleidung3. …"). */ .jtlw .breadcrumb{display:flex;align-items:center;font-size:12.5px;color:var(--muted); padding:16px 0 0;margin:0;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; list-style:none} .jtlw .breadcrumb::-webkit-scrollbar{display:none} .jtlw .breadcrumb-item{white-space:nowrap;list-style:none} .jtlw .breadcrumb-item::marker{content:none} /* razan.css hardcodes the separator to #707070 at (0,2,1) and nothing overrides it — it did not follow the theme into dark mode. */ .jtlw .breadcrumb-item+.breadcrumb-item::before{color:var(--muted);opacity:.45;padding-right:8px} .jtlw .breadcrumb-item+.breadcrumb-item{padding-left:8px} .jtlw .breadcrumb .active{color:var(--ink)} .jtlw .breadcrumb a:hover{color:var(--red)} /* ---------- two-column section ---------------------------------------------- */ .jtlw #product-offer.rz-pdp,.jtlw .rz-pdp{grid-template-columns:1.05fr 1fr; gap:clamp(24px,3.6vw,56px);align-items:start} /* ---------- gallery --------------------------------------------------------- */ /* the design's stage is a bordered 24px card that does NOT follow the scroll — it was sticky at top:150px, which detached it from the buy column */ .jtlw .rz-gallery{position:static} /* the stage is a scroll-snap strip of slides; its scrollbar was painting a grey bar across the bottom of the product image */ .jtlw .rz-gallery-stage{border-radius:24px;border:1px solid var(--line);margin-bottom:12px; scrollbar-width:none;-ms-overflow-style:none} .jtlw .rz-gallery-stage::-webkit-scrollbar{display:none;width:0;height:0} .jtlw .rz-gallery-stage-img{transition:transform .5s cubic-bezier(.16,1,.3,1)} .jtlw .rz-gallery-slide:hover .rz-gallery-stage-img{transition:transform .12s linear} /* sale / new flag on the stage */ .jtlw .rz-gallery-badge{position:absolute;top:16px;left:16px;z-index:3;padding:6px 13px;border-radius:999px; background:var(--red);color:var(--onRed);font-family:var(--mono);font-size:11px;line-height:1} /* the expand control: image.tpl has emitted this button all along and NOT ONE rule in the whole chain matched it, so it painted as a bare Bootstrap button */ .jtlw .rz-gallery-expand{position:absolute;top:14px;right:14px;z-index:3;width:36px;height:36px;padding:0; border:none;border-radius:999px;background:var(--scrim);color:var(--onScrim); display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer; transition:transform .3s cubic-bezier(.16,1,.3,1)} .jtlw .rz-gallery-expand:hover{transform:scale(1.06)} /* thumb rail: 36px circular arrows + portrait 74×88 thumbs, accent when picked */ .jtlw .rz-product-slider{display:flex;align-items:center;gap:10px;margin-top:12px} .jtlw .rz-product-slider-arrow{width:36px;height:36px;flex-shrink:0;border-radius:999px;padding:0; display:flex;align-items:center;justify-content:center;font-size:13px} .jtlw .rz-product-slider-track{display:flex;gap:10px;flex:1;min-width:0} .jtlw .rz-product-slide{width:74px!important;height:88px!important;aspect-ratio:auto!important; border-radius:12px;border:2px solid transparent!important;opacity:1; transition:border-color .3s ease,transform .3s cubic-bezier(.16,1,.3,1)} .jtlw .rz-product-slide:hover{transform:translateY(-2px)} .jtlw .rz-product-slide.is-selected,.jtlw .rz-product-slide.is-active{border-color:var(--red)!important} /* ---------- buy-box header -------------------------------------------------- */ /* eyebrow = the Vaterartikel / category line above the H1. prisma.css puts it in DM Mono via .jtlw .rz-buy__cat; the design keeps it in the body face. */ .jtlw .rz-buy__cat{font-family:'Outfit',system-ui,sans-serif;font-size:13px;color:var(--muted); margin-bottom:10px;letter-spacing:0;text-transform:none;font-weight:400} /* !important answers rz.css, which caps this at clamp(21px,2.7vw,30px)/600 */ .jtlw .rz-buy h1{font-size:clamp(26px,3.4vw,42px)!important;font-weight:700!important; letter-spacing:-.028em!important;line-height:1.06;margin:0 0 10px} .jtlw .rz-buy__meta{display:flex;align-items:center;gap:12px;margin-bottom:20px} /* prisma.css uppercases .rz-sku/.product-sku; the design prints "Artikelnummer 404202" in sentence case, mono, muted. */ .jtlw .rz-sku,.jtlw .product-sku{font-family:var(--mono);font-size:12.5px;color:var(--muted); text-transform:none;letter-spacing:0} /* the buy column has no short-description block in the design */ .jtlw .rz-buy__desc{display:none} /* ---------- price + PAngV ---------------------------------------------------- */ /* !important answers rz.css's 34px/700/--ink pin, which also meant a reduced article never showed its price in the accent. */ .jtlw .rz-buy__price .rz-price__now, .jtlw .rz-buy__price .price{font-size:clamp(30px,3.8vw,42px)!important;font-weight:800!important; letter-spacing:-.035em!important;font-variant-numeric:tabular-nums;line-height:1.05;color:var(--ink)} .jtlw .rz-buy__price .special-price, .jtlw .rz-buy__price .price.special-price{color:var(--red)!important} /* struck RRP and the saving pill belong ON the price baseline, not stacked under it as two more block-level lines */ .jtlw .rz-buy__price .price-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px} .jtlw .rz-buy__price .text-stroke, .jtlw .rz-buy__price .old-price{display:inline!important;font-family:var(--mono);font-size:15px!important; color:var(--muted)!important;text-decoration:line-through} .jtlw .rz-buy__price .yousave{display:inline-flex!important;align-items:center;padding:4px 10px;border-radius:999px; background:var(--redSoft);color:var(--red)!important;font-family:var(--mono);font-size:11.5px;margin:0!important} /* the PAngV line: VAT + shipping + delivery time, muted, with an underlined Versand link — legally required and part of the design's price block */ .jtlw .rz-buy__price .vat_info, .jtlw .rz-buy__price .shipping-hint, .jtlw .rz-buy__price small{font-size:13px;color:var(--muted);font-weight:400;letter-spacing:0} .jtlw .rz-buy__price a{color:var(--ink2);text-decoration:underline;text-underline-offset:2px} .jtlw .rz-buy__price a:hover{color:var(--red)} .jtlw .rz-buy__price{margin-bottom:26px} /* ---------- variations as NUMBERED STEPS ------------------------------------ */ /* The design presents each variation as a numbered step ("1 Farbe", "2 Größe"). variation.tpl already emits one .rz-varblock per variation inside .variations, so the index is derived with a CSS counter rather than by rewriting the Smarty loop — that keeps every JTL hook (kEigenschaft ids, IMGSWATCHES slider, the SELECTBOX that jtl.article.js binds) untouched and the numbering correct for any number of variations. */ .jtlw .variations{counter-reset:rzvar} .jtlw .variations .rz-varblock{counter-increment:rzvar;margin-bottom:22px} .jtlw .rz-varhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px; font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:700} .jtlw .variations .rz-varhead::before{content:counter(rzvar); display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0; border-radius:999px;background:var(--sand);color:var(--muted);align-self:center; font-family:var(--mono);font-size:9.5px;font-weight:400;line-height:1;margin-right:10px;order:-1} /* once a value is chosen the step is done → tick. Two signals, because only IMGSWATCHES carries .swatches-selected (jtl.article.js fills it): the swatch markup marks the picked value .is-active/.active in EVERY variation type, and that is what the pill rows report. */ .jtlw .variations .rz-varblock:has(.swatches-selected:not(:empty)) .rz-varhead::before, .jtlw .variations .rz-varblock:has(.swatches.is-active) .rz-varhead::before, .jtlw .variations .rz-varblock:has(.swatches.active) .rz-varhead::before, .jtlw .variations .rz-varblock:has(input[type="radio"]:checked) .rz-varhead::before{ content:"\2713";background:var(--ok);color:var(--onRed)} .jtlw .rz-varhead b{font-weight:700;font-size:13.5px;color:var(--ink)} /* the right-hand hint — "Bitte wählen" in the accent until a value is picked, then the chosen value in ink; "Maßtabelle" where a size chart is linked */ .jtlw .rz-varhead .rz-varhint{margin-left:auto;font-size:13px;color:var(--red);font-weight:400} .jtlw .variations .rz-varblock:has(.swatches-selected:not(:empty)) .rz-varhint, .jtlw .variations .rz-varblock:has(.swatches.is-active) .rz-varhint, .jtlw .variations .rz-varblock:has(.swatches.active) .rz-varhint, .jtlw .variations .rz-varblock:has(input[type="radio"]:checked) .rz-varhint{display:none} .jtlw .rz-varhead .swatches-selected{margin-left:auto;color:var(--ink2);font-size:13px;font-weight:400} .jtlw .rz-varhead a{margin-left:auto;font-size:12.5px;color:var(--ink2);font-weight:400; text-decoration:underline;text-underline-offset:2px} .jtlw .rz-varhead a:hover{color:var(--red)} /* prisma.css skins .jtlw .rz-colorsw — which is the swatch ROW, not a swatch — so it drew a 2px pill outline around the whole row of colours. */ .jtlw .rz-colorsw{border:0!important;border-radius:0!important;display:flex;gap:10px;flex-wrap:wrap;margin:0} .jtlw .rz-colorsw label.swatches,.jtlw .rz-colorsw .variation{ width:42px;height:42px;border-radius:14px;border:1px solid var(--line2);box-shadow:none;overflow:hidden; transition:transform .3s cubic-bezier(.16,1,.3,1)} .jtlw .rz-colorsw label.swatches:hover{transform:translateY(-3px)} .jtlw .rz-colorsw label.swatches.is-active,.jtlw .rz-colorsw label.swatches.active{ border-color:var(--line2);outline:2px solid var(--ink);outline-offset:3px} .jtlw .rz-sizes{display:flex;gap:9px;flex-wrap:wrap;margin:0} .jtlw .rz-sizes label.swatches{padding:12px 20px;border-radius:999px;border:1px solid var(--line2); background:var(--surface);color:var(--ink2);font-size:13.5px;font-weight:600;transition:all .28s ease} .jtlw .rz-sizes label.swatches.is-active,.jtlw .rz-sizes label.swatches.active{ background:var(--ink);color:var(--paper);border-color:var(--ink)} /* ---------- variation controls: buttons only, never a dropdown --------------- The design has no variation dropdown (prototype 371-396) and variation.tpl no longer emits one — a SELECTBOX renders with the TEXTSWATCHES markup — so the swatch row and the pill row above are the whole control surface. What is left here is a guard, the missing hidden-radio rule, and a fallback. The guard, because the rule this block replaces is what broke the live PDP: it pinned `border-radius:999px` on the bootstrap-select toggle. A pill radius is only a pill on a control of known height — that toggle sized itself to the buy column and 999px turned it into a circle some 650px across, with "Bitte wählen Sie eine Variation." floating in the middle of it. Nothing in here gets a pill radius now; a fixed radius cannot degrade that way. */ .jtlw .variations select, .jtlw .variations .bootstrap-select, .jtlw .variations .bootstrap-select > .dropdown-toggle{ border-radius:12px!important;aspect-ratio:auto!important} /* The radio inside each swatch label. `.control-hidden` is declared ONLY in themes/base/sass/_base.scss, which is not part of the compiled chain (razan.css → rz.css → prisma*.css) — so every swatch has been rendering a live native radio beside its label. Stated here; the pills make it unmissable. */ .jtlw .variations input.control-hidden{position:absolute;width:1px;height:1px; clip:rect(0,0,0,0);clip-path:inset(50%);pointer-events:none;opacity:0} /* Fallback: should a plugin or the matrix view put a select back inside .variations, it reads as an rz field rather than a bare browser control, and bootstrap-select's source select stays hidden so only one control shows. */ .jtlw .variations .bootstrap-select > select{position:absolute!important;width:1px!important; height:1px!important;opacity:0!important;pointer-events:none;clip-path:inset(50%)} .jtlw .variations select:not(.control-hidden){width:100%;max-width:100%; padding:12px 40px 12px 16px;border:1px solid var(--line2); background:var(--surface);color:var(--ink);font-size:13.5px} .jtlw .variations .bootstrap-select > .dropdown-toggle{ border:1px solid var(--line2)!important;background:var(--surface)!important; color:var(--ink)!important;padding:12px 40px 12px 16px!important; font-size:13.5px;font-weight:500;box-shadow:none!important} .jtlw .variations .bootstrap-select > .dropdown-menu{position:absolute;z-index:60;width:100%; margin-top:6px;padding:9px!important;border:1px solid var(--line)!important; border-radius:16px!important;background:var(--surface)!important;box-shadow:var(--shadowLg)!important} .jtlw .variations .bootstrap-select .dropdown-item{border-radius:10px!important; padding:9px 12px!important;font-size:14px!important;color:var(--ink2)!important} .jtlw .variations .bootstrap-select .dropdown-item:hover, .jtlw .variations .bootstrap-select .dropdown-menu li.selected a{ background:var(--sand)!important;color:var(--ink)!important} /* ---------- the rows themselves --------------------------------------------- */ /* Both rows come from {formrow}, so each value arrives wrapped in a Bootstrap .col-auto carrying a 1rem gutter — which would sit on top of the design's 10px/9px gap. The gap is the only spacing. */ .jtlw .variations dl{margin:0} .jtlw .rz-varblock dd.form-group{margin:0} .jtlw .rz-colorsw > *, .jtlw .rz-sizes > *{padding:0;margin:0;width:auto;max-width:none;flex:0 0 auto} .jtlw .rz-colorsw label.swatches, .jtlw .rz-sizes label.swatches{margin:0;cursor:pointer} .jtlw .rz-sizes label.swatches{line-height:1.1} .jtlw .rz-sizes label.swatches:hover{border-color:var(--ink);color:var(--ink)} .jtlw .rz-sizes .label-variation{display:block;font:inherit;color:inherit} /* the swatch image fills its 42px tile */ .jtlw .rz-colorsw label.swatches img{width:100%;height:100%;object-fit:cover;display:block} /* A value that cannot be combined, or is sold out, stays selectable — JTL answers with the reason — but must not read as available. */ .jtlw .rz-sizes label.swatches.swatches-not-in-stock, .jtlw .rz-sizes label.swatches.swatches-sold-out, .jtlw .rz-sizes label.swatches.not-available{color:var(--muted);border-color:var(--line); text-decoration:line-through;text-decoration-thickness:1px} .jtlw .rz-colorsw label.swatches.swatches-not-in-stock, .jtlw .rz-colorsw label.swatches.swatches-sold-out, .jtlw .rz-colorsw label.swatches.not-available{opacity:.45} /* the not-available badge JTL prints inside a pill would double its height */ .jtlw .rz-sizes label.swatches .badge-not-available{display:none} /* ---------- stock row -------------------------------------------------------- */ /* prisma.css draws .jtlw .rz-stock as a bordered surface card; the design's stock line is bare type on the page. And rz.css hides the status dot with !important, so the pulsing availability signal never rendered at all. */ .jtlw .rz-stock,.jtlw .delivery-status.rz-stock{background:none;border:0;border-radius:0;padding:0; margin-bottom:18px;display:flex;align-items:center;gap:10px;font-size:13.5px;flex-wrap:wrap} .jtlw .rz-stock > ul{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding:0;list-style:none} .jtlw .rz-stock > ul > li{display:flex;align-items:center;gap:10px} .jtlw .rz-stock > ul > li + li::before{content:"·";color:var(--muted)} .jtlw .rz-stock__dot{display:inline-block!important;width:8px;height:8px;flex-shrink:0;border-radius:999px; background:var(--ok);animation:pxPulse 2.4s ease-in-out infinite} .jtlw .rz-stock .rz-stock__on, .jtlw .rz-stock .status-1,.jtlw .rz-stock .status-2{font-weight:700;color:var(--ok)!important} .jtlw .rz-stock .estimated-delivery{color:var(--muted)} /* "Frage zum Artikel" closes the row on the right */ .jtlw .stock-information .question-on-item{margin-left:auto} /* it is a Bootstrap .btn, so its 600 weight and pill radius have to be undone — the design's is a plain underlined link */ .jtlw .btn.question{padding:0;border:0;border-radius:0;background:none;display:inline-flex;align-items:center; gap:7px;font-size:13px;font-weight:400!important;color:var(--ink2)!important;text-decoration:underline; text-underline-offset:2px} .jtlw .btn.question:hover{color:var(--red)!important} .jtlw .btn.question .fa-question-circle{display:inline-block!important;font-size:14px;color:inherit!important} /* ---------- variation-required notice ---------------------------------------- */ .jtlw .rz-hint.choose-variations{display:flex;align-items:flex-start;gap:11px;padding:14px 16px; border-radius:16px;background:var(--sand);border:1px solid var(--line);margin:0 0 16px; font-size:13.5px;color:var(--ink2)} .jtlw .rz-hint.choose-variations::before{content:"\25CF";color:var(--red);flex-shrink:0;line-height:1.4} /* ---------- quantity stepper + CTA ------------------------------------------- */ /* prisma.css sizes .jtlw .rz-qty button to 38×40 and pins .rz-addbig to a 14px radius with !important — the stepper was two sizes small and the primary call to action was a rounded rect where the design has a pill. */ .jtlw .rz-buyrow{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:12px} .jtlw .rz-qty{border:1px solid var(--line2)!important;border-radius:999px;background:var(--surface);min-width:0} .jtlw .rz-qty button{width:44px!important;height:54px!important;font-size:19px;color:var(--ink2)} .jtlw .rz-qty input{padding:0!important;min-width:32px;width:32px;font-size:15px;font-weight:700; font-variant-numeric:tabular-nums;border:0!important;background:none!important;text-align:center} .jtlw .rz-addbig{flex:1;min-width:220px;padding:17px 22px;min-height:0;border-radius:999px!important; font-size:15px;font-weight:700;background:var(--red)!important;border-color:var(--red)!important; box-shadow:0 14px 32px rgba(173,71,8,.3); transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s ease,box-shadow .3s ease} /* prisma.css hardcodes #fff here. In dark mode --red lightens to #FF9448 and white on it is ~2.2:1 — --onRed is the paired ink and stays ~9:1. */ .jtlw .rz-addbig,.jtlw .rz-buy-add, .jtlw .rz-addbig:hover,.jtlw .rz-buy-add:hover{color:var(--onRed)!important} .jtlw .rz-addbig:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(173,71,8,.34)} .jtlw .rz-addbig[disabled],.jtlw .rz-addbig:disabled{background:var(--line2)!important; border-color:var(--line2)!important;color:var(--muted)!important;box-shadow:none;transform:none;cursor:not-allowed} /* Merken / Vergleichen — a full-width pair under the CTA, as in the design. They used to be icon chips floating over the gallery. */ /* These two arrive as `badge badge-circle-1` chips — a 28px circle the base theme sizes with its own rules — so the pair rendered as two tiny icons instead of the design's full-width labelled buttons. Width/height/border- radius have to be stated at a weight that beats the badge chrome. */ .jtlw .rz-buy-actions{display:flex;gap:9px;margin-bottom:24px} .jtlw .rz-buy-actions > .btn, .jtlw .rz-buy-actions .wishlist,.jtlw .rz-buy-actions .compare, .jtlw .rz-buy-actions .rz-buy-action{ flex:1 1 0!important;width:auto!important;height:auto!important;min-width:0; padding:13px!important;border-radius:999px!important; border:1px solid var(--line2)!important;background:var(--surface)!important;color:var(--ink)!important; font-size:13px;font-weight:600;display:flex!important;align-items:center;justify-content:center;gap:8px} .jtlw .rz-buy-actions > *:hover{border-color:var(--ink)!important} .jtlw .rz-buy-actions .badge{position:static;transform:none} /* Merkmal values come out of JTL as Bootstrap badges — solid accent pills in the middle of a spec table. The design lists them as plain right-aligned values, like every other row. */ .jtlw .rz-specpanel .badge, .jtlw .rz-specpanel .attr-characteristic .badge, .jtlw .rz-specpanel a.badge-primary{background:none!important;color:var(--ink)!important; padding:0!important;border-radius:0!important;font-family:'Outfit',sans-serif; font-size:13.5px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0} .jtlw .rz-specpanel a.badge:hover{color:var(--red)!important;text-decoration:underline} /* ---------- trust block — cell-divided, two across -------------------------- */ .rz-uspstrip--2{grid-template-columns:repeat(2,1fr);border-radius:18px;margin:0 0 16px} /* with two columns the right-hand cell must not draw a divider, and the top row needs a bottom hairline so the block reads as one divided container */ .rz-uspstrip--2 .rz-uspcell{padding:14px 16px} .rz-uspstrip--2 .rz-uspcell:nth-child(2n){border-right:none} .rz-uspstrip--2 .rz-uspcell:nth-child(-n+2):not(:nth-last-child(-n+2)){border-bottom:1px solid var(--line)} .rz-uspstrip--2 .rz-uspcell__no{margin-bottom:0;display:inline-block;margin-right:11px;vertical-align:middle; font-size:9.5px;letter-spacing:.14em} .rz-uspstrip--2 .rz-uspcell__t{display:inline;font-size:12.5px;font-weight:600;color:var(--ink2); line-height:1.4;letter-spacing:normal;margin-bottom:0;vertical-align:middle} /* ---------- Staffelpreise (tier prices) -------------------------------------- */ /* JTL emits these as a ; the design lays them out as a 3-cell divided panel. Flipping the table to a grid in CSS keeps $Artikel->staffelPreis_arr and every JTL hook intact. */ .jtlw .rz-buy__price .bulk-prices{max-width:none;margin:0 0 16px; border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden} /* rz.css generated its own "MENGENRABATT — MEHR SPAREN" heading here as ::before content. Now that the panel has a real heading element, that one has to go or the card carries two stacked titles. */ .jtlw .rz-buy__price .bulk-prices::before{content:none;display:none} .jtlw .bulk-prices__h{display:flex;align-items:baseline;justify-content:space-between;gap:12px; padding:14px 18px;border-bottom:1px solid var(--line)} .jtlw .bulk-prices__h b{font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:700;color:var(--ink)} .jtlw .bulk-prices__tag{font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.14em; text-transform:uppercase;color:var(--red)} .jtlw .rz-buy__price .bulk-prices thead{display:none} /* only the tbody becomes the 3-track grid. Making the
    a grid too put tbody in a single 1fr track, so the whole tier row was squeezed into a third of the panel. */ .jtlw .rz-buy__price .bulk-prices table{display:block;width:100%;margin:0;border:0} .jtlw .rz-buy__price .bulk-prices tbody{display:grid;grid-template-columns:repeat(3,1fr);width:100%} .jtlw .rz-buy__price .bulk-prices tbody tr{display:block;padding:13px 16px;border-right:1px solid var(--line)} .jtlw .rz-buy__price .bulk-prices tbody tr:last-child{border-right:none} .jtlw .rz-buy__price .bulk-prices tbody td{display:block;padding:0!important;border:0!important; text-align:left!important;background:none!important} .jtlw .rz-buy__price .bulk-prices tbody td:first-child{font-family:var(--mono);font-size:9.5px; letter-spacing:.08em;color:var(--muted)!important;font-weight:400!important;margin-bottom:6px} /* both are spans in JTL's markup — they have to stack, or the price and its saving line run together as one string */ .jtlw .rz-buy__price .bulk-prices .bulk-price{display:block;font-size:15px;font-weight:700; color:var(--ink)!important;font-variant-numeric:tabular-nums} .jtlw .rz-buy__price .bulk-prices .bulk-base-price{display:block;font-size:11px;color:var(--muted);margin-top:3px} /* ---------- Produktdetails accordion ----------------------------------------- */ /* the design renders this as a bordered panel headed by a mono index, collapsed by default, carrying the field count and a caret. Native
    — no JS. */ .jtlw .rz-facts{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:0; overflow:hidden;margin-top:14px} .jtlw .rz-facts__h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px; font-size:13.5px;font-weight:700;letter-spacing:-.015em;cursor:pointer;list-style:none; transition:background .28s ease} .jtlw .rz-facts__h::-webkit-details-marker{display:none} .jtlw .rz-facts__h:hover{background:var(--sand)} .jtlw .rz-facts__h::before{content:"03";font-family:var(--mono);font-size:9.5px;letter-spacing:.14em; color:var(--red);font-weight:400;margin-right:11px} .jtlw .rz-facts__meta{display:flex;align-items:center;gap:10px;margin-left:auto} .jtlw .rz-facts__count{font-family:var(--mono);font-size:10px;color:var(--muted);font-weight:400} .jtlw .rz-facts__caret{color:var(--muted);flex-shrink:0;transition:transform .3s cubic-bezier(.16,1,.3,1)} .jtlw .rz-facts[open] .rz-facts__caret{transform:rotate(180deg)} .jtlw .rz-facts .info-essential{margin:0;padding:0;border-top:1px solid var(--line);list-style:none} .jtlw .rz-facts .info-essential li{display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding:12px 18px;border-bottom:1px solid var(--line);font-size:13.5px} .jtlw .rz-facts .info-essential li:last-child{border-bottom:none} .jtlw .rz-facts .info-essential li strong{font-weight:400;color:var(--muted);text-transform:none; letter-spacing:0;font-family:'Outfit',sans-serif;font-size:13px} .jtlw .rz-facts .info-essential li span{font-weight:600;text-align:right;text-transform:none;letter-spacing:0; font-family:'Outfit',sans-serif;color:var(--ink)} /* ---------- tabs (Beschreibung / Produktsicherheit / Bewertungen) ---------- */ /* rz.css already strips the Bootstrap tab chrome; the design differs in that the marker is the ACCENT and it GROWS from the left rather than switching on. */ /* #product-tabs IS the