.jbl{--jbl-cols:5;--jbl-gap-x:3.8%;--jbl-gap-y:42px;--jbl-ink:#000;--jbl-soft:#333;--jbl-price:#4C1DA1;--jbl-accent:#4C1DA1;--jbl-accent-ink:#fff;--jbl-control:rgba(255,255,255,.5);--jbl-control-ink:#000;--jbl-panel:#fff;--jbl-line:rgba(76,29,161,.12);--jbl-overlay:rgba(255,255,255,.9);--jbl-overlay-icon:#4C1DA1;position:relative;scroll-margin-top:110px;}.jbl:focus{outline:none}.jbl--dark{--jbl-ink:#fff;--jbl-soft:rgba(255,255,255,.85);--jbl-price:#91FF00;--jbl-accent:#91FF00;--jbl-accent-ink:#000;--jbl-control:rgba(255,255,255,.75);--jbl-control-ink:#1a1a1a;--jbl-panel:rgba(255,255,255,.08);--jbl-line:rgba(255,255,255,.16);--jbl-overlay:rgba(76,29,161,.2);--jbl-overlay-icon:#91FF00;}.jbl .screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;}.jbl-layout.has-filters{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start;}.jbl-main{min-width:0}.jbl-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin:0 0 28px;}.jbl .jbl-count{margin:0!important;padding:0!important;font-family:'Open Sans',Arial,sans-serif!important;font-size:18px!important;color:var(--jbl-ink)!important;}.jbl-toolbar__controls{display:flex;align-items:center;gap:12px;margin-left:auto}.jbl-sort,.jbl-cat{margin:0!important}.jbl .jbl-sort__select,.jbl .jbl-cat__select{-webkit-appearance:none;appearance:none;font-family:'Open Sans',Arial,sans-serif!important;font-size:16px!important;color:var(--jbl-control-ink)!important;background-color:var(--jbl-control)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 3.5l4 3 4-3M2 6.5l4 3 4-3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 10px center!important;background-size:12px 12px!important;border:0!important;border-radius:8px!important;padding:7px 34px 8px 12px!important;box-shadow:rgba(76,29,161,.15) 0 6px 12px -6px!important;cursor:pointer;max-width:100%;}.jbl-sort__go{margin-left:6px}.jbl-views{display:flex;gap:6px}.jbl:not(.jbl-js) .jbl-views{display:none}.jbl .jbl-view{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;border:0;padding:0;margin:0;cursor:pointer;background:var(--jbl-control);color:var(--jbl-control-ink)!important;transition:background .2s ease,color .2s ease;}.jbl .jbl-view:focus-visible{outline:2px solid var(--jbl-accent);outline-offset:2px}.jbl .jbl-view svg{fill:currentColor;display:block}.jbl .jbl-view.is-active{background:var(--jbl-accent);color:var(--jbl-accent-ink)!important}.jbl .jbl-loop{margin:0!important;padding:0!important}.jbl ul.products.jbl-products{display:grid!important;grid-template-columns:repeat(var(--jbl-cols),minmax(0,1fr))!important;column-gap:var(--jbl-gap-x)!important;row-gap:var(--jbl-gap-y)!important;list-style:none!important;margin:0 0 42px!important;padding:0!important;}.jbl ul.products.jbl-products::before,.jbl ul.products.jbl-products::after{display:none!important;content:none!important}.jbl ul.products.jbl-products > li.product{float:none!important;clear:none!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important;list-style:none!important;min-width:0;position:relative;background:transparent!important;border:0!important;}.jbl .jbl-card__link{display:block;text-decoration:none!important;color:inherit}.jbl .jbl-card__media{position:relative;display:block;border-radius:10px}.jbl .jbl-card__media img{display:block!important;width:100%!important;margin:0!important;border-radius:10px!important;box-shadow:rgba(76,29,161,.2) 0 12px 18px -6px!important;}/* Hover overlay — recreated from Divi's .et_overlay on the same tiles */ .jbl .jbl-card__media::after{ content:'\e050';font-family:'ETmodules'!important;font-size:32px;line-height:1; color:var(--jbl-overlay-icon); display:flex;align-items:center;justify-content:center; position:absolute;inset:0;border-radius:10px; background:var(--jbl-overlay);opacity:0;transition:opacity .3s ease;pointer-events:none; } .jbl .jbl-card__link:hover .jbl-card__media::after, .jbl .jbl-card__link:focus-visible .jbl-card__media::after{opacity:1} .jbl .jbl-card__body{display:block} .jbl .jbl-card__title{ font-family:'Bayon',Helvetica,Arial,sans-serif!important; font-size:20px!important;line-height:22px!important;font-weight:500!important; color:var(--jbl-ink)!important;margin:0!important;padding:10px 0!important; text-transform:none!important;letter-spacing:normal!important; } .jbl .jbl-card__price, .jbl .jbl-card__price .amount{ display:block;font-family:'Inter',Helvetica,Arial,sans-serif!important; font-size:14px!important;font-weight:700!important;color:var(--jbl-price)!important;margin:0!important; } .jbl .jbl-card__price .amount{display:inline} .jbl .jbl-card__price del{opacity:.6;font-weight:400} .jbl .jbl-card__price ins{text-decoration:none} .jbl .jbl-card__desc{display:none} /* ---------- list view ---------- */ .jbl ul.products.jbl-products--list{grid-template-columns:minmax(0,1fr)!important;row-gap:0!important} .jbl ul.products.jbl-products--list > li.product{padding:22px 0!important;border-bottom:1px solid var(--jbl-line)!important} .jbl ul.products.jbl-products--list > li.product:first-child{padding-top:0!important} .jbl .jbl-products--list .jbl-card__link{ display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:center; } .jbl .jbl-products--list .jbl-card__title{font-size:24px!important;line-height:26px!important;padding:0 0 8px!important} .jbl .jbl-products--list .jbl-card__desc{ display:block;margin:10px 0 0; font-family:'Open Sans',Arial,sans-serif;font-size:15px;line-height:1.55;color:var(--jbl-soft); } /* ---------- pagination ---------- */ .jbl .jbl-pagination{margin:0!important;text-align:center} .jbl .jbl-pagination ul.page-numbers{ display:inline-flex!important;flex-wrap:wrap;justify-content:center;gap:6px; list-style:none!important;margin:0!important;padding:0!important;border:0!important; } .jbl .jbl-pagination ul.page-numbers li{margin:0!important;padding:0!important;border:0!important;float:none!important;list-style:none!important} .jbl .jbl-pagination .page-numbers a, .jbl .jbl-pagination .page-numbers span, .jbl .jbl-pagination a.page-numbers, .jbl .jbl-pagination span.page-numbers{ display:inline-flex!important;align-items:center;justify-content:center; min-width:40px;height:40px;padding:0 8px!important;border-radius:8px!important; font-family:'Bayon',Helvetica,Arial,sans-serif!important;font-size:20px!important;line-height:1!important; color:var(--jbl-ink)!important;background:transparent!important;text-decoration:none!important; transition:background .2s ease; } .jbl .jbl-pagination a.page-numbers:hover{background:var(--jbl-control)!important;color:var(--jbl-control-ink)!important} .jbl .jbl-pagination span.page-numbers.current{background:var(--jbl-accent)!important;color:var(--jbl-accent-ink)!important} .jbl .jbl-pagination span.page-numbers.dots{min-width:24px} /* ---------- empty ---------- */ .jbl .jbl-empty{ margin:0 0 42px!important;padding:24px!important;border-radius:10px; background:var(--jbl-panel)!important;color:var(--jbl-ink)!important; font-family:'Open Sans',Arial,sans-serif;font-size:16px; } .jbl .jbl-empty a{color:var(--jbl-accent)!important;font-weight:600} /* ---------- filters ---------- */ .jbl-filters{position:static} /* owner 29-10: the panel scrolls with the page (was sticky) */ .jbl .jbl-filters__toggle{display:none} .jbl-filters__body{ background:var(--jbl-panel);border-radius:10px;padding:20px; box-shadow:rgba(76,29,161,.2) 0 12px 18px -6px; } .jbl .jbl-filters__clear{ display:inline-block;margin:0 0 14px; font-family:'Open Sans',Arial,sans-serif;font-size:14px;font-weight:600; color:var(--jbl-accent)!important;text-decoration:underline!important; } .jbl .jbl-filter{border:0!important;margin:0;padding:0;min-width:0} .jbl .jbl-filter + .jbl-filter{margin-top:18px;padding-top:18px;border-top:1px solid var(--jbl-line)!important} .jbl .jbl-filter__title{ margin:0 0 10px!important;padding:0!important;float:none;width:auto; font-family:'Bayon',Helvetica,Arial,sans-serif;font-size:20px;line-height:22px;color:var(--jbl-ink); } .jbl .jbl-filter__terms{list-style:none!important;margin:0!important;padding:0!important} .jbl .jbl-term{list-style:none!important;margin:0!important;padding:0!important} .jbl .jbl-term label{ display:flex;align-items:center;gap:10px;padding:5px 0;margin:0;cursor:pointer;position:relative; font-family:'Open Sans',Arial,sans-serif;font-size:15px;line-height:1.3;font-weight:400; color:var(--jbl-ink)!important; } /* The real checkbox stays in the form and in the accessibility tree; the box is its picture. */ .jbl .jbl-term__input{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;margin:0!important} .jbl .jbl-term__box{ flex:0 0 18px;width:18px;height:18px;border-radius:4px; border:2px solid var(--jbl-accent);position:relative;box-sizing:border-box; } .jbl .jbl-term__input:focus-visible + .jbl-term__box{outline:2px solid var(--jbl-accent);outline-offset:2px} .jbl .jbl-term__input:checked + .jbl-term__box{background:var(--jbl-accent)} .jbl .jbl-term__input:checked + .jbl-term__box::after{ content:'';position:absolute;left:4px;top:0;width:5px;height:10px; border:solid var(--jbl-accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg); } .jbl .jbl-term__name{flex:1;min-width:0} .jbl .jbl-term__count{ font-size:12px;font-weight:600;padding:1px 7px;border-radius:10px; background:var(--jbl-line);color:var(--jbl-ink); } .jbl .jbl-term label:hover .jbl-term__name{text-decoration:underline} .jbl .jbl-filters__apply{ margin-top:16px;padding:10px 16px;border:0;border-radius:8px;cursor:pointer; font-family:'Bayon',Helvetica,Arial,sans-serif;font-size:18px; background:var(--jbl-accent);color:var(--jbl-accent-ink); } .jbl-js .jbl-term.is-extra{display:none} .jbl-js .jbl-filter.is-open .jbl-term.is-extra{display:block} .jbl:not(.jbl-js) .jbl-filter__more{display:none} .jbl .jbl-filter__more{ margin:8px 0 0;padding:0;border:0;background:none;cursor:pointer; font-family:'Open Sans',Arial,sans-serif;font-size:14px;font-weight:600; color:var(--jbl-accent);text-decoration:underline; } /* ---------- loading ---------- */ .jbl.is-loading .jbl-main, .jbl.is-loading .jbl-filters__body{opacity:.45;transition:opacity .15s ease;pointer-events:none} /* ---------- responsive ---------- */ @media (max-width:1200px){ .jbl-layout.has-filters{grid-template-columns:220px minmax(0,1fr);gap:28px} } @media (max-width:980px){ .jbl{--jbl-cols:2!important;--jbl-gap-x:4%;--jbl-gap-y:30px} .jbl-layout.has-filters{display:block} .jbl-filters{position:static;margin:0 0 20px} .jbl .jbl-filters__toggle{ display:inline-flex;align-items:center;gap:8px;cursor:pointer; font-family:'Bayon',Helvetica,Arial,sans-serif;font-size:20px;line-height:1; padding:10px 16px;border:0;border-radius:8px; background:var(--jbl-accent);color:var(--jbl-accent-ink); } .jbl .jbl-filters__badge{ font-family:'Open Sans',Arial,sans-serif;font-size:12px;font-weight:700; padding:2px 7px;border-radius:10px;background:var(--jbl-accent-ink);color:var(--jbl-accent); } .jbl.jbl-js .jbl-filters__body{display:none;margin-top:12px} .jbl.jbl-js.filters-open .jbl-filters__body{display:block} .jbl:not(.jbl-js) .jbl-filters__body{margin-top:12px} .jbl-toolbar__controls{margin-left:0;width:100%;justify-content:space-between} } @media (max-width:600px){ .jbl .jbl-card__title{font-size:18px!important;line-height:20px!important} .jbl .jbl-products--list .jbl-card__link{grid-template-columns:110px minmax(0,1fr);gap:16px} .jbl .jbl-products--list .jbl-card__title{font-size:19px!important;line-height:21px!important} .jbl .jbl-products--list .jbl-card__desc{font-size:14px;-webkit-line-clamp:4;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden} .jbl .jbl-count{font-size:16px!important} } /* ---------- Divi / WooCommerce shield (5.18.7, measured on the shop 29-10) ---------- Divi's critical CSS and woocommerce.css style every product loop through ".woocommerce ul.products li.product ..." and "#left-area ul, .et-l--body ul",some of it !important and one class or an id stronger than the rules above;the Mockups page loads neither,so it never showed. These restate the module's own values one class stronger, and the look v2 block below sets none of these properties. */ .jbl{font-size:16px;line-height:normal;font-weight:400} .jbl ul{line-height:normal!important} .jbl ul.products.jbl-products--list li.product .jbl-card__link{display:grid!important} .jbl ul.products li.product .jbl-card__media img{margin:0!important;box-shadow:rgba(76,29,161,.2) 0 12px 18px -6px!important} .jbl ul.products li.product .price.jbl-card__price, .jbl ul.products li.product .price.jbl-card__price .amount{color:var(--jbl-price)!important} /* 5.19.2: a category too small for any filter keeps the panel with a note. */ .jbl .jbl-filters__none{margin:0;font-size:14px;line-height:1.5;opacity:.75} /* List view: the whole short description, no line clamp (owner 29-10). */ .jbl ul.products.jbl-products--list li.product .jbl-card__desc{display:block!important;-webkit-line-clamp:none!important;overflow:visible!important} /* 5.19.4: woocommerce.css clips ".woocommerce nav.woocommerce-pagination ul li" (overflow:hidden), which cut the current page badge v24 scales to 1.1 (39.6 px in a 36 px li; owner 30-10). */ .jbl .jbl-pagination ul.page-numbers li{overflow:visible!important} /* ============================================================ LOOK v2 - Mockups v24, accepted by the owner on 29-10-2026 (Mockups/shop-product-listing/tools/src/listing-v2.css, SHA-1 123c0c237cfa60f67e4600c5d0447e6572f41aee), byte for byte. It overrides the rules above, so it stays last in this file. ============================================================ */ /* ============================================================ JB Toolkit — Product Listing, look v2 (Mockups; mockup jb-products-v2; for JB-Toolkit after the owner's yes) Owner 30-10-2026: list = a small thumbnail on the left,next to it title,short description and price;hovers and buttons as in the carousels;pagination in the carousel button style. Owner 29-10-2026 on mockup v1: too many colours - the selected item purple,hover lime,the rest black,arrows purple;lime ONLY for hover;subtler text shadows;the dropdown fields get a shadow with a vertical offset and a purple outline on hover;"Show N more" in thin small caps,purple,never lime;the plus icon on the thumbnails exactly as on the shop page,a touch smaller;in the grid the number of columns changes with the width instead of the tiles shrinking. Loads AFTER product-listing.css;every selector is scoped to .jbl. No markup change. ============================================================ */ .jbl{--jbl-overlay:rgba(76,29,161,.2);/* the carousels' veil (was rgba(255,255,255,.9)) */ --jbl-overlay-icon:#4C1DA1; /* the shop page's purple plus (owner 29-10) */ --jbl-nav:#4C1DA1;--jbl-nav-hover:#91FF00;--jbl-num:#000;--jbl-sel:#4C1DA1;--jbl-sel-ink:#fff;--jbl-hover:#91FF00;--jbl-hover-ink:#000;--jbl-link:#4C1DA1;--jbl-text-shadow:0 1px 2px rgba(76,29,161,.25);--jbl-icon-shadow:drop-shadow(0 1px 2px rgba(76,29,161,.3));--jbl-hover-shadow:drop-shadow(0 0 3px rgba(145,255,0,.6));--jbl-tile-min:220px;--jbl-gap-y:56px;/* v23 (owner 29-10): more space between the grid's rows - was 42 */ --jbl-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cpath d='M3 2l11 12L3 26' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .jbl--dark{ --jbl-accent:#fff; /* was #91FF00: lime only for hover - ticks, badge and selected states are white */ --jbl-accent-ink:#4C1DA1; --jbl-overlay-icon:#4C1DA1; /* owner 29-10 (v3): pure white text looks artificial on the dark section - every white text at 90 % */ --jbl-ink:rgba(255,255,255,.9); /* was #fff (product-listing.css .jbl--dark): titles, count, filter names */ --jbl-nav:rgba(255,255,255,.9); --jbl-num:rgba(255,255,255,.9); --jbl-sel:#fff; /* v4 (owner 29-10): the selected page is a white circle, no ring */ --jbl-sel-ink:#4C1DA1; --jbl-hover:transparent; /* v21 (owner 29-10): dark page-number hover = the figure turns lime, no circle */ --jbl-hover-ink:#91FF00; --jbl-link:rgba(255,255,255,.9); --jbl-text-shadow:0 1px 2px rgba(0,0,0,.35); --jbl-icon-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.35)); } /* ---------- hover overlay: the carousels' veil,the shop page's plus a touch smaller ---------- */ .jbl .jbl-card__media::after{font-size:26px} /* v11 (owner 29-10 on v10): on the dark section the product title turns full white while the product is hovered (90 % at rest), in the grid and in the list; the light section keeps its title as it is */ .jbl .jbl-card__title{transition:color .2s ease} .jbl--dark .jbl-card__link:hover .jbl-card__title, .jbl--dark .jbl-card__link:focus-visible .jbl-card__title{color:#fff!important} /* ---------- grid: the number of columns follows the width (at most the shortcode's columns),tiles >= 220 px ---------- */ .jbl ul.products.jbl-products--grid{grid-template-columns:repeat(auto-fill,minmax(max(var(--jbl-tile-min),calc((100% - (var(--jbl-cols) - 1) * var(--jbl-gap-x)) / var(--jbl-cols))),1fr))!important;}.jbl ul.products.jbl-products--list > li.product{padding:26px 0!important}.jbl .jbl-products--list .jbl-card__link{grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:start}.jbl .jbl-products--list .jbl-card__body{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title price" "desc price";column-gap:32px;align-items:start;}.jbl .jbl-products--list .jbl-card__title{grid-area:title;font-size:22px!important;line-height:24px!important;padding:4px 0 6px!important}.jbl .jbl-products--list .jbl-card__price{grid-area:price;padding-top:6px;text-align:right;white-space:nowrap;letter-spacing:1px}.jbl .jbl-products--list .jbl-card__price,.jbl .jbl-products--list .jbl-card__price .amount{font-size:16px!important}.jbl .jbl-products--list .jbl-card__desc{grid-area:desc;margin:0;font-size:14px;line-height:1.55;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}/* ---------- grid / list switch - v22 (owner 29-10 on v21: "I like these tile icons much more, as long as they are as tall as the input fields and have the same drop shadows"): tiles again,37 px like the drop-down fields,with their 8 px radius,background,shadow and hover (purple ring;solid white on the dark section);the selected tile is purple with a white icon - lime with a black icon on the dark section,as the selected page there. No lift,no scale,no icon shadow. ---------- */ .jbl .jbl-view{width:37px;height:37px;border-radius:8px;background:var(--jbl-control)!important;color:var(--jbl-control-ink)!important;box-shadow:rgba(76,29,161,.2) 0 12px 18px -6px;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;}.jbl .jbl-view svg{width:22px;height:22px}.jbl .jbl-view:hover{box-shadow:rgba(76,29,161,.2) 0 12px 18px -6px,0 0 0 1px #4C1DA1}.jbl--dark .jbl-view:hover{background:#fff!important}.jbl .jbl-view.is-active{background:#4C1DA1!important;color:#fff!important}.jbl--dark .jbl-view.is-active{background:#91FF00!important;color:#000!important}.jbl .jbl-view--grid{order:2}.jbl .jbl-sort__select,.jbl .jbl-cat__select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5L8 6l-3.5 3.5' fill='none' stroke='%234C1DA1' stroke-opacity='.3' stroke-width='1.5'/%3E%3C/svg%3E")!important;background-size:12px 12px!important;box-shadow:rgba(76,29,161,.2) 0 12px 18px -6px!important;transition:box-shadow .2s ease,background-color .2s ease;/* v7 (owner 29-10 on v6: "the fields clip the font"): line-height normal gave Open Sans 16 px a 22 px box in a 22 px content area - no slack,so at 150 % display scaling the descenders were cut. 26 px line,same 37 px field */ line-height:26px!important;padding-top:5px!important;padding-bottom:6px!important;}.jbl .jbl-sort__select:hover,.jbl .jbl-cat__select:hover,.jbl .jbl-sort__select:focus-visible,.jbl .jbl-cat__select:focus-visible{outline:none;box-shadow:rgba(76,29,161,.2) 0 12px 18px -6px,0 0 0 1px #4C1DA1!important;}.jbl--dark .jbl-sort__select:hover,.jbl--dark .jbl-cat__select:hover,.jbl--dark .jbl-sort__select:focus-visible,.jbl--dark .jbl-cat__select:focus-visible{background-color:#fff!important}/* v9 (owner 29-10 on v8: the arrows jumped from one state to the other and were too small): with JavaScript the field's arrow is the shared chevron drawn on its form (the form is exactly as wide as the field), so it has the size and the turn of every other chevron; the background drawing stays only as the no-JS fallback */ .jbl.jbl-js .jbl-sort__select,.jbl.jbl-js .jbl-cat__select{background-image:none!important} .jbl.jbl-js .jbl-sort,.jbl.jbl-js .jbl-cat{position:relative;--jbl-chev-down:-1px} /* v13: owner - the down arrow sat too high; -1 px puts it on the middle of the lower-case letters (measured) */ /* ---------- filter headings (owner 29-10 on v11): the line beside a heading is the group's top border,which the legend cuts - it started right at the last letter;12 px of padding keeps it off the text,always ---------- */ .jbl .jbl-filter__title{padding:0 12px 0 0!important}/* v18 (owner 29-10 on v17: Show N more sat closer to the next section than a heading to its own options,so the groups did not separate): measured heading -> first option 20.7 px (Brand,the first group,2.7) and a group's end -> the next heading 10.7 px. Now every heading sits about 9 px above its options and a group ends about 29 px above the next heading (the legend straddles the group's top border,so the margin is 7 px larger). */ .jbl .jbl-filter{padding-top:6px}.jbl .jbl-filter + .jbl-filter{margin-top:36px;padding-top:6px}.jbl .jbl-filter__more,.jbl .jbl-filters__clear{display:inline-flex;align-items:center;gap:6px;padding:2px 0;border:0;border-radius:0;background:none;cursor:pointer;font-family:'Open Sans',Arial,sans-serif;font-size:15px;font-weight:400;line-height:1.3;font-variant-caps:all-small-caps;letter-spacing:.06em;color:var(--jbl-link)!important;text-decoration:none!important;text-shadow:none;--jbl-chev-y:1px;--jbl-chev-down:-1px;}/* ---------- chevrons (owner 29-10,v8): the shop's sidebar menu rule for every chevron that opens something - at rest pointing right at .3, on hover (and Filters when open) full colour pointing down. Drawn as the menu draws it, JB-Toolkit sidebar.css 96-111: a 6 px box with two 1.5 px currentColor edges. --jbl-chev-y centres it on the text; pointing down, the drawing sits 2.5 px lower, so it goes up by --jbl-chev-down (default 2.5 px). The pagination arrows are not chevrons of this kind (they page, they open nothing) and keep their own rule. ---------- */ .jbl .jbl-filter__more::after, .jbl .jbl-filters__clear::after, .jbl .jbl-filters__toggle::after, .jbl.jbl-js .jbl-sort::after, .jbl.jbl-js .jbl-cat::after{ content:'';flex:none;box-sizing:content-box;width:6px;height:6px;background:none;-webkit-mask:none;mask:none; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:translateY(var(--jbl-chev-y,0px)) rotate(-45deg);opacity:.3;transition:opacity .25s ease,transform .3s ease; } .jbl .jbl-filter__more:hover::after, .jbl .jbl-filters__clear:hover::after, .jbl .jbl-filters__toggle:hover::after, .jbl.filters-open .jbl-filters__toggle::after, .jbl.jbl-js .jbl-sort:hover::after,.jbl.jbl-js .jbl-sort:focus-within::after, .jbl.jbl-js .jbl-cat:hover::after,.jbl.jbl-js .jbl-cat:focus-within::after{transform:translateY(calc(var(--jbl-chev-y,0px) + var(--jbl-chev-down,-2.5px))) rotate(45deg);opacity:1} /* the drop-down lists: the chevron sits where the field's arrow was (right 15 px,centred),purple on the white field */ .jbl.jbl-js .jbl-sort::after,.jbl.jbl-js .jbl-cat::after{position:absolute;right:15px;top:50%;margin-top:-3.75px;color:#4C1DA1;pointer-events:none}/* v16 (owner 29-10 on v15: "Clear all filters - a purple button with the site's styles"): the shop's "Shop Online" button, a Divi Theme Builder module (JB-Toolkit measured it on /shop/ at 1440 px, 29-10): purple, white, Inter 14 / 700, .16em, upper case, radius 10, padding 12 / 14, line-height 1.7, no shadow. On hover the colour stays, the text moves left (padding 12 28 12 9.8) and the arrow fades in on the right, 300 ms. Divi's ETmodules arrow does not load outside the shop,so the arrow is the chevron drawn here,white,pointing right. On the dark section the shop's buttons are black. At the shop's 14 px the button is 200 px (210 on hover) and the filter card leaves 180 px inside its 20 px padding,so it is the same button scaled to 12 px with .12em and Divi's paddings in em (rest 1em, hover 2em / .7em) - it stays inside the card in both states (measured). v17 (owner 29-10 on v16: the text moved left too much, the font was a little small): 13 px, .1em so that both states still fit, and the text moves 2 px instead of 3.6 (padding-left 13 -> 11). */ .jbl .jbl-filters__clear{ display:inline-block;position:relative;padding:12px 13px;border:0;border-radius:10px;background:#4C1DA1;box-shadow:none; font-family:'Inter',Helvetica,Arial,sans-serif;font-size:13px;font-weight:700;line-height:1.7;letter-spacing:.1em; text-transform:uppercase;font-variant-caps:normal;white-space:nowrap;color:#fff!important;text-decoration:none!important; transition:padding .3s ease,background-color .3s ease; } .jbl--dark .jbl-filters__clear{background:#000} .jbl .jbl-filters__clear:hover{padding:12px 22px 12px 11px} .jbl .jbl-filters__clear::after{ position:absolute;top:50%;right:23px;margin-top:-3.75px;opacity:0; transform:rotate(-45deg);transition:opacity .3s ease,right .3s ease; } .jbl .jbl-filters__clear:hover::after{right:13px;opacity:1;transform:rotate(-45deg)} /* v14 (owner 29-10 on v13): Show N more loses the underline - black at rest (white 90 % on the dark section), purple on hover (full white on the dark section, where purple would vanish), 2 px bigger; v15: 2 px more (19 px) */ .jbl .jbl-filter__more{ font-size:19px;color:var(--jbl-ink)!important;transition:color .2s ease; /* v15: measured against the text's ink at 19 px - 1.23 px high at rest,0.11 px high pointing down;the owner saw both high,so both sit a little below the middle (+0.27 / +0.64 px) */ --jbl-chev-y:2.5px;--jbl-chev-down:-1.75px;}.jbl .jbl-filter__more:hover{color:var(--jbl-sel)!important}.jbl .jbl-filters__clear{margin:0 0 14px}.jbl .jbl-sort__go,.jbl .jbl-filters__apply{display:inline-flex;align-items:center;gap:8px;padding:4px 0;border:0;border-radius:0;background:none;cursor:pointer;font-family:'Bayon',Helvetica,Arial,sans-serif;font-size:18px;line-height:1;color:var(--jbl-nav)!important;text-shadow:var(--jbl-text-shadow);transition:color .2s ease;}.jbl .jbl-sort__go:hover,.jbl .jbl-filters__apply:hover{color:var(--jbl-nav-hover)!important}.jbl .jbl-filters__apply{margin-top:16px}.jbl .jbl-pagination ul.page-numbers{gap:12px;align-items:center}.jbl .jbl-pagination .page-numbers a,.jbl .jbl-pagination .page-numbers span,.jbl .jbl-pagination a.page-numbers,.jbl .jbl-pagination span.page-numbers{min-width:36px;width:36px;height:36px;padding:0!important;border-radius:50%!important;color:var(--jbl-num)!important;transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;}.jbl .jbl-pagination a.page-numbers:hover{background:var(--jbl-hover)!important;color:var(--jbl-hover-ink)!important}.jbl .jbl-pagination span.page-numbers.current{background:var(--jbl-sel)!important;color:var(--jbl-sel-ink)!important;transform:scale(1.1);box-shadow:none}/* v21 (owner 29-10 on v20): on the dark section the selected page is a lime circle (black figure,as the shop's lime buttons) - the owner's call,so lime at rest here is intended;the light section keeps purple */ .jbl--dark .jbl-pagination span.page-numbers.current{background:#91FF00!important;color:#000!important}.jbl .jbl-pagination span.page-numbers.dots{width:auto;min-width:24px;border-radius:0!important;opacity:.6}.jbl .jbl-pagination a.page-numbers.prev,.jbl .jbl-pagination a.page-numbers.next{position:relative;font-size:0!important;color:transparent!important;background:transparent!important;border-radius:0!important}.jbl .jbl-pagination a.page-numbers.prev::after,.jbl .jbl-pagination a.page-numbers.next::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:28px;margin:-14px 0 0 -8px;background:var(--jbl-nav);-webkit-mask:var(--jbl-chevron) center/contain no-repeat;mask:var(--jbl-chevron) center/contain no-repeat;filter:var(--jbl-icon-shadow);transition:background-color .2s ease;}.jbl .jbl-pagination a.page-numbers.prev::after{transform:scaleX(-1)}.jbl .jbl-pagination a.page-numbers.prev:hover::after,.jbl .jbl-pagination a.page-numbers.next:hover::after{background:var(--jbl-nav-hover);filter:var(--jbl-hover-shadow)}@media (max-width:980px){.jbl{--jbl-cols:4!important;--jbl-gap-y:40px}/* v8 (owner 29-10 on v7: "the letter spacing and the hovers are right in the sidebar menu styles"): Filters takes the shop's sidebar category menu item - JB-Toolkit modules\sidebar\sidebar.css 46-53, 57-67, 96-111, 139-148 (5.18.4): Bayon with 1 px letter spacing, line-height 1.2, 8 / 6 px padding, 6 px radius, a .06 purple wash on hover and when open (white .1 on the dark section, as the purple scheme), no lift, no shadow; the arrow follows the chevron rule. The -6 px margin keeps the word on the content edge. At line-height 1.2 Bayon's capitals sit 1 px above the flex middle (measured),so the badge and the arrow go up 1 px. v19 (owner 29-10 on v18: "on mobile let Filters be a black button - it will look better and line up with the mobile layout"): the black button of JB-Toolkit and the shop (#000,white,radius 10),as tall as the drop-down fields (37 px) and on the content edge like them;the word keeps Bayon with 1 px spacing. On hover the colour stays,as on the shop's buttons - only the chevron turns. The badge is white with a purple figure on black. v20 (owner 29-10 on v19: "the Filters button is too small - the same style as Clear, only black, plus the badge"): Inter 13 / 700, upper case, .1em, line-height 1.7, padding 12 / 13, radius 10 - 46 px as Clear. The chevron keeps the chevron rule (this button opens the drawer). */ .jbl .jbl-filters__toggle{ padding:12px 13px;margin-left:0;border-radius:10px;background:#000;color:#fff;text-shadow:none; font-family:'Inter',Helvetica,Arial,sans-serif;font-size:13px;font-weight:700;line-height:1.7;letter-spacing:.1em; text-transform:uppercase;--jbl-chev-y:0px; } /* v5: the count in a circle, not a rounded rectangle */ .jbl .jbl-filters__badge{ display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box; width:20px;height:20px;padding:0;border-radius:50%;font-size:11px;line-height:1;letter-spacing:0;position:relative;top:0; background:#fff;color:#4C1DA1;text-shadow:none; } .jbl .jbl-products--list .jbl-card__link{grid-template-columns:96px minmax(0,1fr);gap:18px} .jbl .jbl-products--list .jbl-card__title{font-size:20px!important;line-height:22px!important} /* v10 (owner 29-10 on v9): on tablet and phone the view switch sits on the count's line at the right and the drop-down lists take the next line - at the right on a tablet,two columns on a phone. The controls' wrapper steps aside (display:contents, no markup change), the toolbar orders its parts and ::after breaks the line; the row gap is the lists' top margin,so the empty break line adds none. */ .jbl .jbl-toolbar{column-gap:12px;row-gap:0}.jbl .jbl-toolbar__controls{display:contents}.jbl .jbl-count{order:1}.jbl .jbl-views{order:2;margin-left:auto}.jbl .jbl-toolbar::after{content:'';order:3;flex-basis:100%;height:0}.jbl .jbl-cat{order:4;margin:12px 0 0 auto!important}.jbl .jbl-sort{order:5;margin:12px 0 0!important}}@media (max-width:600px){.jbl{--jbl-tile-min:150px}.jbl .jbl-cat,.jbl .jbl-sort{flex:1 1 140px;min-width:0}.jbl .jbl-cat__select,.jbl .jbl-sort__select{width:100%}.jbl ul.products.jbl-products--list > li.product{padding:20px 0!important}.jbl .jbl-products--list .jbl-card__link{grid-template-columns:84px minmax(0,1fr);gap:14px}.jbl .jbl-products--list .jbl-card__body{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "price" "desc"}.jbl .jbl-products--list .jbl-card__title{font-size:18px!important;line-height:20px!important;padding:0 0 4px!important}.jbl .jbl-products--list .jbl-card__price{padding:0 0 6px;text-align:left;white-space:normal}.jbl .jbl-products--list .jbl-card__price,.jbl .jbl-products--list .jbl-card__price .amount{font-size:15px!important}.jbl .jbl-products--list .jbl-card__desc{font-size:13px;-webkit-line-clamp:2}.jbl .jbl-pagination ul.page-numbers{gap:6px}.jbl .jbl-pagination a.page-numbers,.jbl .jbl-pagination span.page-numbers{min-width:30px;width:30px;height:30px!important;font-size:17px!important}/* v5 (owner 29-10 on v4): on a phone the pagination always stays on one line,with fewer items - the first and the last page,the current one and its two neighbours. The server's numbers (end 3 / mid 3) and dots stay in the markup; the rest hide, and a gap is drawn as dots beside the neighbour. Needs :has() (no markup change). */ .jbl .jbl-pagination ul.page-numbers{flex-wrap:nowrap} .jbl .jbl-pagination li:has(> .page-numbers:not(.prev):not(.next)):not(li:has(> .prev) + li):not(:has(+ li > .next)):not(:has(> .current)):not(:has(+ li > .current)):not(li:has(> .current) + li){display:none} .jbl .jbl-pagination ul.page-numbers li{display:flex;align-items:center;gap:6px} /* the arrows' li sat 2 px low on the line strut */ .jbl .jbl-pagination li:has(> .prev) + li + li ~ li:has(+ li > .current)::before,.jbl .jbl-pagination li:has(> .current) + li:has(+ li ~ li + li > .next)::after{content:'\2026';min-width:24px;text-align:center;opacity:.6;color:var(--jbl-num);font-family:'Bayon',Helvetica,Arial,sans-serif;font-size:17px;line-height:1;}}@media (max-width:360px){.jbl .jbl-pagination ul.page-numbers,.jbl .jbl-pagination ul.page-numbers li{gap:4px}.jbl .jbl-pagination a.page-numbers,.jbl .jbl-pagination span.page-numbers{min-width:26px;width:26px;height:26px!important;font-size:15px!important}.jbl .jbl-pagination li:has(> .prev) + li + li ~ li:has(+ li > .current)::before,.jbl .jbl-pagination li:has(> .current) + li:has(+ li ~ li + li > .next)::after{min-width:14px;font-size:15px}}