/* ============================================================================ * jtl-widgets.css — design-agnostic skin for JTL-Shop's real widget markup. * * The "hybrid reskin mess" happens because a design has to restyle every widget * JTL actually renders (variation pickers, price matrix, Produktdetails table, * cart rows, filters, pagination …). Miss one and it bleeds the base theme. * This file skins the WHOLE set through ~24 tokens, with every trap from the * Meridian build fixed. A template: (1) sets the tokens, (2) includes this LAST, * (3) adds class="jtlw" to . Its unique parts (hero, mosaic) stay separate. * * Generalized from the (render-check-verified) Meridian reskin. Base = a Razan/ * NOVA-derived template (rz-* + Bootstrap4 + JTL classes). * ========================================================================== */ /* ---- TOKEN CONTRACT — override in your theme; these are neutral defaults --- */ .jtlw { --jw-accent:#0e7c74; --jw-accent-2:#14a093; --jw-accent-soft:#dceeeb; --jw-ink:#1b1a16; --jw-ink-2:#4a4f57; --jw-muted:#8a9099; --jw-surface:#ffffff; --jw-surface-2:#f6f4ef; --jw-shell:#14171c; --jw-shell-ink:#aeb7c2; --jw-line:#e6e2d8; --jw-line-2:#d8d3c7; --jw-sale:#e0512e; --jw-ok:#16a34a; --jw-radius:10px; --jw-radius-sm:8px; --jw-radius-lg:14px; --jw-pill:999px; --jw-font:inherit; --jw-mono:ui-monospace,"SFMono-Regular",Menlo,monospace; --jw-shadow:0 14px 34px rgba(16,19,25,.14); /* TRAP FIX — the base drives accents off --red/--grad (hardcoded reds). Retint them so every rz-* element that uses them follows YOUR accent, not #f80808. */ --red:var(--jw-accent); --redink:#fff; --primary:var(--jw-accent); --grad:linear-gradient(135deg,var(--jw-accent),var(--jw-accent-2)); } [data-theme="dark"] .jtlw, .jtlw[data-theme="dark"] { --jw-surface:#161a20; --jw-surface-2:#1e232b; --jw-ink:#f2efe8; --jw-ink-2:#c3c8cf; --jw-muted:#8b929c; --jw-line:#2a2f38; --jw-line-2:#333a44; --jw-accent:#3fbfb1; --jw-accent-2:#5ad3c5; } /* ---- resets: :where() = ZERO specificity so they never clobber components ---- */ .jtlw :where(a){color:inherit;text-decoration:none} .jtlw :where(button){font:inherit;color:inherit} .jtlw :where(input,select,textarea,button){font-family:var(--jw-font)} .jtlw :where(img){max-width:100%;height:auto} .jtlw :where(h1,h2,h3,h4){color:var(--jw-ink);text-wrap:balance} /* ---- buttons — incl. the BUTTON-BRIDGE override (base forces .btn-primary to ink at spec 0,4,0; beat it with a class-heavy selector + !important) ----- */ .jtlw .btn-primary,.jtlw a.btn.btn-primary:not(.disabled),.jtlw button.btn-primary, .jtlw .rz-btn:not(.rz-btn--light):not(.rz-btn--ghost),.jtlw .rz-addbig,.jtlw .rz-buy-add, .jtlw .basket-details-add-to-cart{ background:var(--jw-accent)!important;background-image:none!important;color:#fff!important; border:1px solid var(--jw-accent)!important;border-radius:var(--jw-pill);font-weight:600} .jtlw .btn-primary:hover,.jtlw .rz-btn:not(.rz-btn--light):hover,.jtlw .rz-addbig:hover, .jtlw .rz-buy-add:hover{background:var(--jw-accent-2)!important;border-color:var(--jw-accent-2)!important} .jtlw .rz-btn--light,.jtlw .btn-outline-primary,.jtlw .btn-secondary{ background:var(--jw-surface)!important;color:var(--jw-ink)!important;border:1px solid var(--jw-line)!important;border-radius:var(--jw-pill)} .jtlw .rz-addbig{border-radius:var(--jw-radius-sm)!important} /* ---- forms ---- */ .jtlw .form-control,.jtlw .rz-input,.jtlw input[type=text],.jtlw input[type=email], .jtlw input[type=password],.jtlw input[type=tel],.jtlw input[type=number],.jtlw textarea,.jtlw select{ background:var(--jw-surface);border:1px solid var(--jw-line);border-radius:var(--jw-radius-sm); color:var(--jw-ink);padding:11px 13px;outline:none} .jtlw .form-control:focus,.jtlw .rz-input:focus,.jtlw input:focus,.jtlw select:focus,.jtlw textarea:focus{ border-color:var(--jw-accent);box-shadow:0 0 0 3px var(--jw-accent-soft)} .jtlw label,.jtlw .form-label{color:var(--jw-ink-2);font-size:13px} .jtlw .custom-control-input:checked~.custom-control-label::before, .jtlw .rz-check.is-on .rz-check__box{background:var(--jw-accent)!important;border-color:var(--jw-accent)!important} /* ---- product tile (list, rails, cross-sell) ---- */ .jtlw .productbox,.jtlw .rz-tile,.jtlw .rz-card{ background:var(--jw-surface);border:1px solid var(--jw-line);border-radius:var(--jw-radius); overflow:hidden;transition:box-shadow .18s,transform .18s} .jtlw .productbox:hover,.jtlw .rz-tile:hover,.jtlw .rz-card:hover{box-shadow:var(--jw-shadow);transform:translateY(-2px)} .jtlw .rz-tile .rz-price,.jtlw .productbox .price,.jtlw .rz-card .price{color:var(--jw-ink);font-weight:700;font-variant-numeric:tabular-nums} .jtlw .rz-price--sale .rz-price__now,.jtlw .price-discount,.jtlw .strike~.price{color:var(--jw-sale)!important} .jtlw .badge-new,.jtlw .rz-flag--new{background:var(--jw-accent);color:#fff} .jtlw .badge-sale,.jtlw .rz-flag--sale{background:var(--jw-sale);color:#fff} /* ---- breadcrumb ---- */ .jtlw .breadcrumb,.jtlw .rz-crumb{background:none;font-size:13px;color:var(--jw-muted);padding:14px 0} .jtlw .breadcrumb a,.jtlw .rz-crumb a{color:var(--jw-muted)} .jtlw .breadcrumb .active,.jtlw .rz-crumb-cur{color:var(--jw-ink)} /* ---- category: hero, filters, toolbar, pagination ---- */ .jtlw .rz-cathero{border-radius:var(--jw-radius-lg);overflow:hidden} .jtlw .box-filter,.jtlw .rz-filter,.jtlw [class*=box-filter-]{border:none} .jtlw .rz-facetrow,.jtlw .filter-item{border-bottom:1px solid var(--jw-line)} .jtlw .rz-swatch,.jtlw .filter-color{border:1px solid var(--jw-line-2);border-radius:var(--jw-pill)} .jtlw .rz-swatch.is-active,.jtlw .filter-color.active{border-color:var(--jw-accent);box-shadow:0 0 0 2px var(--jw-accent)} .jtlw .rz-toolbar,.jtlw .productlist-config{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .jtlw .rz-sortbox,.jtlw .rz-viewtoggle{border:1px solid var(--jw-line);background:var(--jw-surface);border-radius:var(--jw-radius-sm)} .jtlw .rz-viewtoggle .is-active,.jtlw .btn-option.active,.jtlw .btn-outline-secondary.active{ background:var(--jw-accent)!important;color:#fff!important;border-color:var(--jw-accent)!important} .jtlw .pagination .page-link,.jtlw .page-link{color:var(--jw-ink-2);border:1px solid var(--jw-line);border-radius:var(--jw-radius-sm);margin:0 2px} .jtlw .pagination .page-link:hover{color:var(--jw-accent);background:var(--jw-surface-2)} .jtlw .page-item.active .page-link{background:var(--jw-accent)!important;border-color:var(--jw-accent)!important;color:#fff!important} /* ---- PDP: buy-box, price, stock, variations, stepper, facts, tabs ---- */ .jtlw .rz-buy h1,.jtlw .product-title{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.018em;color:var(--jw-ink)} .jtlw .rz-buy__cat,.jtlw .rz-sku,.jtlw .product-sku{font-family:var(--jw-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--jw-muted)} .jtlw .rz-buy__price,.jtlw .product-price .price{font-size:28px;font-weight:800;color:var(--jw-ink);font-variant-numeric:tabular-nums} .jtlw .rz-buy .small,.jtlw .tax-info{font-size:13px;color:var(--jw-muted)} .jtlw .rz-stock,.jtlw .availability-box{display:flex;align-items:center;gap:10px;background:var(--jw-surface);border:1px solid var(--jw-line);border-radius:var(--jw-radius-sm);padding:11px 14px;font-size:13px;color:var(--jw-ink-2)} .jtlw .rz-stock__dot,.jtlw .available .dot{width:8px;height:8px;border-radius:var(--jw-pill);background:var(--jw-ok)} /* variations — native swatches AND bootstrap-select dropdown */ .jtlw .rz-colorsw,.jtlw .variation-swatch{border:2px solid var(--jw-line-2);border-radius:var(--jw-pill)} .jtlw .rz-colorsw.on,.jtlw .variation-swatch.active{border-color:var(--jw-accent)} .jtlw .rz-size,.jtlw .variation-value{border:1px solid var(--jw-line-2);border-radius:var(--jw-radius-sm);padding:8px 14px} .jtlw .rz-size.on,.jtlw .variation-value.selected{background:var(--jw-ink);color:#fff;border-color:var(--jw-ink)} .jtlw .variations .bootstrap-select>.dropdown-toggle,.jtlw .selectpicker+.dropdown-toggle{ background:var(--jw-surface)!important;border:1px solid var(--jw-line)!important;border-radius:var(--jw-radius-sm)!important;color:var(--jw-ink)!important} .jtlw .bootstrap-select .dropdown-menu{border:1px solid var(--jw-line);border-radius:var(--jw-radius-sm);box-shadow:var(--jw-shadow)} .jtlw .bootstrap-select .dropdown-menu .active a,.jtlw .bootstrap-select .dropdown-menu a:hover{background:var(--jw-surface-2);color:var(--jw-accent)} /* quantity stepper (base .stepper triangle traps neutralized) */ .jtlw .rz-qty,.jtlw .stepper,.jtlw .qty-stepper{display:inline-flex;align-items:center;border:1px solid var(--jw-line);border-radius:var(--jw-pill);overflow:hidden} .jtlw .rz-qty button,.jtlw .stepper .btn{background:var(--jw-surface);color:var(--jw-ink);border:none;width:38px;height:40px} .jtlw .rz-qty input,.jtlw .stepper input,.jtlw .stepper .quantity{border:none;text-align:center;width:44px;background:none} /* Produktdetails table — kill Bootstrap stripes -> clean rows */ .jtlw .rz-facts table,.jtlw .product-details table,.jtlw table.table-striped{width:100%;margin:0;border:none;background:transparent} .jtlw .rz-facts table tr,.jtlw .product-details table tr{border-top:1px solid var(--jw-line)} .jtlw .rz-facts table td,.jtlw .rz-facts table th,.jtlw .product-details table td,.jtlw .product-details table th{ padding:12px 16px!important;border:none!important;background:transparent!important;font-size:14px;vertical-align:middle} .jtlw .rz-facts table td:first-child,.jtlw .product-details table td:first-child{color:var(--jw-muted)} .jtlw .rz-facts table td:last-child,.jtlw .product-details table td:last-child{text-align:right;color:var(--jw-ink);font-weight:600;font-variant-numeric:tabular-nums} .jtlw .table-striped>tbody>tr:nth-of-type(odd)>*{background:transparent!important;--bs-table-accent-bg:transparent!important} .jtlw .tab-navigation .nav-link,.jtlw .rz-tab{color:var(--jw-ink-2);border:none;background:none} .jtlw .tab-navigation .nav-link.active,.jtlw .rz-tab.on{color:var(--jw-ink);border-bottom:2px solid var(--jw-ink)} /* ---- cart ---- */ .jtlw .rz-citem,.jtlw .cart-item{border-bottom:1px solid var(--jw-line);background:var(--jw-surface)} .jtlw .rz-summary,.jtlw .cart-summary,.jtlw .rz-cartcont .card{background:var(--jw-surface);border:1px solid var(--jw-line);border-radius:var(--jw-radius)} .jtlw .rz-sumline,.jtlw .summary-row{display:flex;justify-content:space-between;padding:8px 0} .jtlw .rz-freehint,.jtlw .free-shipping-hint{background:var(--jw-accent-soft);color:var(--jw-accent);border-radius:var(--jw-radius-sm)} /* ---- nav + MEGA-MENU (had no layout in base -> collapsed; give it a panel) ---- */ .jtlw .rz-mainnav{background:var(--jw-surface);border-bottom:1px solid var(--jw-line);position:relative} .jtlw .rz-menu{display:flex;align-items:center;gap:28px;flex-wrap:wrap} .jtlw .rz-menu-item>a{font-size:14.5px;font-weight:600;color:var(--jw-ink);padding:14px 0} .jtlw .rz-menu-item>a:hover{color:var(--jw-accent)} .jtlw .rz-menu-item.has-mega{position:static} .jtlw .rz-mega{display:block!important;position:absolute;left:50%!important;right:auto!important;top:100%; transform:translateX(-50%)!important;width:min(1120px,calc(100vw - 40px));background:var(--jw-surface); border:1px solid var(--jw-line);border-radius:var(--jw-radius-lg);box-shadow:var(--jw-shadow); opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease;z-index:90} .jtlw .rz-menu-item.has-mega:hover>.rz-mega,.jtlw .rz-menu-item.has-mega.open>.rz-mega{opacity:1!important;visibility:visible!important;pointer-events:auto!important} .jtlw .rz-mega-inner{display:flex;gap:26px;padding:26px 30px} .jtlw .rz-mega-cols{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 26px;min-width:0} .jtlw .rz-mega-col__head{display:block;font-weight:700;font-size:13.5px;color:var(--jw-ink);margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid var(--jw-line)} .jtlw .rz-mega-sub{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .jtlw .rz-mega-sub a{font-size:13px;color:var(--jw-ink-2)} .jtlw .rz-mega-sub a:hover{color:var(--jw-accent)} @media(max-width:900px){.jtlw .rz-mega{display:none!important}} /* dropdown panels (account/wishlist/compare/cart) */ .jtlw .rz-dd-menu{background:var(--jw-surface);border:1px solid var(--jw-line);border-radius:var(--jw-radius);box-shadow:var(--jw-shadow);padding:10px} .jtlw .rz-dd-menu a{display:block;padding:9px 10px;border-radius:var(--jw-radius-sm);color:var(--jw-ink-2)} .jtlw .rz-dd-menu a:hover{background:var(--jw-surface-2);color:var(--jw-ink)} /* ---- header: search input (JTL's typeahead wraps it -> flex the WRAPPER), cart button (white on dark) ---- */ .jtlw .rz-search,.jtlw .m-search{display:flex!important;align-items:center;gap:10px;border:1px solid var(--jw-line);border-radius:var(--jw-pill);padding:6px 6px 6px 14px;background:var(--jw-surface)} .jtlw .rz-search .twitter-typeahead,.jtlw .m-search .twitter-typeahead{flex:1 1 0%!important;min-width:0!important;width:auto!important} .jtlw .rz-search .tt-input,.jtlw .m-search .tt-input,.jtlw .rz-search input,.jtlw .m-search input{width:100%!important;border:none;background:none;outline:none;color:var(--jw-ink)} .jtlw .rz-search-btn,.jtlw .m-search-btn{margin-left:auto!important;flex:0 0 auto;background:var(--jw-accent);color:#fff;border-radius:var(--jw-radius-sm);padding:8px 16px;font-weight:600} .jtlw .rz-cart,.jtlw .rz-cart-btn,.jtlw .cart-icon-dropdown-icon{background:var(--jw-ink);color:#fff!important;border-radius:var(--jw-radius-sm);display:inline-flex;align-items:center;gap:9px;padding:0 16px;height:44px} .jtlw .rz-cart *,.jtlw .rz-cart-btn *{color:#fff!important} .jtlw .rz-cart svg,.jtlw .rz-cart-btn svg{color:#fff!important;stroke:#fff!important} .jtlw .rz-ic-badge,.jtlw .cart-count{background:var(--jw-accent);color:#fff} /* ---- footer ---- */ .jtlw .rz-footer{background:var(--jw-shell);color:var(--jw-shell-ink)} .jtlw .rz-footer-col-title,.jtlw .footer h4{font-family:var(--jw-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--jw-accent-2)} .jtlw .rz-footer a{color:var(--jw-shell-ink)} .jtlw .rz-footer a:hover{color:#fff} /* ---- alerts / badges ---- */ .jtlw .alert{border:1px solid var(--jw-line);border-radius:var(--jw-radius);background:var(--jw-surface-2);color:var(--jw-ink)} .jtlw .alert-success{border-color:var(--jw-ok)} .jtlw .alert-danger{border-color:var(--jw-sale)} .jtlw .badge{border-radius:var(--jw-pill);font-weight:600} /* --- Prisma brand tokens (override jtl-widgets defaults) --- */ .jtlw{ --jw-accent:#AD4708; --jw-accent-2:#b8612b; --jw-accent-soft:#f4e5dc; --jw-ink:#1F1611; --jw-surface:#FFFFFF; }