/* ------------------------------------------------ layout: filter lists */
/* Sub-categories stay out of the flow until a category is chosen. */
.elementor-widget.ap-subcat{display:none;}
.elementor-widget.ap-subcat.ap-subcat-visible{display:block;}

/* JetSmartFilters renders [data-filter-id] > wrapper > .jet-filter-row with
   no list element in between. The wrapper is a <fieldset> on the checkbox
   filters and a <form> on the brand tiles, the brand filter nests a further
   unclassed <fieldset> inside that form, and the plugin stylesheet pins the
   wrapper to a narrow width. So every level gets the flex context, and the
   trailing "fieldset" selector is simply inert where there is none.

   Laying the options out on the CONTAINER rather than the row is deliberate:
   JetSmartFilters hides zero-count options with display:none on the row, so
   any rule of ours that sets the row display fights that and puts every
   empty option back on screen. Leaving the row alone keeps the plugin
   behaviour intact while flex still flows the options across the width. */
.jet-smart-filters-checkboxes .jet-checkboxes-list-wrapper,
.jet-smart-filters-checkboxes .jet-checkboxes-list-wrapper fieldset,
.jet-smart-filters-color-image .jet-color-image-list-wrapper,
.jet-smart-filters-color-image .jet-color-image-list-wrapper fieldset{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	gap:8px;
	width:100%;
	max-width:100%;
	min-width:0;   /* fieldset defaults to min-content and will not shrink */
	margin:0;
	padding:0;
	border:0;
}
/* The brand tiles share the row evenly instead of sizing to their logos.
   Equal widths read as a set, and a flex basis well under the column width
   keeps every brand on one line. Because each tile shrinks to whatever
   space is available, the strip cannot overflow, so desktop needs no
   horizontal scroll at all. The max-width stops a lone tile stretching the
   full width if the list ever does wrap. */
.jet-smart-filters-color-image .jet-color-image-list-wrapper,
.jet-smart-filters-color-image .jet-color-image-list-wrapper fieldset{
	gap:12px;
	align-items:stretch;
	justify-content:flex-start;
}
/* Elementor lays these widgets out as flex items of a column container whose
   align-items is flex-start, so each widget is only as wide as its own
   contents rather than as wide as the column. Three logos and twenty three
   category chips happen to fill the width, so the missing rule is invisible;
   take the logos away, as the Names setting does, and the brand strip collapses
   to a single tile and the brands stack down the page. Stretching the widgets
   makes the width come from the container, which is where it should have come
   from all along, and the filter rows below inherit it. */
.elementor-widget:has(> .elementor-widget-container > .jet-filter){
	align-self:stretch;
	width:100%;
}
/* The same again for the block when the plugin renders it itself: the widget
   Elementor is laying out is then ours, and the filters are one level further
   in. Both spellings exist because the block can be placed either way and a
   site part way through a rebuild will have one of each. */
.elementor-widget:has(> .elementor-widget-container > .ap-shop-filters),
.ap-shop-filters{
	align-self:stretch;
	width:100%;
}
.jet-smart-filters-color-image,
.jet-smart-filters-color-image .jet-color-image-list{width:100%;}
.jet-smart-filters-color-image .jet-filter-row{
	flex:1 1 120px;
	max-width:230px;
	min-width:0;
}
.jet-smart-filters-color-image .jet-color-image-list__item{
	display:block;
	position:relative;
	width:100%;
	height:100%;
}
.jet-smart-filters-checkboxes .jet-filter-row,
.jet-smart-filters-color-image .jet-filter-row{
	margin:0;
	padding:0;
}
.jet-smart-filters-checkboxes .jet-checkboxes-list__item,
.jet-smart-filters-color-image .jet-color-image-list__item{
	margin:0;
	padding:0;
}

/* The native inputs are visually replaced by the chips and tiles below, but
   must stay in the accessibility tree and keyboard tab order. JetSmartFilters
   ships display:none on them, which drops them out of the tab order entirely,
   so the display is restored here at higher specificity. */
.jet-filter .jet-checkboxes-list__input,
.jet-filter .jet-color-image-list__input{
	display:block !important;
	visibility:visible !important;
	position:absolute;
	width:1px; height:1px;
	margin:-1px; padding:0; border:0;
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	overflow:hidden;
	white-space:nowrap;
}

/* ------------------------------------- overriding the Elementor controls */
/* Both filter widgets carry Elementor style controls, and Elementor writes
   their CSS as .elementor-2933 .elementor-element.elementor-element-XXX
   <target>: five classes deep, and it loads after this stylesheet. It pins
   the logo band to a fixed width, puts margins on every row plus matching
   negative margins on the wrapper, and offsets the decorator to one side.
   The 30px horizontal value it carried is exactly the overflow that used to
   push a scrollbar under the brand strip.

   The layout below is not a tweak on top of those controls, it replaces
   them, so this short list of properties is forced. Emptying the controls in
   the template was tried first and is not enough on its own: Elementor then
   falls back to the control defaults and writes the same properties again
   with smaller numbers. They have been emptied as well, so these rules are
   fighting 5px rather than 30px, but they still have to win. */
.jet-filter .jet-color-image-list__decorator,
.jet-filter .jet-checkboxes-list__decorator{margin:0 !important;}
.jet-filter .jet-color-image-list__decorator .jet-color-image-list__image{width:100% !important;}
.jet-filter .jet-filter-row,
.jet-filter .jet-color-image-list-wrapper,
.jet-filter .jet-checkboxes-list-wrapper{margin:0 !important;}

/* --------------------------------------------------------- group labels */
/* Three unlabelled rows of logos and chips is a puzzle, not a filter. The
   labels also carry the hierarchy, which is otherwise only implied by
   position: the sub-category row is styled exactly like the category row
   above it, so without a label naming the parent there is nothing on screen
   to say that Heavy Duty Foil sits inside Aluminium Foil. */
.ap-filter-label{
	width:100%;
	margin:0 0 10px;
	font-size:11px;
	font-weight:700;
	line-height:1;
	letter-spacing:.09em;
	text-transform:uppercase;
	color:#7a7a7a;
}
/* Each label needs more space above it than below, so it reads as a heading
   for the row that follows rather than a caption on the row above. The first
   label is exempt: there is already open space above the whole block. */
.ap-filter-label--gap{margin-top:30px;}
.ap-filter-label--sub{display:none;}
.ap-filter-label--sub.ap-subcat-visible{display:block;}

/* --------------------------------------------- category / sub-cat chips */
/* Every control in this file carries a 4px radius on purpose. That is the
   number the buttons elsewhere on the site use: the four on the Brands page
   are 1px solid with border-radius 4px, near square but not hard cornered.
   A pill reads as imported from somewhere else and a true zero reads as a
   different, sharper system, so both miss. Radius is written explicitly on
   every control rather than omitted so a later edit has to make the same
   decision deliberately instead of inheriting a plugin default. */
.jet-smart-filters-checkboxes .jet-checkboxes-list__decorator{display:none;}

.jet-smart-filters-checkboxes .jet-checkboxes-list__button{
	display:inline-flex;
	align-items:center;
	gap:6px;
	min-height:40px;
	/* Three pixels more above the name than below it. A centred line box is
	   not a centred word: the box keeps room under the baseline for letters
	   that hang below it, whether or not this name has any, so the word reads
	   as sitting high. The uneven padding centres the letters instead, and
	   leaves the button the same height it was. */
	padding:9.5px 14px 6.5px;
	border:1px solid #d7d7d7;
	border-radius:4px;
	background:#fff;
	color:#1f1f1f;
	font-size:14px;
	line-height:1.2;
	cursor:pointer;
	transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.jet-smart-filters-checkboxes .jet-checkboxes-list__item:hover .jet-checkboxes-list__button{
	border-color:#1f1f1f;
}
.jet-smart-filters-checkboxes .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button{
	background:#1f1f1f;
	border-color:#1f1f1f;
	color:#fff;
}
.jet-filter .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-filters-counter,
.jet-filter .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-filters-counter .counter-prefix,
.jet-filter .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-filters-counter .counter-suffix,
.jet-filter .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-filters-counter .value{
	color:rgba(255,255,255,.72);
}
/* The theme tints these with its own accent, which reads as a second, louder
   piece of information than the category name it belongs to. The count is
   supporting detail, so it is set back to a neutral grey. The child spans
   are listed because the plugin splits the brackets and the value apart and
   the theme colours them individually. */
.jet-filter .jet-filters-counter,
.jet-filter .jet-filters-counter .counter-prefix,
.jet-filter .jet-filters-counter .counter-suffix,
.jet-filter .jet-filters-counter .value{
	color:#8f8f8f;
	font-size:12px;
	font-weight:400;
	letter-spacing:0;
	font-variant-numeric:tabular-nums;
}

/* -------------------------------------------------------- brand tiles */
/* A selected tile has to occupy exactly the same box as an unselected one,
   or the whole strip shifts when a brand is picked. So the ring is a border
   that is always 2px and only changes colour, never a box-shadow added
   outside it, and the height is fixed rather than left to vary with however
   tall each supplier logo happens to be. */
.jet-smart-filters-color-image .jet-color-image-list__button{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:7px;
	box-sizing:border-box;
	width:100%;
	height:92px;
	/* The side padding is generous because the tick badge sits in the top
	   right corner: any less and a wide logo runs underneath it. */
	padding:12px 28px;
	border:2px solid #e6e6e6;
	border-radius:4px;
	background:#fff;
	cursor:pointer;
	transition:border-color .15s ease, background-color .15s ease;
}
/* Supplier logos arrive at whatever size the supplier supplied them, so
   left alone one brand reads twice the size of the next. A fixed band with
   the logo scaled to fill it puts all three on the same optical line. */
.jet-smart-filters-color-image .jet-color-image-list__image{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:34px;
}
.jet-smart-filters-color-image .jet-color-image-list__image img{
	display:block;
	height:100%;
	width:auto;
	max-width:100%;
	object-fit:contain;
}
.jet-smart-filters-color-image .jet-color-image-list__item:hover .jet-color-image-list__button{
	border-color:#b3b3b3;
}
/* A dark fill would swallow the logos, so the selected tile is marked with a
   dark border and a tick instead of an inverted colour. */
.jet-smart-filters-color-image .jet-color-image-list__input:checked + .jet-color-image-list__button{
	border-color:#1f1f1f;
}
.jet-smart-filters-color-image .jet-color-image-list__button::after{
	content:"";
	position:absolute;
	top:8px; right:8px;
	width:15px; height:15px;
	border-radius:50%;
	background:#1f1f1f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='%23fff'%3E%3Cpath d='M26.1 8.8c0 .4-.2.8-.4 1.1L12.2 23.3c-.3.3-.7.4-1.1.4s-.8-.1-1.1-.4l-7.8-7.8c-.3-.3-.4-.6-.4-1.1s.2-.8.4-1.1l2.1-2.1c.3-.3.7-.4 1.1-.4s.8.2 1.1.4l4.6 4.6L21.4 5.6c.3-.3.7-.4 1.1-.4s.8.2 1.1.4l2.1 2.1c.3.3.4.7.4 1.1z'/%3E%3C/svg%3E") center/10px no-repeat;
	opacity:0;
	transition:opacity .15s ease;
}
/* JetSmartFilters draws its own accent outline on the inner decorator when a
   tile is active. That is the stray green box around the logo; the ring and
   tick above are the selected state now, so the inner one is suppressed. */
.jet-smart-filters-color-image .jet-color-image-list__decorator,
.jet-smart-filters-color-image .jet-color-image-list__image,
.jet-smart-filters-color-image .jet-color-image-list__image img{
	outline:0;
	border:0;
	box-shadow:none;
	background:none;
}
.jet-smart-filters-color-image .jet-color-image-list__input:checked + .jet-color-image-list__button::after{opacity:1;}

/* Once a brand is chosen the others recede, but only the logo fades: dimming
   the whole tile made the remaining brands look disabled rather than simply
   not selected. */
.jet-smart-filters-color-image:has(input:checked) .jet-color-image-list__input:not(:checked) + .jet-color-image-list__button .jet-color-image-list__image{
	opacity:.55;
	transition:opacity .15s ease;
}
.jet-smart-filters-color-image:has(input:checked) .jet-color-image-list__item:hover .jet-color-image-list__image{
	opacity:1;
}
/* Brand is a radio, so the brands are alternatives rather than an
   intersection. With one selected the others correctly match nothing in the
   current result set, but a (0) on every other tile reads as "we do not
   stock this brand". Hidden rather than removed so the tile does not reflow. */
.jet-smart-filters-color-image:has(input:checked) .jet-color-image-list__input:not(:checked) + .jet-color-image-list__button .jet-filters-counter{
	visibility:hidden;
}

/* ------------------------------------------------------- focus visibility */
/* The browser default ring landed on the hidden input and read as a
   selection box. Move it to the visible control, keyboard only. */
.jet-smart-filters-checkboxes .jet-checkboxes-list__input:focus-visible + .jet-checkboxes-list__button,
.jet-smart-filters-color-image .jet-color-image-list__input:focus-visible + .jet-color-image-list__button{
	outline:2px solid #0b63d6;
	outline-offset:2px;
}

/* ----------------------------------------------------- active filter bar */
/* The bar is inserted into an Elementor container, which is itself a flex
   parent, so without an explicit width it shrinks to its contents and the
   Clear all button ends up jammed against the last chip instead of sitting
   at the far right. */
.ap-active-bar{
	display:none;
	box-sizing:border-box;
	width:100%;
	flex-wrap:wrap;
	align-items:center;
	gap:10px;
	margin:20px 0 24px;
	padding:12px 14px;
	border:1px solid #e6e6e6;
	border-radius:4px;
	background:#f7f7f7;
}
.ap-active-bar.ap-active-bar--on{display:flex;}
.ap-active-bar__label{
	font-size:11px;
	font-weight:700;
	line-height:1;
	letter-spacing:.09em;
	text-transform:uppercase;
	color:#7a7a7a;
}
/* A chip in this bar is the same token the user clicked further up the page,
   so it has to look like one: the category chips are sentence case in the
   body face, and a chip that echoes them back in the uppercase mono the
   theme puts on every button reads as a different object entirely. The
   theme rule outranks a plain class, hence the importance flags on the type
   properties only. Geometry is set rather than inherited too: an all-caps
   label centred on its line box sits visibly low in a chip, because the box
   still reserves descender space the capitals never use, so a fixed height
   with line-height 1 centres the text geometrically instead. */
.ap-active-bar__chip{
	display:inline-flex;
	align-items:center;
	gap:8px;
	box-sizing:border-box;
	height:34px;
	padding:0 12px 0 14px;
	border:1px solid #1f1f1f;
	border-radius:4px;
	background:#1f1f1f;
	color:#fff;
	cursor:pointer;
	font-family:inherit !important;
	font-size:13px !important;
	font-weight:500 !important;
	line-height:1 !important;
	letter-spacing:0 !important;
	text-transform:none !important;
}
.ap-active-bar__chip:hover{background:#000;border-color:#000;}
/* Drawn rather than typed: a multiplication sign centred by its line box
   never quite lands on the middle of the chip, and its weight does not match
   the label next to it. A fixed square with a centred glyph does both. */
.ap-active-bar__chip .ap-x{
	display:block;
	flex:0 0 auto;
	width:13px;
	height:13px;
	font-size:0;
	line-height:0;
	opacity:.6;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2.5 2.5l7 7M9.5 2.5l-7 7'/%3E%3C/svg%3E") center/11px 11px no-repeat;
	transition:opacity .15s ease;
}
.ap-active-bar__chip:hover .ap-x{opacity:1;}
/* The opposite decision to the chips above, and deliberately so. This is an
   action, not an echo of a filter, so it keeps the uppercase mono voice the
   theme gives every other button on the site. Only the geometry is set here,
   which is why there are no importance flags: the type is meant to lose. */
.ap-active-bar__clear{
	display:inline-flex;
	align-items:center;
	margin-left:auto;
	box-sizing:border-box;
	height:34px;
	padding:0 16px;
	/* The theme sets border-color on every button and wins the plain rule, so
	   this asked for a light grey edge and rendered a black one. Black is the
	   right answer, it is what the buttons on the rest of the site use, so it
	   is pinned here rather than left to be won by accident. */
	border:1px solid #1f1f1f;
	border-color:#1f1f1f !important;
	border-radius:4px;
	background:#fff;
	color:#1f1f1f;
	font-size:12px;
	line-height:1;
	cursor:pointer;
}
/* The theme tints every button on hover with its accent. Geometry can lose to
   the theme, but colour cannot: a pink flash on a neutral chrome control reads
   as a mistake. Every interactive state below pins its own three colours. */
/* A mouse click leaves the button focused, and the theme paints a focused
   button in its accent, so the control sits pink until something else is
   clicked. Resting focus therefore has to be pinned back to the rest colours;
   the hover and keyboard rules follow so they still win over it. */
.ap-active-bar__clear:focus{
	border-color:#1f1f1f !important;
	background:#fff !important;
	color:#1f1f1f !important;
}
/* The bar it sits on is already light grey, so a white button tinting to a
   slightly different grey says nothing. It inverts instead, which is the same
   move the chips make on hover: everything in this bar gets darker under the
   cursor. There is no confusion with the filled category buttons, because
   Clear all has no selected state of its own to be mistaken for. */
.ap-active-bar__clear:hover,
.ap-active-bar__clear:focus-visible{
	border-color:#1f1f1f !important;
	background:#1f1f1f !important;
	color:#fff !important;
}
.ap-active-bar__clear:active{
	border-color:#000 !important;
	background:#000 !important;
	color:#fff !important;
}

/* The theme-level reset widget is redundant now the bar carries Clear all. */
.elementor-widget.jet-smart-filters-remove-filters,
.elementor-widget-jet-smart-filters-remove-filters{display:none;}

/* --------------------------------------------------------- loading state */
/* Changing a filter fires an AJAX round trip; without this the page looks
   frozen for a second or so and users click again, which was the original
   source of overlapping requests. */
.ap-filtering .jet-listing-grid,
.ap-filtering .jet-smart-filters-checkboxes,
.ap-filtering .jet-smart-filters-color-image{
	opacity:.35;
	pointer-events:none;
	transition:opacity .12s ease;
}
.ap-filter-spinner{
	display:none;
	position:fixed;
	top:0; left:0; right:0;
	height:3px;
	background:linear-gradient(90deg,transparent,#111,transparent);
	background-size:40% 100%;
	background-repeat:no-repeat;
	animation:ap-filter-bar 1s linear infinite;
	z-index:99999;
}
.ap-filtering .ap-filter-spinner{display:block;}

/* A link arrives with the filters named in the address but with nothing
   selected, so the shop paints unfiltered for the moment it takes the script to
   make the selection. Dimming it from the head, before that first paint, is the
   difference between a page that is loading and a page that changed its mind.
   The class removes itself after six seconds whatever happens, because a shop
   left dimmed for good by a failed script is worse than the flash. */
.ap-deeplink .jet-listing-grid,
.ap-deeplink .jet-smart-filters-checkboxes,
.ap-deeplink .jet-smart-filters-color-image{
	opacity:.35;
	pointer-events:none;
}
.ap-deeplink .ap-filter-spinner{display:block;}
@keyframes ap-filter-bar{
	0%{background-position:-40% 0;}
	100%{background-position:140% 0;}
}

/* ---------------------------------------------------------- product grid */
/* JetEngine only exposes three column settings, one per Elementor
   breakpoint, and the widest of them was three columns. Four steps down to
   a single column needs four breakpoints, so the ladder is written here
   instead. The widget settings are left in place as a sane fallback and
   these override them, hence the importance flags: JetEngine writes its own
   basis onto the same element from the grid-col-* classes.

   The steps are chosen off the card, not the viewport furniture: below
   about 640px a two-column card is too narrow for a product shot to read,
   so it goes to one. */
/* The row is pulled 10px wider than its container so that the padding on each
   item forms the gutter without indenting the outer edges. That cancels
   exactly once, but the listing puts another 10px inside the item before the
   card face, so the first card sits 10px right of the filter buttons above it
   and the last stops 10px short of their right edge. At that size it reads as
   a mistake rather than as a margin. Widening the pull by the same 10px puts
   both card edges back on the container edge, and because the gutter is the
   difference between item width and card width it is unchanged.

   The width is stated rather than left to the negative margins to work out.
   Widening a block by negative margins alone left the row 20px narrow, so
   each column resolved its 25% against the wrong number and the last card
   stopped short of the right edge even though the first one had moved. */
.jet-listing-grid__items{
	flex-wrap:wrap;
	width:calc(100% + 40px) !important;
	margin-left:-20px !important;
	margin-right:-20px !important;
}
.jet-listing-grid__items > .jet-listing-grid__item{
	flex:0 0 33.333% !important;
	max-width:33.333% !important;
}
@media (min-width:1300px){
	.jet-listing-grid__items > .jet-listing-grid__item{
		flex-basis:25% !important;
		max-width:25% !important;
	}
}
@media (max-width:999px){
	.jet-listing-grid__items > .jet-listing-grid__item{
		flex-basis:50% !important;
		max-width:50% !important;
	}
}
@media (max-width:639px){
	.jet-listing-grid__items > .jet-listing-grid__item{
		flex-basis:100% !important;
		max-width:100% !important;
	}
}

/* ------------------------------------------------------------ pagination */
/* JetSmartFilters renders the pager into an empty div at runtime, so it
   arrives unstyled and picks up the theme link colour, which is pink. Thirty
   one pink numbers under a black and white grid is the loudest thing on the
   page. The pager is chrome, so it gets the same neutral voice as the chips:
   current page reads as a filled tile, the rest are quiet until hovered. */
.jet-smart-filters-pagination .jet-filters-pagination{
	display:flex; flex-wrap:wrap; align-items:center; gap:6px;
	margin:34px 0 8px; padding:0;
}
.jet-smart-filters-pagination .jet-filters-pagination__item{
	display:inline-flex; align-items:center; justify-content:center;
	box-sizing:border-box; min-width:34px; height:34px; padding:0 10px;
	border:1px solid transparent; border-radius:4px;
	background:transparent; color:#1f1f1f !important;
	font-size:13px !important; font-weight:500 !important;
	line-height:1 !important; letter-spacing:0 !important;
	text-decoration:none !important; text-transform:none !important;
	font-variant-numeric:tabular-nums; cursor:pointer;
	transition:background-color .15s ease, border-color .15s ease;
}
.jet-smart-filters-pagination .jet-filters-pagination__item:hover{
	background:#f2f2f2; border-color:#e0e0e0; color:#1f1f1f !important;
}
.jet-smart-filters-pagination .jet-filters-pagination__current{
	background:#1f1f1f; border-color:#1f1f1f; color:#fff !important;
	font-weight:600 !important;
}
.jet-smart-filters-pagination .jet-filters-pagination__current:hover{
	background:#1f1f1f; border-color:#1f1f1f; color:#fff !important;
}
/* Prev and Next are words rather than numbers, so they get the wider padding
   and a visible edge to read as controls instead of as two more pages. */
.jet-smart-filters-pagination .jet-filters-pagination__item.prev-next{
	padding:0 16px; border-color:#d8d8d8;
}

/* ---------------------------------------------------------------- mobile */
/* The toggle and the clipping are mobile affordances only, so they are off
   by default and switched on inside the media query below. This ordering
   matters: an equal-specificity display:none declared after the media query
   would win at every width. */
.ap-more-toggle{display:none;}
.ap-more-toggle:focus{
	border-color:#1f1f1f !important;
	background:#fff !important;
	color:#1f1f1f !important;
}
.ap-more-toggle:hover,
.ap-more-toggle:focus-visible{
	border-color:#1f1f1f !important;
	background:#f4f4f4 !important;
	color:#1f1f1f !important;
}
.ap-more-toggle:active{background:#e9e9e9 !important;}

/* 3 brands and 23 top-level categories will not fit a phone as a wrapped
   grid; the products would start well below the fold. Brands become a
   single swipeable row and the category list collapses to two rows behind
   a toggle. The active bar stays visible so state is never hidden. */
@media (max-width:767px){
	/* Every brand is on screen on a phone, so the strip wraps instead of
	   scrolling. A swipe row hid whichever brands did not fit, and a brand
	   a shopper cannot see is a brand they will not filter by. Two per row
	   rather than three: at three the tiles come down to about 108px and the
	   logos with them, and the Sabert lock-up in particular stops being
	   readable. Two keeps the tiles the size they were when they scrolled. */
	.jet-smart-filters-color-image .jet-color-image-list-wrapper,
	.jet-smart-filters-color-image .jet-color-image-list-wrapper fieldset{
		flex-wrap:wrap;
		overflow:visible;
		gap:10px;
	}
	.jet-smart-filters-color-image .jet-filter-row{
		flex:1 1 calc(50% - 5px);
		max-width:calc(50% - 5px);
	}
	/* Same reason as the desktop rule: the tick badge needs the corner to
	   itself, so the logo is kept out of it. */
	.jet-smart-filters-color-image .jet-color-image-list__button{
		height:80px;
		padding:10px 22px;
	}
	.jet-smart-filters-color-image .jet-color-image-list__image{height:30px;}
	.jet-smart-filters-color-image .jet-color-image-list__image img{max-height:30px;}

	.jet-smart-filters-checkboxes .jet-checkboxes-list-wrapper{gap:6px;}
	.jet-smart-filters-checkboxes .jet-checkboxes-list__button{
		min-height:42px;
		padding:9px 13px;
		font-size:13px;
	}

	/* The class is applied by JS to the wrapper when present and to the
	   filter root otherwise, so it is styled directly rather than as an
	   ancestor of a list element that does not exist. */
	/* No display override here: the wrapper must stay a flex container. */
	/* The height itself is measured in the script and set inline, because
	   two rows of chips is a layout question rather than a fixed number.
	   There is no fade: a gradient over a row that has been cut cleanly at
	   its own edge makes the visible chips look damaged, and the toggle
	   underneath already says there is more. */
	.ap-collapsed{overflow:hidden;}
	.ap-more-toggle{
		display:inline-flex;
		align-items:center;
		gap:6px;
		margin-top:10px;
		min-height:40px;
		padding:8px 16px;
		border:1px solid #1f1f1f;
		border-radius:4px;
		background:#fff;
		color:#1f1f1f;
		font-size:13px;
		font-weight:600;
		cursor:pointer;
	}
	.ap-active-bar{
		margin:14px 0 18px;
		padding:10px 12px;
	}
	.ap-active-bar__clear{
		margin-left:0;
		width:100%;
		justify-content:center;
	}
}

/* A large phone or a small tablet has the width for all three brands on one
   line at a readable size, so the two-up grid above only applies where the
   screen genuinely cannot take three. */
@media (min-width:480px) and (max-width:767px){
	.jet-smart-filters-color-image .jet-filter-row{
		flex:1 1 calc(33.333% - 7px);
		max-width:calc(33.333% - 7px);
	}
}