/** * TJL Shop Layout. * * The card here is deliberately the same one the home page's category filter * uses (`#tjl-cat-products` in tjl-homepage-catfilter): square 1:1 crop, 20px * radius, a #f7f4fa ground behind the cut-out, 15px type. One card shape * across the site beats three near-misses. * * Scoped to the two listing documents — `.elementor-1700` (Shop) and * `.elementor-2527` (category archives) — because the header mega-menu also * renders a `tp-product-listout` and must not be caught. */ /* ---- Neutralise isotope ------------------------------------------------- * The widget absolutely-positions its items from widths that do not exist * once the grid below takes over, which collapses the listing to one stacked * column. Author !important beats isotope's inline styles, so the layout * survives its relayout on resize and after each AJAX filter swap. */ .elementor-1700 .elementor-widget-tp-product-listout .post-inner-loop, .elementor-2527 .elementor-widget-tp-product-listout .post-inner-loop { height: auto !important; } .elementor-1700 .elementor-widget-tp-product-listout .post-inner-loop .grid-item, .elementor-2527 .elementor-widget-tp-product-listout .post-inner-loop .grid-item { position: static !important; left: auto !important; top: auto !important; transform: none !important; width: auto !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; } /* ---- Desktop: four across ---- */ .elementor-1700 .elementor-widget-tp-product-listout .post-inner-loop, .elementor-2527 .elementor-widget-tp-product-listout .post-inner-loop { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 24px; margin: 0 !important; } /* ---- The square crop ---- * Two markup shapes reach this box -- the server render nests .hover-image, * the AJAX response nests .product-featured-image > .thumb-wrap -- so the box * is targeted, never the path through it. */ .elementor-1700 .elementor-widget-tp-product-listout .product-content-image, .elementor-2527 .elementor-widget-tp-product-listout .product-content-image { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 20px; background: #f7f4fa; } .elementor-1700 .elementor-widget-tp-product-listout .product-content-image > a.product-image, .elementor-1700 .elementor-widget-tp-product-listout .product-content-image .product-featured-image, .elementor-1700 .elementor-widget-tp-product-listout .product-content-image .thumb-wrap, .elementor-1700 .elementor-widget-tp-product-listout .product-content-image span.product-image, .elementor-2527 .elementor-widget-tp-product-listout .product-content-image > a.product-image, .elementor-2527 .elementor-widget-tp-product-listout .product-content-image .product-featured-image, .elementor-2527 .elementor-widget-tp-product-listout .product-content-image .thumb-wrap, .elementor-2527 .elementor-widget-tp-product-listout .product-content-image span.product-image { display: block; width: 100%; height: 100%; } .elementor-1700 .elementor-widget-tp-product-listout .product-content-image img, .elementor-2527 .elementor-widget-tp-product-listout .product-content-image img { width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; display: block; } /* ---- Typography sized for a 4-up card ---- */ .elementor-1700 .elementor-widget-tp-product-listout .product-list-content, .elementor-2527 .elementor-widget-tp-product-listout .product-list-content { padding-top: 14px; } .elementor-1700 .elementor-widget-tp-product-listout .post-title, .elementor-1700 .elementor-widget-tp-product-listout .post-title a, .elementor-2527 .elementor-widget-tp-product-listout .post-title, .elementor-2527 .elementor-widget-tp-product-listout .post-title a { font-size: 15px !important; line-height: 1.35 !important; display: block; } .elementor-1700 .elementor-widget-tp-product-listout .price, .elementor-1700 .elementor-widget-tp-product-listout .price .woocommerce-Price-amount, .elementor-1700 .elementor-widget-tp-product-listout .product-list-content .price bdi, .elementor-2527 .elementor-widget-tp-product-listout .price, .elementor-2527 .elementor-widget-tp-product-listout .price .woocommerce-Price-amount, .elementor-2527 .elementor-widget-tp-product-listout .product-list-content .price bdi { font-size: 15px !important; line-height: 1.3 !important; } /* ---- Tablet: three across ---- */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-1700 .elementor-widget-tp-product-listout .post-inner-loop, .elementor-2527 .elementor-widget-tp-product-listout .post-inner-loop { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 18px; } } /* ---- Phone: two across ---- * A catalogue, unlike the home page's teaser row, is something people scan * downwards. Two real columns beat one sideways-scrolling strip here. */ @media (max-width: 767px) { .elementor-1700 .elementor-widget-tp-product-listout .post-inner-loop, .elementor-2527 .elementor-widget-tp-product-listout .post-inner-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } .elementor-1700 .elementor-widget-tp-product-listout .product-content-image, .elementor-2527 .elementor-widget-tp-product-listout .product-content-image { border-radius: 14px; } .elementor-1700 .elementor-widget-tp-product-listout .product-list-content, .elementor-2527 .elementor-widget-tp-product-listout .product-list-content { padding-top: 10px; } .elementor-1700 .elementor-widget-tp-product-listout .post-title, .elementor-1700 .elementor-widget-tp-product-listout .post-title a, .elementor-2527 .elementor-widget-tp-product-listout .post-title, .elementor-2527 .elementor-widget-tp-product-listout .post-title a { font-size: 13.5px !important; } .elementor-1700 .elementor-widget-tp-product-listout .price, .elementor-1700 .elementor-widget-tp-product-listout .price .woocommerce-Price-amount, .elementor-1700 .elementor-widget-tp-product-listout .product-list-content .price bdi, .elementor-2527 .elementor-widget-tp-product-listout .price, .elementor-2527 .elementor-widget-tp-product-listout .price .woocommerce-Price-amount, .elementor-2527 .elementor-widget-tp-product-listout .product-list-content .price bdi { font-size: 13.5px !important; } } /* ========================================================================= * SHOP FILTERS — rewritten 2026-10-10 (pass 2) * * The panel lives in ONE place: the Filters drawer, used at every width. * (Two copies of a checkbox group cancel each other out — The Plus merges * every `.tp-search-form` on the page into one map keyed by taxonomy name, * so the last group wins and the shopper's tick is thrown away. See * docs/shop-page/scripts/shop-drawer-only.php.) * * Everything with an Elementor control is set in the widget's Content and * Style tabs by docs/shop-page/scripts/filters-ux.php. What is left here is * only what no control reaches — and the sheet chrome, which the widget has * no concept of at all (assets/shop-filters.js builds it). * * Field order is category · price · heritage · weight, set in the repeater, * not here. * ====================================================================== */ /* ------------------------------------------------------------------------- * 1. THE SHEET * * The off-canvas script lifts `.plus-canvas-content-wrap` out to , so * document-scoped selectors never reach it; the widget classes travel with * the widget and do. * * The wrap was the scroller, which is why the plugin's close button had to be * sticky and still landed on top of the first group's heading. It becomes a * three-row flex column instead — header, scroller, action bar — so the two * bars are ordinary flex items that cannot drift over the content. * ---------------------------------------------------------------------- */ .plus-canvas-content-wrap.tjl-ff-ready { display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 0 60px rgba( 28, 10, 45, 0.26 ); } .plus-canvas-content-wrap.tjl-ff-ready > .plus-content-editor { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 22px 24px; } /* The sheet header carries a close of its own. The plugin's stays in the DOM and stays the only thing that closes the drawer — shop-filters.js clicks it, so the handler The Plus delegated on is still the single path. */ .plus-canvas-content-wrap.tjl-ff-ready > .plus-offcanvas-header { display: none; } /* A sheet over an undimmed page reads as part of the page. `:has` keeps the scrim to THIS drawer — the mobile header uses the same off-canvas widget and must not pick it up. The container is `z-index: 99 / position: relative`, i.e. its own stacking context, so the scrim cannot rise above the sheet (z-index 100) however high its own z-index goes. */ body:has( .plus-canvas-content-wrap.tjl-ff-ready.plus-visible ) > .plus-offcanvas-container::after { content: ""; position: fixed; inset: 0; z-index: 9999; background: rgba( 28, 10, 45, 0.44 ); pointer-events: none; } /* ---- the sheet header --------------------------------------------------- */ .plus-canvas-content-wrap .tjl-ff-head { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 13px 14px 13px 22px; background: #FFFFFF; border-bottom: 1px solid #EFE7F7; } .plus-canvas-content-wrap .tjl-ff-title { font-family: "Jost", system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: #3A1259; line-height: 1; } .plus-canvas-content-wrap .tjl-ff-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #8441C0; color: #FFFFFF; font-family: "Jost", system-ui, sans-serif; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; } /* ---- the action bar ----------------------------------------------------- */ .plus-canvas-content-wrap .tjl-ff-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 13px 22px; padding-bottom: calc( 13px + env( safe-area-inset-bottom, 0px ) ); background: #FFFFFF; border-top: 1px solid #EFE7F7; box-shadow: 0 -14px 26px -20px rgba( 58, 18, 89, 0.7 ); } /* ⚠️ The widget's own Apply button is hidden, not moved. * * Its click handler is `$(this).change()`, and the listener that actually * filters is bound to the
itself (`$(form).change(…)` in * plus-search-filter.js). The event reaches it only by bubbling, so a button * lifted out of the form fires into nothing. Both bars carry a copy that * clicks the real one where it stands. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-ajaxbtn-filter { display: none; } /* The footer has a Clear all; the chip strip inside the drawer would be a second one three rows above it. The toolbar copy is untouched. */ .plus-canvas-content-wrap .tjl-shopreset .tp-tag-reset-contener { display: none; } /* ---- the buttons -------------------------------------------------------- * ⚠️ Every selector in this group is prefixed with the wrap on purpose. * `.elementor-kit-27 button` is (0,1,1) and lands after this file, so a bare * `.tjl-ff-btn` at (0,1,0) lost outright: the kit painted all four controls * black, square and 15/30. The wrap takes them to (0,2,0). */ .plus-canvas-content-wrap .tjl-ff-btn { -webkit-appearance: none; appearance: none; font-family: "Jost", system-ui, sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: 0.3px; line-height: 1; border: 0; border-radius: 999px; background-image: none; padding: 14px 22px; cursor: pointer; white-space: nowrap; transition: background-color .15s linear, box-shadow .15s linear, color .15s linear, opacity .15s linear; } .plus-canvas-content-wrap .tjl-ff-btn--apply { background: #8441C0; color: #FFFFFF; box-shadow: 0 8px 18px -10px rgba( 132, 65, 192, 0.95 ); } .plus-canvas-content-wrap .tjl-ff-btn--ghost { background: #FFFFFF; color: #6B6675; border: 1px solid #E2D6F0; padding: 13px 20px; } .plus-canvas-content-wrap .tjl-ff-btn--block { flex: 1 1 auto; } .plus-canvas-content-wrap .tjl-ff-head .tjl-ff-btn { margin-left: auto; padding: 10px 18px; font-size: 12.5px; } /* A control that cannot do anything yet says why, rather than vanishing and taking the shopper's sense of where things are with it. */ .plus-canvas-content-wrap .tjl-ff-btn[aria-disabled="true"] { opacity: 0.42; cursor: not-allowed; box-shadow: none; } .plus-canvas-content-wrap .tjl-ff-btn:active { transform: translateY( 1px ); } .plus-canvas-content-wrap .tjl-ff-x { -webkit-appearance: none; appearance: none; background-image: none; padding: 0; flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #EFE7F7; background: #FFFFFF; color: #3A1259; cursor: pointer; transition: background-color .15s linear, border-color .15s linear; } .plus-canvas-content-wrap .tjl-ff-x svg { width: 13px; height: 13px; } @media ( hover: hover ) and ( pointer: fine ) { .plus-canvas-content-wrap .tjl-ff-btn--apply:hover { background: #3A1259; box-shadow: 0 10px 22px -10px rgba( 58, 18, 89, 0.9 ); } .plus-canvas-content-wrap .tjl-ff-btn--ghost:hover { color: #3A1259; border-color: #C9A9E8; background: #FBF8FE; } .plus-canvas-content-wrap .tjl-ff-btn[aria-disabled="true"]:hover { background: #FFFFFF; color: #6B6675; border-color: #E2D6F0; } .plus-canvas-content-wrap .tjl-ff-x:hover { background: #F7F2FC; border-color: #D5C7E8; } } .plus-canvas-content-wrap .tjl-ff-btn:focus-visible, .plus-canvas-content-wrap .tjl-ff-x:focus-visible { outline: 2px solid #8441C0; outline-offset: 2px; } /* ------------------------------------------------------------------------- * 2. THE PANEL * * Four groups, one hairline between each, and nothing else drawing lines. * Every rule here carries the long prefix explained immediately below. * ---------------------------------------------------------------------- */ /* ⚠️ SPECIFICITY — read this before adding a rule below. * * Elementor emits the widget's Style-tab values as * .elementor-5592 .elementor-element.elementor-element-9db2308 * .tp-search-filter .field-col .tp-range-silder * The element class is DOUBLED, so that compound counts TWICE and the * selector is six classes, not five — and Elementor's post CSS loads after * this file, so matching its count only ties, and a tie goes to whoever is * later. The count is not even constant: for a target inside a `.field-col` * Elementor adds that as well, making it seven. * * Every panel rule is therefore written at EIGHT: * .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter * .elementor-widget-container .tp-search-filter .tp-search-form X * All of those are always on the path, and `.tjl-shopfilter` is repeated * deliberately — the same move Elementor itself makes with * `.elementor-element`, and the reason this file needs no `!important` to * beat it. Drop any one of them and the rule stops applying, silently. * ---------------------------------------------------------------------- */ /* ⚠️ A block headed "TJL storefront filter polish (managed)" sits in * Customizer Additional CSS from an earlier pass and still styles EVERY * `.tp-search-filter` on the site — its own purple (#6b3aa0), its own card, * its own dividers, its own type stack. Every statement it makes about the * panel is overridden below at six classes; what is left is the card it * draws around the widget itself, undone here. * * It is left in place rather than deleted because it also carries the * toolbar's Sort control and the results line, which are not this pass. * ---------------------------------------------------------------------- */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; font-family: inherit; font-size: inherit; line-height: inherit; } /* ---- 2a. order ---------------------------------------------------------- * Most-useful-first for someone shopping jewellery: what the piece IS, then * what it costs, then the collection, then the specialist's filter. The * repeater's own order is price · weight · category · heritage, which put a * nine-row list below two sliders and off the bottom of a phone. Ordering a * flex column costs nothing and survives a repeater edit. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-row { display: flex; flex-direction: column; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlcat1 { order: 1; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlpri1 { order: 2; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlher1 { order: 3; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlwgt1 { order: 4; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-ajaxbtn-filter { order: 5; } /* ---- 2b. one group, one rule ------------------------------------------- * The widget drew a hairline under every group TITLE and this file drew a * second one between every group — two lines per boundary, 11px apart. The * title's goes; the boundary's stays. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .field-col { padding: 16px 0; border-top: 0; border-bottom: 1px solid #F1EAF8; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlcat1 { padding-top: 2px; } /* Visually last — `:last-child` is the Apply wrapper and `:last-of-type` counts
, and neither follows the `order` above anyway. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlwgt1 { border-bottom: 0; padding-bottom: 2px; } /* ---- 2c. the group heading --------------------------------------------- * `TitleSvgIconTypo` writes to `.tp-title-icon i`, and Elementor renders the * icon as an inline ``. Both the size and the * colour control for this icon are therefore inert, and the tile around it * has no control at all. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-field-title { display: flex; align-items: center; border: 0; padding: 0; margin: 0 0 11px; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-field-title .tp-title-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 9px; padding-right: 0; border-radius: 7px; background: #F3EBFB; line-height: 0; flex-shrink: 0; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-field-title .tp-title-icon svg { width: 11px; height: 11px; fill: #8441C0; } /* The two replacement heading marks are strokes, not filled glyphs. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-field-title .tp-title-icon svg.tjl-ff-titlemark { width: 12px; height: 12px; fill: none; stroke: #8441C0; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-field-title .tp-title-text { flex: 1 1 auto; font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: #6B6675; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-field-title .tp-title-toggle { float: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 11px; color: #C0B6CE; flex-shrink: 0; transition: color .15s linear, background-color .15s linear; } @media ( hover: hover ) and ( pointer: fine ) { .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-field-title:hover .tp-title-toggle { color: #8441C0; background: #F7F2FC; } } /* ---- 2d. the category group is a list of CHILDREN ---------------------- * The widget fetches `parent => 0` terms and nests the children, so a * product_cat group is always headed by "Gold" holding all 255. Excluding it * is not possible — the exclude list drops a parent together with its * children. The parent row comes off here. * * `display` is written INLINE by the group toggle, so it has to be beaten * with `!important` — the same trap this file already documents for isotope. * The 25px indent is the plugin's and the left rule is the theme's generic * `div` border; neither says anything once the parent they hung under is * off screen. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlcat1 .tp-checkBox > .tp-group { display: none; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlcat1 .tp-child-taxo { padding-left: 0; border-left: 0; } /* ------------------------------------------------------------------------- * 3. THE ROWS — a two-column grid of tiles * * Nine categories and five collections as full-width rows ran to roughly * 620px of sheet, so the second group was never on screen with the first. * Two columns halve that, and a tile has room for a mark of its own. * * ⚠️ TWO DIFFERENT SHAPES arrive here and they used to look it — the count * sat beside the label in one and at the far right in the other: * * heritage .tp-checkBox.style-2 > .tp-group * > .tp-group-one > input + label > .tp-check-icon * + .tp-field-content > .tp-field-label * > .tp-group-two > .tp-field-Counter (absolute, right: 0) * * category .tp-child-checkbox * > input + label > .tp-check-icon * + .tp-field-content > .tp-field-label * + .tp-field-Counter * * `.tp-group-two` is absolutely positioned, so the heritage count cannot be * laid out in the tile with the rest. It is dropped and shop-filters.js * copies its number into the label instead, which makes the two shapes one. * ---------------------------------------------------------------------- */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlcat1 .tp-child-taxo, .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlher1 .tp-wp-checkBox { display: grid !important; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 8px; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-child-checkbox, .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-checkBox { margin: 0; min-width: 0; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-checkBox > .tp-group, .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-checkBox > .tp-group > .tp-group-one { display: block; width: 100%; position: static; } /* ...except the category group's parent row ("Gold", all 255), which 2d hides. That rule is the same specificity as the one above and comes first, so the hide has to be restated here or the parent reappears — bringing its own +/- toggle out into the grid with it. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlcat1 .tp-checkBox > .tp-group { display: none; } /* The heritage count is absolutely positioned outside the label, so it cannot sit in the tile's flow. shop-filters.js re-prints it inside. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlher1 .tp-group-two { display: none; } /* `CkBMar` (0 0 22) and `CkBPad` (8 0 0) are Style-tab values on the group's own wrapper, and the group already sits inside a `.field-col` with its own 16px rhythm — the two stacked into a 38px void under every list. The old Additional CSS block also left `.tp-child-taxo` a 7px left margin, which pushed the category grid out of line with the heritage one. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-wp-checkBox { margin: 0; padding: 0; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-child-taxo { margin: 0; } /* ---- 3a. the tile ------------------------------------------------------ */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-child-checkbox > label, .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-group-one > label { display: grid; grid-template-columns: 16px minmax( 0, 1fr ); align-items: center; gap: 8px; width: 100%; min-height: 44px; height: 100%; margin: 0; padding: 8px 10px; border: 1px solid #EAE0F5; border-radius: 12px; background: #FFFFFF; cursor: pointer; transition: background-color .14s linear, border-color .14s linear, box-shadow .14s linear; -webkit-tap-highlight-color: transparent; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-field-content { display: flex; align-items: center; flex-wrap: nowrap; gap: 5px; width: auto; min-width: 0; justify-content: flex-start; } /* ⚠️ THREE separate plugin rules stop a term name wrapping, and undoing one is not enough: `display: inline-flex` makes the text one flex line, and `white-space: nowrap; overflow: hidden; text-overflow: ellipsis` clips what is left. In a 150px tile that produced "Personalized…" and "Mangalsutra …". All four properties are returned to their defaults. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-field-label { display: block; flex: 1 1 auto; font-size: 12.5px; line-height: 1.25; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; } /* The count is a footnote on the label, not a badge of its own: a pill in a 150px tile is most of the tile. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-field-Counter { background: none !important; padding: 0 !important; border-radius: 0 !important; font-size: 10.5px !important; font-weight: 500 !important; color: #A99EB8 !important; flex: 0 0 auto; transition: color .14s linear; } /* ---- 3b. the mark, and the tick that replaces it ----------------------- * `.tjl-ff-ico` (injected per term by shop-filters.js) and the widget's own * `.tp-check-icon` share ONE grid cell and cross-fade. A tile that is chosen * therefore says so twice over — the whole tile inverts AND the mark becomes * a tick — which is about as unambiguous as a control gets, and it costs no * width at all. * * `.tp-check-icon` is a box with a border and a background from the Style * tab at (0,3,0); stripping it needs the wrap's fourth class, which the * selectors below have. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-check-icon, .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tjl-ff-ico { grid-row: 1; grid-column: 1; width: 16px; height: 16px; margin: 0; border: 0; border-radius: 0; background: none; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity .13s linear; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tjl-ff-ico { color: #8441C0; opacity: 1; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tjl-ff-ico svg { width: 16px; height: 16px; display: block; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-check-icon { opacity: 0; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-check-icon svg { width: 13px; height: 13px; color: #FFFFFF; visibility: visible; } /* ---- 3c. the CHOSEN state ---------------------------------------------- * Before this, choosing a row turned a 19px box purple and changed nothing * else, so on a nine-row list a tick was easy to miss. A chosen tile now * inverts outright. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form input[type="checkbox"]:checked + label { background: #8441C0; border-color: #8441C0; box-shadow: 0 6px 14px -8px rgba( 132, 65, 192, 0.9 ); } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form input[type="checkbox"]:checked + label .tp-field-label { color: #FFFFFF !important; font-weight: 500; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form input[type="checkbox"]:checked + label .tp-field-Counter { color: rgba( 255, 255, 255, 0.72 ) !important; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form input[type="checkbox"]:checked + label .tjl-ff-ico { opacity: 0; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form input[type="checkbox"]:checked + label .tp-check-icon { opacity: 1; } /* ---- 3d. hover is for POINTERS ONLY ------------------------------------ * ⚠️ This is the bug the pass was opened for. A tap leaves `:hover` stuck on * whatever it landed on — and the layout shifts under the finger when a chip * appears — so on a phone the panel filled with purple-tinted rows nobody * had chosen, and the one row that WAS chosen looked no different. A hover * state belongs to a device that can hover. */ @media ( hover: hover ) and ( pointer: fine ) { .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form input[type="checkbox"] + label:hover { border-color: #C9A9E8; background: #FBF8FE; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form input[type="checkbox"]:checked + label:hover { background: #6E2FAA; border-color: #6E2FAA; } } /* A press, unlike a hover, ends when the finger lifts. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form input[type="checkbox"] + label:active { transform: scale( 0.985 ); } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form input[type="checkbox"]:focus-visible + label { outline: 2px solid #3A1259; outline-offset: 2px; } /* ---- 3e. tile order ---------------------------------------------------- * `get_categories( orderby => parent )` with every child under one parent * returns them in table order — descending term id, which put Mangalsutra * (2 products) first and Necklace set (97) seventh. There is no ordering * control for children, so the tiles are ordered here by how much of the * catalogue each one holds. Term ids are stable; a new category simply * lands at the end of the grid. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlcat1 .tp-child-checkbox:has( input[value="149"] ) { order: 1; } /* Necklace set 97 */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlcat1 .tp-child-checkbox:has( input[value="148"] ) { order: 2; } /* Bangles 38 */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlcat1 .tp-child-checkbox:has( input[value="152"] ) { order: 3; } /* Earings 34 */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlcat1 .tp-child-checkbox:has( input[value="153"] ) { order: 4; } /* Rings 23 */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlcat1 .tp-child-checkbox:has( input[value="147"] ) { order: 5; } /* Bracelet 19 */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlcat1 .tp-child-checkbox:has( input[value="151"] ) { order: 6; } /* Pendant Set 18 */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlcat1 .tp-child-checkbox:has( input[value="191"] ) { order: 7; } /* Personalised 10 */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlcat1 .tp-child-checkbox:has( input[value="150"] ) { order: 8; } /* Chain 6 */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlcat1 .tp-child-checkbox:has( input[value="154"] ) { order: 9; } /* Mangalsutra 2 */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlher1 .tp-checkBox:has( input[value="215"] ) { order: 1; } /* Turkish 77 */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlher1 .tp-checkBox:has( input[value="216"] ) { order: 2; } /* Arabic 29 */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlher1 .tp-checkBox:has( input[value="217"] ) { order: 3; } /* Malaysian 13 */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlher1 .tp-checkBox:has( input[value="218"] ) { order: 4; } /* Kuwaiti 3 */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlher1 .tp-checkBox:has( input[value="219"] ) { order: 5; } /* Dubai 0 */ /* ---- 3f. subcategory scoping (shop-filters.js scopeCats) --------------- * Tiles outside the current branch of the category tree. `!important` * because the widget's group toggle writes `display` inline on the * container and the tiles inherit its flow; hiding the tile itself is the * one thing that holds whichever way the group is folded. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlcat1 .tp-child-checkbox.tjl-ff-off { display: none !important; } /* Touch screens latch `:hover` after a tap, and the legacy Additional CSS * block paints `.tp-search-filter .tp-child-checkbox:hover` lavender — so a * tapped tile kept a lavender box round it until the next tap elsewhere. * Real pointers keep the effect; a finger does not get it. */ @media not all and ( hover: hover ) { .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-child-checkbox:hover, .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-group:hover { background: transparent; } } /* The plugin indents each tree level by 12px more (`tp-childsequence-3` is * `4px 4px 4px 18px`). On a scoped page the subcategories ARE the list, so * they take the same tile as every other row. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .elementor-repeater-item-tjlcat1.tjl-ff-branch .tp-child-checkbox { padding: 4px 4px 4px 6px; } /* The two purity buckets are EXCLUDED from the category group (209,211) because both grids drop the seven 995/999 coins via Exclude Products, which left one option returning nothing and the other returning everything. See docs/shop-page/scripts/drop-dead-purity.php. */ /* ------------------------------------------------------------------------- * 4. THE SLIDERS * * ⚠️ The floating noUi tooltips are gone and shop-filters.js draws a static * pill at each end of the track instead. A tooltip lives inside * `.noUi-origin`, which noUi MOVES with a transform, so no stylesheet can * pull it back inside a 340px sheet: at the top of the price scale * "1750000" hung off the right edge of the drawer, unreadable. The pills * also get ₹ and Indian digit grouping, which the widget cannot do. * * `RangePadding` (26/4/10/4) and `RangeMar` (0 0 22) are Style-tab values at * (0,3,0); the void under each slider was theirs. Overridden here rather * than in the widget so the panel reads the same whether or not anyone has * been in the editor since. * ---------------------------------------------------------------------- */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-range-silder { position: relative; margin: 0; padding: 0; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .noUi-tooltip { display: none !important; } .plus-canvas-content-wrap .tjl-ff-vals { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 13px; } .plus-canvas-content-wrap .tjl-ff-val { font-family: "Jost", system-ui, sans-serif; font-size: 12px; font-weight: 500; line-height: 1; color: #3A1259; background: #F7F2FC; border: 1px solid #E7DCF2; border-radius: 8px; padding: 6px 10px; white-space: nowrap; } /* `.tp-range { width: 85% }` plus a 15px left pad on the wrapper left the track short and off-centre. The 10px inset is the handle's overhang. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-range { width: calc( 100% - 20px ); margin: 0 10px 6px; height: 6px; } /* ⚠️ The track and the filled part are owned HERE, not by the widget. * There are two copies of this panel — 5592 (shop) and 2286 (category) — * and their Style tabs have drifted: the category copy painted the filled * part white on a beige track left over from the old Additional CSS block, * so on a category page the slider was two handles and nothing between * them. One rule, both drawers. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-range { background: #EFE7F7; border-radius: 999px; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-range .noUi-connect { background: linear-gradient( 90deg, #8441C0 0%, #5E2B92 100% ); } /* A solid purple lozenge on a purple track gave no edge to grab. White with a purple ring reads as a control. `RangeBtnLineNCr` is the only handle colour the widget exposes and it is still the plugin's purple, so the white has to be asserted at (0,4,0) here. */ .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-range-silder .noUi-handle { width: 20px; height: 20px; top: -7px; right: -10px; background: #FFFFFF; border: 2.5px solid #8441C0; border-radius: 50%; box-shadow: 0 2px 8px rgba( 58, 18, 89, 0.28 ); cursor: grab; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-range-silder .noUi-handle:active { cursor: grabbing; box-shadow: 0 0 0 6px rgba( 132, 65, 192, 0.16 ), 0 2px 8px rgba( 58, 18, 89, 0.28 ); } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-range-silder .noUi-handle:focus-visible { outline: 2px solid #3A1259; outline-offset: 3px; } .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-range-silder .noUi-handle::before, .plus-canvas-content-wrap.tjl-ff-ready .tjl-shopfilter.tjl-shopfilter .elementor-widget-container .tp-search-filter .tp-search-form .tp-range-silder .noUi-handle::after { display: none; } /* ------------------------------------------------------------------------- * 5. THE DRAWER'S OWN WIDGETS (shop only — 2286 carries the panel alone) * ---------------------------------------------------------------------- */ .plus-canvas-content-wrap .tjl-shopfilter, .plus-canvas-content-wrap .tjl-shopmeta { max-width: 100%; } /* The results line inside the drawer is a caption for the panel, not a toolbar item — it reads as one once it is small and ruled off. */ .plus-canvas-content-wrap .tjl-shopmeta .tp-total-results-wrap .tp-total-results-txt { font-size: 12.5px; letter-spacing: 0.2px; color: #8A8199; } /* The chip strip and the results line are a two-line caption, not two sections: one hairline under the pair, no rule between them, and no rule above the first group — the group's own heading starts it. */ .plus-canvas-content-wrap .tjl-shopmeta { padding-bottom: 9px; margin-bottom: 0; border-bottom: 1px solid #EFE7F7; } .plus-canvas-content-wrap .tjl-shopreset, .plus-canvas-content-wrap .tjl-shopreset .tp-search-filter, .plus-canvas-content-wrap .tjl-shopmeta .tp-search-filter { border: 0; padding: 0; margin: 0; } /* The applied-filter chips are the third control in the sheet saying the same thing — the header badge counts them and the footer clears them — and inside a drawer they were mostly a hairline. The toolbar copy behind the sheet, where there is no badge, is untouched. */ .plus-canvas-content-wrap .tjl-shopreset { display: none; } /* The container's own 18px row gap stacks on top of these margins. */ .plus-canvas-content-wrap .plus-content-editor .elementor-element.e-con-full, .plus-canvas-content-wrap .plus-content-editor > .elementor > .e-con { gap: 10px; } /* ---- applied filters + reset ------------------------------------------- */ .tjl-shopmeta .tp-search-filter .tp-filter-meta:empty, .tjl-shopreset .tp-search-filter .tp-filter-tag-wrap:empty { display: none; } .tjl-shopreset .tp-search-filter .tp-filter-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .tjl-shopreset .tp-search-filter .tp-filter-tag-wrap, .tjl-shopreset .tp-search-filter .tp-filter-removetag { top: auto; transform: none; } /* ------------------------------------------------------------------------- * 6. THE TOOLBAR: Filters · count · Sort * * A legacy two-column section. Its children are floated `width-auto` * widgets, which stack and touch; one flex row with a real gap is what the * row actually is. * ---------------------------------------------------------------------- */ .elementor-1700 .elementor-element-5c1abc36 > .elementor-widget-wrap, .elementor-2527 .elementor-element-94f668e { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; } .elementor-1700 .elementor-element-5c1abc36 > .elementor-widget-wrap > .elementor-element, .elementor-2527 .elementor-element-94f668e > .elementor-element { margin: 0; float: none; } .elementor-1700 .elementor-element-6833b57 > .elementor-widget-wrap, .elementor-2527 .elementor-element-aebd957 { display: flex; justify-content: flex-end; align-items: center; } /* The Filters pill: Elementor has no hover-background control on this widget, only hover text and border. */ .tjl-shop-filter-btn .offcanvas-toggle-btn, #tjl-shop-filter-btn .offcanvas-toggle-btn { transition: background-color .15s linear, box-shadow .15s linear, transform .15s linear; box-shadow: 0 6px 16px -8px rgba( 90, 46, 134, 0.65 ); } .tjl-shop-filter-btn .offcanvas-toggle-btn:hover, #tjl-shop-filter-btn .offcanvas-toggle-btn:hover { background-color: #3A1259 !important; box-shadow: 0 10px 22px -10px rgba( 58, 18, 89, 0.75 ); } .tjl-shop-filter-btn .offcanvas-toggle-btn .btn-icon svg, #tjl-shop-filter-btn .offcanvas-toggle-btn .btn-icon svg { width: 15px; height: 15px; fill: currentColor; } /* On a phone the toolbar is ONE line: Filters left, Sort right. * * Both halves are Elementor's own 50% columns (Shop) / flex containers * (category archives), and both go `width: 100%` under 768 -- so Sort was * dropped onto its own line, 210px wide because the widget's own width * control says so, and 64px tall against a 48px Filters pill. It read as a * form field under a button rather than as the second of two controls. * * Left half shrinks (the results line, and the applied-filter chips, wrap * inside it); the right half is shrink-to-fit so Sort hugs the right edge. * `align-items: flex-start` is what keeps Sort LEVEL WITH THE PILL -- the * left half is two lines tall, so centring would float Sort between them. */ @media ( max-width: 767px ) { .elementor-1700 .elementor-element-e702546 > .elementor-container, .elementor-2527 .elementor-element.elementor-element-6ce9ce2 { flex-wrap: nowrap; align-items: flex-start; gap: 12px; } .elementor-1700 .elementor-element.elementor-element-5c1abc36, .elementor-2527 .elementor-element.elementor-element-94f668e { --width: auto; width: auto; flex: 1 1 auto; min-width: 0; } .elementor-1700 .elementor-element.elementor-element-6833b57, .elementor-2527 .elementor-element.elementor-element-aebd957 { --width: auto; width: auto; flex: 0 0 auto; } /* The pill is a fixed thing; it must not be what gives way when the row is tight -- a shrunk pill wraps "Filters" under its own icon. */ .tjl-shop-filter-btn, #tjl-shop-filter-btn { flex: 0 0 auto; } .tjl-shop-filter-btn .offcanvas-toggle-btn, #tjl-shop-filter-btn .offcanvas-toggle-btn { white-space: nowrap; } /* Sort, sized to the pill and to its own label. * * ⚠️ SPECIFICITY: the widget writes `width: 210px` and `padding: 11px * 18px` through Elementor post CSS at SEVEN classes * (`.elementor-1700 .elementor-element.elementor-element-4b21d6c * .tp-search-filter .tp-search-form .field-col .tp-select`), and that * sheet loads after this one. The class is doubled here to clear it * without `!important`. The height is spent in the inner dropdown * instead: a 20px line box + 13px top and bottom + the 1px border = the * pill's own 48px. */ .tjl-shopsort.tjl-shopsort.elementor-element .tp-search-filter .tp-search-form .field-col .tp-select { width: auto; min-width: 0; max-width: 100%; padding: 0; } .tjl-shopsort.tjl-shopsort.elementor-element .tp-search-filter .tp-select .tp-select-dropdown { padding: 13px 14px; gap: 8px; white-space: nowrap; } /* The control is now narrower than its own longest option ("Low To High Price"), and the menu inherits the control's width -- so it is let out to its content and anchored to the right edge, where there is room. */ .tjl-shopsort.tjl-shopsort.elementor-element .tp-search-filter .tp-sbar-dropdown-menu { min-width: 100%; width: max-content; left: auto; right: 0; } /* A 390px phone leaves the sheet ~340px. Buying back 4px a side keeps the nine category rows off their own right edge. */ .plus-canvas-content-wrap.tjl-ff-ready > .plus-content-editor { padding-left: 18px; padding-right: 18px; } .plus-canvas-content-wrap .tjl-ff-head { padding-left: 18px; } .plus-canvas-content-wrap .tjl-ff-foot { padding-left: 18px; padding-right: 18px; } } .tjl-shopsort .tp-search-filter .tp-select { width: auto; min-width: 190px; } .tjl-shopsort .tp-search-filter .tp-select-dropdown { gap: 10px; } /* ========================================================================= * THE THREE SECTIONS BELOW THE GRID — added 2026-10-10 * trust strip · content block · FAQs * ====================================================================== */ /* ---- the trust strip ---------------------------------------------------- * The six cards are clones of the home page's commitment grid, so they need * the same gold ring. That rule lives in Additional CSS keyed to * `#tjl-commitment-grid`, and an id can only be in one place — so it is * restated here against this strip's own id. Keep the two in step. */ #tjl-shop-trust .elementor-icon { border-color: transparent; background-image: linear-gradient( #FFFFFF, #FFFFFF ), linear-gradient( 135deg, #F7DD9B 0%, #D9A62E 36%, #A9781A 56%, #E8BF55 76%, #F7DD9B 100% ); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 0 0 4px rgba( 217, 166, 46, 0.10 ), 0 6px 18px -6px rgba( 217, 166, 46, 0.55 ); transition: box-shadow .3s ease; } #tjl-shop-trust > .e-con-inner > .e-con:hover .elementor-icon, #tjl-shop-trust > .e-con:hover .elementor-icon { box-shadow: 0 0 0 6px rgba( 217, 166, 46, 0.17 ), 0 10px 26px -8px rgba( 217, 166, 46, 0.78 ); } /* One row that scrolls. The marquee drives this same scroller — it appends * duplicate sets and advances `scrollLeft`, so the row must really overflow * and must start at the left edge: a centred row that overflows hangs half * its excess off the left, where `scrollLeft` can never reach it. That trap * is documented in docs/bestsellers/HANDOVER_4.md §4 and cost that pass a * frozen strip. */ #tjl-shop-trust > .e-con-inner, #tjl-shop-trust { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: auto; } #tjl-shop-trust::-webkit-scrollbar, #tjl-shop-trust > .e-con-inner::-webkit-scrollbar { display: none; } #tjl-shop-trust > .e-con-inner > .e-con, #tjl-shop-trust > .e-con { flex: 0 0 196px; width: 196px; max-width: 196px; } /* The section is boxed; the strip is deliberately not, so cards run off both * edges and the loop has somewhere to come from and go to. */ #tjl-shop-trust-sec > .e-con-inner { max-width: none; width: 100%; } #tjl-shop-trust-sec .elementor-widget-heading { max-width: 760px; } @media ( max-width: 1024px ) { #tjl-shop-trust > .e-con-inner > .e-con, #tjl-shop-trust > .e-con { flex-basis: 176px; width: 176px; max-width: 176px; } } @media ( max-width: 767px ) { #tjl-shop-trust > .e-con-inner > .e-con, #tjl-shop-trust > .e-con { flex-basis: 150px; width: 150px; max-width: 150px; } /* `icon_padding` is not a responsive control — `icon_padding_mobile` is stored and ignored — so the desktop padding would ride down and burst a 150px card. Sizing the box explicitly also keeps it a circle: with padding alone the height comes from the line box and the ring renders as an oval. (Same reasoning as the home page's medallion.) */ #tjl-shop-trust .elementor-icon { width: 58px; height: 58px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } } /* ---- the content block -------------------------------------------------- */ .tjl-shop-copy-text p:last-child { margin-bottom: 0; } /* ---- the FAQs ----------------------------------------------------------- * The widget inherits the kit's `h3` (Prata 2em) for the question, and the * Style tab's typography lands on the header element rather than the tag * inside it — so the tag is matched here at the same shape Elementor uses. */ .tjl-shop-faq-acc .theplus-accordion-wrapper .plus-accordion-header, .tjl-shop-faq-acc .theplus-accordion-wrapper .plus-accordion-header h3, .tjl-shop-faq-acc .theplus-accordion-wrapper .plus-accordion-header .accordion-title { font-family: "Jost", system-ui, sans-serif; font-size: inherit; font-weight: 500; line-height: 1.45; margin: 0; color: inherit; } .tjl-shop-faq-acc .theplus-accordion-wrapper .plus-accordion-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; } .tjl-shop-faq-acc .theplus-accordion-wrapper .plus-accordion-content p:last-child { margin-bottom: 0; } /* ---- toolbar leftovers -------------------------------------------------- * Two hairlines survived the widget's border controls: the results wrap * carries one of its own, and the reset strip paints its box even while the * plugin's own `.hide` class is on it. */ .tjl-shopmeta .tp-search-filter .tp-total-results-wrap, .tjl-shopmeta .tp-search-filter .tp-filter-meta, .tjl-shopsort .tp-search-filter .tp-filter-meta { border: 0; } /* The widgets also carry a faint box-shadow of their own (`rgba(40,20,70,.03) * 0 1px 2px`) from the Style tab, which draws a card edge around the results * line and around the Sort widget. Invisible while each sat on its own full * width row; a stray half-width rectangle beside the Filters pill once the * toolbar became one line. The toolbar is a row of controls, not of cards. */ .tjl-shopmeta > .elementor-widget-container > .tp-search-filter, .tjl-shopsort > .elementor-widget-container > .tp-search-filter { box-shadow: none; } /* Sort's `.tp-filter-meta` is always empty -- the applied-filter chips render * in the two `.tjl-shopmeta` widgets -- but its 4px bottom margin escapes the * wrapper and pushes the control 4px below the Filters pill it now sits * beside. */ .tjl-shopsort .tp-search-filter .tp-filter-meta { margin: 0; } .tjl-shopreset .tp-search-filter .tp-filter-removetag.hide { display: none; } /* ========================================================================= * 7. THE CATEGORY ARCHIVE'S HERO TITLE ON A PHONE — added 2026-10-13 * ------------------------------------------------------------------------- * Every inner-page hero band got the product page's mobile treatment in the * same pass: eyebrow hidden, title 25px, band clear of the wave — all of it * written as ordinary Elementor mobile control values so the client can edit * them in the builder (`docs/page-heroes/HANDOVER_2.md`). * * ⚠️ This one title could not go that way. The category archive's title is a * The Plus `tp-post-title` whose typography is bound to a GLOBAL * (`globals/typography?id=7de0d5b`), so setting a size on the widget would * either be ignored or, worse, drag every heading on the site with it. The * size is set here instead, scoped to template 2527 and to phones only. * * Keep the 25px / 1.14 in step with TITLE_PX and TITLE_LH in * `docs/page-heroes/scripts/hero-mobile-trim.php`. * ====================================================================== */ /* ⚠️ SPECIFICITY: the global's own rule is * `.elementor-2527 .elementor-element.elementor-element-1479168 .tp-post-title a, * … .tp-post-title .tp-entry-title` → (0,5,0). * A sensible-looking `… .elementor-element-1479168 h1` is only (0,3,1) and * loses — it was written that way first and the title stayed 34px. Match the * widget's own selector shape and add the tag. */ @media ( max-width: 767px ) { .elementor-2527 .elementor-element.elementor-element-1479168 .tp-post-title h1.tp-entry-title, .elementor-2527 .elementor-element.elementor-element-1479168 .tp-post-title .tp-entry-title, .elementor-2527 .elementor-element.elementor-element-1479168 .elementor-heading-title { font-size: 25px; line-height: 1.14; } } /* ---- 3e. the native checkbox must not be IN the tile (fixed 2026-10-15) -- * * Reported as "filters text words and icons shouldn't overlap", and that is * exactly what it was: the count was painted on top of the term name. * * Measured, mobile, SHOP BY CATEGORY: * * .tp-child-taxo grid, 296px, columns 144px 144px <- correct * .tp-child-checkbox x=22 w=144 <- correct * > label x=62 w=100 <- 44px LOST * > .tp-field-label x=97 w=36.4 scrollWidth 66 <- overflowing * > .tp-field-Counter x=138 <- sits on it * * The 44px is the native