@keyframes open-filter
{
	0%
	{
		transform-origin: top;
		transform: rotateX(90deg);
	}
	100%
	{
		transform-origin: top;
		transform: rotateX(0deg);
	}
}
@media print
{
	.stock-list > .header > label:has(input[type="checkbox"]),
	.stock-list > .header:has(label > input[type="checkbox"]) + .search-panel,
	.stock-list > .pagination,
	.stock-cookie-error
	{
		display: none;
	}
	
	.stock-item	
	{
		page-break-inside: avoid;		
	}
}
.stock-list
{
	display: grid;
	grid-template-rows: 70px auto minmax(40px, 1fr);
	grid-template-columns: auto;
	grid-template-areas: 
		"controls"
		"stock-list"
		"pagination";
	padding: var(--padding-main-vertical) var(--padding-main-horizontal);
	align-items: start;	
	width: 100vw;	
}
.stock-cookie-error
{
    margin: var(--padding-main-vertical) var(--padding-main-horizontal);
    border-bottom: 1px solid var(--colour-stroke);
    padding: 0px 0px 12px 0px;
	text-wrap: balance;
	text-align: center;
}
.stock-list > .product-summary
{
	margin: 0px;
}
	
main section:first-of-type .stock-list > .header	
{
	padding: var(--grid-gap-standard-vertical) var(--grid-gap-standard-horizontal) 0px var(--grid-gap-standard-horizontal);	
}
	
.stock-list > .header
{
	grid-area: controls;
	display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
	padding: 50px var(--grid-gap-standard-horizontal) 0px var(--grid-gap-standard-horizontal);
    align-items: center;	
}

body:not(.jse) main .stock-list > .header > fieldset select
{
	border-right: 0px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}
body:not(.jse) main .stock-list > .header > fieldset input[type="submit"]
{
	border-left: 0px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.stock-list > .header > fieldset
{
	width: 244px;
	display: flex;	
	justify-content: flex-end;
}

.stock-list:has(.header > label > input[type="checkbox"]:checked)
{
	grid-template-rows: minmax(40px, 1fr) auto auto minmax(40px, 1fr);	
	grid-template-areas: 
		"controls"
		"search-panel"
		"stock-list"
		"pagination";
}
.stock-list > .header > label > input[type="checkbox"]
{
	display: none;
}

#filterClearButton
{
    height: 32px;
    line-height: 16px;
    max-width: 111px;
    padding-left: 35px;	
    justify-self: right;
    width: 100%;	
}

#filterClearButton:before
{
	content: '';
	width: 24px;
	height: 24px;	
	position: absolute;
	top: 3px;
	left: 20px;
    mask-image: url(/index/cross.svg);
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 10px 10px;	
	background-color: var(--colour-main-text);	
}
#filterClearButton:hover:before
{	
	background-color: var(--colour-base);	
}

.stock-list > .header > label:has(input[type="checkbox"])
{    
    position: relative;
	height: 48px;
	line-height: 32px;
    padding: 8px 40px 8px 18px;
    border-radius: 4px;
    border: 1px solid var(--colour-stroke);
    border-radius: var(--radius-small);
    transition-duration: 0s;
    background-color: var(--colour-base);    
	color: var(--colour-main-text);
}
.stock-list > .header > label:has(input[type="checkbox"]):after
{
	content: '';
	width: 50px;
	height: 100%;	
	position: absolute;
	top: 0;
	right: 0;
    mask-image: url(/index/filter.svg);
    mask-repeat: no-repeat;
    mask-position: right 1em top 50%;
    mask-size: 1em auto;	
	background: var(--colour-main-text);	
}
.stock-list > .header > label:has(input[type="checkbox"]):hover:after,
.stock-list > .header > label:has(input[type="checkbox"]:checked):after
{
	background: var(--colour-base);
}
.stock-list > .header > label:has(input[type="checkbox"]):hover,
.stock-list > .header > label:has(input[type="checkbox"]:checked)
{
	color: var(--colour-base); 
	background-color: var(--colour-main);
}

.stock-list > .header:has(label > input[type="checkbox"]) + .search-panel
{
	display: none;	
}
.stock-list > .header:has(label > input[type="checkbox"]:checked) + .search-panel
{
	display: grid;
	animation-name: open-filter;
	animation-iteration-count: 1;
	animation-duration: 1s;
	animation-direction: forward;
	animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
	animation-fill-mode: forwards;	
}
.stock-list > .noresults
{
    display: grid;
    justify-items: center;
    margin: var(--padding-main-vertical) 0px;
    text-align: center;	
}
.stock-list > .search-panel
{
	grid-area: search-panel;	
	padding: var(--grid-gap-standard-vertical) var(--grid-gap-standard-horizontal);
	border-radius: var(--radius-tiny);	
	height: fit-content;
	grid-template-areas: ". .";
	align-items: center;
}
.stock-list > .search-panel details
{
	order: 2;
}
.stock-list > .search-panel details[data-selected]
{
	order: 1;
}
.stock-list > .search-panel > *
{
	grid-column: 1 / -1;
}

.stock-list > .search-panel details
{
	border-bottom: 1px solid var(--colour-stroke);
}
.stock-list > .search-panel details:last-of-type
{
	border-bottom: 0px;
}

.stock-list > .search-panel details summary
{
    display: flex;
    grid-gap: 10px;
    list-style: none;
	cursor: pointer;	
}
.stock-list > .search-panel details summary h2
{
	position: relative;
	width: 100%;
}
.stock-list > .search-panel details summary h2:after
{
	content: '';
	position: absolute;
	background-color: var(--colour-icons);
	mask-size: 16px 16px;
	mask-position: center center;
	mask-repeat: no-repeat;
	display: inline-block;
	width: 24px;
	height: 24px;
	mask-image: url(/index/up.svg);	
	transform: rotate(180deg);
	right: 0px;
}
.stock-list > .search-panel details[data-selected] summary h2:after
{
	background-color: var(--colour-main);
} 
.stock-list > .search-panel details:open summary h2:after
{
	transform: rotate(0deg);
}
.stock-list > .search-panel details:open
{
	animation-name: open-filter;
	animation-iteration-count: 1;
	animation-duration: 1s;
	animation-direction: forward;
	animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
	animation-fill-mode: forwards;		
	padding-bottom: 24px;
}

.stock-list > .search-panel input[type='submit']
{
    margin-top: 30px;
    padding: 8px 0px;
}

.stock-list > .header input[type='submit']
{
	padding: 8px 18px;
	height: 50px;
} 

.stock-list > .search-panel h1
{
	font-weight: var(--font-weight-semi-bold);
	font-size: var(--font-size-title);
	grid-column: 1;
}
.stock-list > .search-panel h2
{
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-stock-title);
	margin: 16px 0px;
    line-height: normal;
}
.stock-list > .search-panel h1 + a
{	
	grid-column: 2;
}

.stock-list > .search-panel fieldset.range
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content 1fr;
    grid-auto-flow: column;
    grid-gap: 8px 10px;
	line-height: 1em;
}
.stock-list > .search-panel fieldset.range select
{
	border-radius: var(--radius-nano);
	height: 38px;
}

.stock-list > .search-panel .long-list
{		      
    display: grid;
	height: auto;
    max-height: 170px;
	overflow: auto;	
    align-content: baseline;
    align-items: center;	
}

.stock-list > .search-panel label
{
	line-height: 24px;
	padding: 5px 0px 5px 10px;
	color: var(--colour-secondary-text);
}
.stock-list > .search-panel label:has(:checked),
.stock-list > .search-panel label:hover
{
	color: var(--colour-main-text);
	font-weight: var(--font-weight-semi-bold);	
}
.stock-list > .search-panel label:hover
{
	background: var(--colour-subtle);
	border-radius: var(--radius-tiny);
}

.stock-list > .search-panel label span
{
	font-weight: var(--font-weight-semi-bold);
	color: var(--colour-main-text);
}

.stock-list > .search-panel label input[type="checkbox"]
{
	display: none;
}
.stock-list > .search-panel label:has(input[type="checkbox"])
{
	margin-left: 32px;
}
.stock-list > .search-panel label:has(input[type="checkbox"]):after,
.stock-list > .search-panel label:has(input[type="checkbox"]):before
{
	content: '';
	position: absolute;
	display: block;
	width: 24px;
	height: 24px;	
	top: 5px;
    left: -32px;	
	border-radius: var(--radius-nano);
}
.stock-list > .search-panel label:has(input[type="checkbox"]):before
{
	border: 1px solid var(--colour-stroke);	
	background: var(--colour-base);	
}
.stock-list > .search-panel label:has(input[type="checkbox"]:checked):before
{
	border: 1px solid transparent;
	background: var(--colour-main);	
}
.stock-list > .search-panel label:has(input[type="checkbox"]:checked):after
{
	background: var(--colour-base);
	mask-image: url(/index/check.svg);
	mask-size: 12px 12px;
	mask-position: center;
	mask-repeat: no-repeat;
	left: -31px;
}
.stock-list > .panel
{
	grid-area: stock-list;
	margin: 0px;
	padding: 0px var(--grid-gap-standard-horizontal);
}
.stock-list > .pagination
{
	grid-area: pagination;
	justify-self: center;
	display: flex;
    grid-gap: 8px;
	margin-top: 12px;
}
.stock-list > .pagination > button[type="submit"]
{
    display: flex;
	min-width: 32px;
	width: 32px;
	height: 32px;
	background: var(--colour-base);
	border-radius: var(--radius-tiny);
	border: 1px solid var(--colour-stroke);
	color: var(--colour-secondary-text);
	padding: 4px;
    line-height: normal;
	align-items: center;
}
.stock-list > .pagination > button[type="submit"]:hover,
.stock-list > .pagination > button[type="submit"].current
{
	background: var(--colour-main);
	color: var(--colour-text-over-main);	
}

.stock-list > .pagination > button[type="submit"].next:hover span,
.stock-list > .pagination > button[type="submit"].previous:hover span,
.stock-list > .pagination > button[type="submit"].first:hover span,
.stock-list > .pagination > button[type="submit"].last:hover span
{
	background: var(--colour-text-over-main);	
}

.stock-list > .pagination > button[type="submit"].next span,
.stock-list > .pagination > button[type="submit"].previous span
{
	background: var(--colour-main-text);
    mask-image: url(/index/up.svg);
    mask-size: 12px 12px;
    mask-position: center;
    mask-repeat: no-repeat;
    display: block;    
    width: 24px;
    height: 24px;
}
.stock-list > .pagination > button[type="submit"].first span,
.stock-list > .pagination > button[type="submit"].last span
{
	background: var(--colour-main-text);
    mask-image: url(/index/up.svg), url(/index/up.svg);
    mask-size: 12px 12px;
    mask-position: center, bottom;
    mask-repeat: no-repeat;
    display: block;    
    width: 24px;
    height: 24px;
}
.stock-list > .pagination > button[type="submit"].first span
{
	transform: translate(-3px) rotate(-90deg);
}
.stock-list > .pagination > button[type="submit"].last span
{
	transform: translate(3px) rotate(90deg);
}
.stock-list > .pagination > button[type="submit"].next span
{    
    transform: rotate(90deg);
}
.stock-list > .pagination > button[type="submit"].previous span
{
    transform: rotate(-90deg);
}


.stock-item
{
	display: grid;
	grid-template-areas: 
		"img"		
		"refs"
		"title"				
		"stats"
		"price"
		"view";     
    align-content: center;
    justify-content: stretch;
    align-items: center;    
	align-self: start;
	grid-template-rows: 180px repeat(5, auto);
	grid-template-columns: 1fr;	
	grid-gap: calc(.5 * var(--grid-gap-standard-vertical)) var(--grid-gap-standard-horizontal);	
}	

.stock-item a:has(picture),
.stock-item a:has(.noImage)
{
	display: contents;
}

.stock-item > .button
{
	width: 100%;
	font-size: 1.1em;
    font-weight: 600;
}
.stock-item .noImage
{	
	width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--colour-base);
    display: grid;
	align-content: center;
    grid-area: img;
    position: relative;
    border-radius: var(--radius-small);
    position: relative;    
	border: 1px solid var(--colour-stroke);
	background: #FFF url(/images/products/no-image.svg);
	background-position: center center;	
    background-size: contain;    
    background-repeat: no-repeat;	
}
.stock-item picture
{
	width: 100%;
    height: 100%;
    overflow: hidden;
    background: radial-gradient(circle, rgba(241, 241, 241, 1) 0%, rgba(200, 200, 200, 1) 100%);
    display: block;
    grid-area: img;
    position: relative;
    border-radius: var(--radius-small);
    position: relative;
    background-position: center center;
}
.stock-item picture img
{
	position: absolute;
	top: 0;
	left: 0;
	transition: 0.5s ease;
}
.stock-item picture img:first-child
{
	transform: translateX(0%);
}
.stock-item picture:hover img:first-child
{
	transform: translateX(-100%);
}
.stock-item picture img:nth-child(2)
{	
	transform: translateX(100%);
}
.stock-item picture:hover img:nth-child(2)
{
	transform: translateX(0%);
}
.stock-item picture img
{
    object-fit: cover;
	width: 100%;
    height: 100%;
}	

.stock-item .refs
{
	grid-area: refs;
	text-transform: uppercase;
	font-size: var(--font-size-minor);
	padding-top: calc(.5 * var(--grid-gap-standard-vertical));
}
.stock-item .refs span
{
	font-weight: var(--font-weight-bold); 
	font-size: var(--font-size-minor);	
}

.stock-item .refs .branch.somerset
{
	font-weight: 900; 
	color: var(--colour-somerset);
}

.stock-item .refs .branch.devon
{
	font-weight: 900; 
	color: var(--colour-devon);
}

.stock-item .stats
{
	grid-area: stats;
	display: flex;
	width: 100%;	
	grid-gap: 4px;    
	white-space: nowrap;
	flex-wrap: wrap;
}
.stock-item .stats > span
{
	display: block;
	font-size: var(--font-size-standard);
	color: var(--colour-secondary-text);
	border: 1px solid var(--colour-stroke);	
	border-radius: var(--radius-nano);	
	padding: var(--padding-table-small);
	background: var(--colour-base);
    height: 24px;
    line-height: 6px;	
	white-space: nowrap;
	font-size: 0.7em;	
}

.stock-item .stats > span:last-child:after
{
	content: '';
}

.stock-item .stats > span.price-includes
{
	background: var(--colour-highlight);
	font-weight: 600;
}

.stock-item h2
{
	grid-area: title;	
	font-size: var(--font-size-subject);
	font-weight: var(--font-weight-bold);
	padding: 0px;
	justify-self: start;
	line-height: var(--font-size-subject);
	align-self: baseline;
}

.stock-item.sale picture:after,
.stock-item .favourite
{	
    line-height: 10px;	
	text-transform: capitalize;
	font-size: var(--font-size-minor);
	font-weight: var(--font-weight-bold);	
	text-align: center;		
	position: absolute;
    top: 10px;
	border-radius: var(--radius-bubble);
	z-index: 1;	
	padding: 6px 12.5px;
}

.stock-item .favourite:hover
{
    box-shadow: 0px 1px 2px 0px #000A;
	transform: scale(1.1);
}


@media screen 
{
	.stock-item.sale picture:after
	{
		content: attr(data-save);
		display: block;	
		background: var(--colour-sale);	
		left: 10px;	
		color: var(--colour-text-over-sale);
		font-size: 0.9em;		
	}	
	.stock-item .favourite
	{
		right: 8px;	
		background: var(--colour-base);
		width: 32px;
		height: 32px;	
		text-indent: -9999px;
		border-radius: 50%;
		padding: 0px;
		overflow: hidden;
	}	
	.stock-item .favourite:after
	{
		content: '';
		top: 1px;
		left: 0px;
		position: absolute;    
		display: block;
		grid-area: favourite;
		align-self: center;	
		width: 32px;
		height: 32px;
		background: var(--colour-heart);
		mask-image: url('/index/filled-heart.svg');
		mask-repeat: no-repeat;
		mask-size: 16px 16px;
		mask-position: center center;
	}	
	.stock-item .favourite.remove:after
	{
		animation: heartbeat 1s ease-in-out forwards;
		background: var(--colour-main);		
	}
	.stock-item .favourite.change:after
	{		
		animation: horizontal-spin 1s linear infinite;
	}
}
@media print
{
	.stock-item.sale picture:after
	{
		content: attr(data-save);
		display: block;	
		color: var(--colour-sale);	
		left: 10px;	
		background: var(--colour-base);					
	}
	.stock-item .favourite	
	{
		display: none;
	}
}
	
.stock-item .price
{
	grid-area: price;	
    justify-self: start;	
	font-size: var(--font-size-important);
	line-height: 1em;
	font-weight: var(--font-weight-bold);
	display: flex;
    flex-direction: row;
    grid-gap: 8px;
	flex-wrap: nowrap;
    align-items: center;
	padding: calc(.5 * var(--grid-gap-standard-vertical)) 0px;
}
.stock-item.sale .price
{
	color: var(--colour-sale);
	font-size: 1.1em;
}
.stock-item.sale .price .was,
.stock-item .price .label
{
	color: var(--colour-secondary-text);
	font-size: var(--font-size-standard);		
}
.stock-item.sale .price .was
{
	text-decoration: line-through;
	font-weight: 
}
.stock-item .price abbr,
.stock-item .price .label
{
	text-decoration: none;
	border-bottom: 0px;
	color: var(--colour-secondary-text);
	font-weight: var(--font-weight-semi-bold);
}

input[type="radio"][name="page"]
{
	display: none;
}

.stock-item .view .button
{
	margin: 0px 25px 0px 0px;
	width: 78px;
	text-align: center;
	cursor: pointer;
}
.stock-item .view
{
	grid-area: view;				
	display: contents;				
}

@media screen and (min-width: 850px)
{
	.stock-list:has(.header > label > input[type="checkbox"]:checked),
	.stock-list
	{
		display: grid;
		grid-template-columns: 284px auto;
		grid-template-areas: 
			"search-panel controls"
			"search-panel stock-list"
			"search-panel pagination";
	}	
	.stock-list > .header:has(label > input[type="checkbox"]) + .search-panel
	{
		display: grid;
	}	
	.stock-list > .header > label:has(input[type="checkbox"])
	{
		display: none;
	}	
}



#results-report
{
	display: none;	
}
#results-report span:first-child,
#results-report span:last-child,
#results-report span:nth-child(3)
{
	display: none;
}
@media (min-width: 500px)
{
	#results-report
	{
		display: block;
		font-size: inherit;
	}
}
@media (min-width: 600px)
{	
	#results-report span:first-child,
	#results-report span:last-child,
	#results-report span:nth-child(3)
	{
		display: inline;
	}
	#results-report span:nth-child(4)
	{
		display: none;
	}
}

@media (min-width: 1024px)
{
	.stock-list > .pagination
	{
		margin-top:16px;
	}
}