section:first-of-type:has(.product-summary)
	{
		display: contents;
	}
	section:first-of-type:has(.product-summary) .crumb-link
	{
		position: absolute;
		padding: 0px;
		margin: 0px;						
		margin-left: calc(var(--padding-main-horizontal) + 20px);
		width: var(--width-main);
		height: 30px;
		line-height: 30px;
		top: 4px;
	}
	
	section:first-of-type:has(.product-summary) .crumb-link:after
	{
		content: '';
        position: absolute;
        background-color: var(--colour-secondary-text);
        mask-size: 16px 16px;
        mask-position: center center;
        mask-repeat: no-repeat;
        display: inline-block;
        width: 16px;
        height: 30px;
        mask-image: url(/index/up.svg);
        top: 0px;
        transform: rotate(270deg);
        left: -20px;
	}
	
	.product-summary
	{				
		display: contents;
	}
	
	.product-summary .media img
	{
		border-radius: var(--radius-tiny);
	}
	
	.product-summary .media
	{
		display: grid;
		grid-gap: 8px;        	
	}
	
	.product-summary .media .large-image input[type="radio"],
	.product-summary .media .large-image label,
	.product-summary .media .large-image label input,
	.product-summary .media .large-image label input + img + span	
	{
		display: none;
	}
	.product-summary .media .overlay
	{
		display: flex;
		width: 100%;
		height: calc(100% - 124px);
		background: transparent;		
		z-index: 8;
		position: absolute;
		pointer-events: none;
		flex-direction: row-reverse;
		align-items: flex-end;
		grid-gap: 8px;
		padding: 16px 16px;		
	}	
	.product-summary .media .overlay .button
	{
		pointer-events: all;
		height: 40px;
		padding: 0rem 1.5rem;		
	}		
	.product-summary .media .overlay .play
	,.product-summary .media .overlay .interactive
	{
		line-height: 2.3rem;
		padding-left: 40px;
	}	
	.product-summary .media .overlay .play:after
	,.product-summary .media .overlay .interactive:after
	{
	    content: '';
		position: absolute;
		background-color: var(--colour-icons);
		mask-size: 18px 16px;
		mask-position: center center;
		mask-repeat: no-repeat;
		display: inline-block;
		width: 24px;
		height: 24px;		
		top: 7px;
		left: 15px;
	}
	.product-summary .media .overlay .play:after
	{
		mask-image: url(/index/play.svg);
	}
	.product-summary .media .overlay .interactive:after
	{
		mask-image: url(/index/interactive.svg);
	}
	.product-summary .media .overlay .interactive:hover:after
	,.product-summary .media .overlay .play:hover:after
	{
		background-color: var(--colour-base);
	}
		
	.product-summary .media .overlay input,
	.product-summary .media .large-image:has(label input:checked) ~ .overlay
	{
		display: none;
	}
	.product-summary .media .overlay .button + .content
	{
		position: fixed;
		opacity: 0;
		pointer-events: none;		
		display: grid;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;    		
		background: #FFF4;
		backdrop-filter: blur(3px);
		align-content: center;
		justify-content: center;	
		z-index: 1;		
	}
	.product-summary .media .overlay .button:has(:checked) + .content
	{		
		opacity: 1;
		pointer-events: all;		
	}
	.product-summary .media .overlay .button:has(:checked) + .content > span
	{
		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;				
		animation-name: fade-in;		
	}
	.product-summary .media .overlay .button + .content > span
	{
		display: block;
		width: 100vw;
		max-height: 100vh;
		aspect-ratio: 16 / 9;
		padding: 1em;		
	}	
	.product-summary .media .overlay .button + .content > span iframe
	,.product-summary .media .overlay .button + .content > span .frame
	{
		width: 100%;			
		height: 100%;		
		background-color: var(--colour-base);
		border: 1px solid var(--colour-stroke); 
	}
	
	.product-summary .media .large-image label input:checked + img + span
	{		
		position: fixed;
		width: 100vw;
		height: 100vh;
		background: #FFF4;
		backdrop-filter: blur(3px);
		top: 0px;
		left: 0px;
		z-index: 10;
		display: grid;
		align-content: center;
		justify-content: center;
		align-items: center;
		justify-items: center;	
		overflow: auto;	
		z-index: 12;
	}
	.product-summary .media .large-image label input:checked + img + span img
	{
		anchor-name: --img-anchor;
		max-height: none;
		box-shadow: 0px 16px 8px -8px #0002;
	}
	.product-summary .media .large-image label input:checked + img + span a
	{
		position-anchor: --img-anchor;
		position: fixed;
		background: var(--colour-base);
		width: 40px;
		height: 40px;		
		opacity: 64%;
		border-radius: var(--radius-radio-button);		
	}
	.product-summary .media .large-image label input:checked + img + span img ~ a
	{
		display: none;
	}
	
	.product-summary .media .large-image input:checked + label
	{
		display: grid;
		width: 100%;
		justify-items: center;
		background: var(--colour-subtle);
		border-radius: var(--radius-tiny);		
	}	
	.product-summary .media .large-image input:checked + label > img
	{
		height: 60vh;
		max-height: 480px;
	}
	.product-summary .media .large-image input:checked + label img
	{
		width: 100%;					
		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;				
		animation-name: fade-in;		
	}
	.product-summary .media .large-image input:checked + label img.portrait
	{
		object-fit: contain;
	}	
	.product-summary .media .large-image input:checked + label img.landscape
	{
		object-fit: cover;
	}		
	.product-summary .media .thumbs
	{
		display: grid;
		grid-auto-flow: column;
		grid-gap: 8px;
		overflow: auto;
		justify-content: start;
	}
	.product-summary .media .thumbs label img
	{
		max-height: 99px;
	}
	
	.product-summary .media .thumbs:hover label
	{
		filter: brightness(.9); 		
	}
	.product-summary .media .thumbs:hover label:hover
	{
		filter: brightness(1); 
	}
		
	.product-summary .media .thumbs .selected img
	{				
		outline: 2px solid var(--colour-main);
		outline-offset: -2px;		
	}	
			
	.product-summary .detail > div 
	{
		background: transparent;
		height: 100%;
		align-content: start;					
		display: grid; 
		grid-auto-columns: 1fr; 
		grid-auto-rows: auto; 				
		grid-template-areas: 
			"brand fpsb"
			"avpc avpc"
			"title title"
			"spec spec"			
			"price price"
			"price-disclaimer price-disclaimer"			
			"telephone enquiry"
			"branch-summary branch-summary";			
		grid-gap: 8px;	        	
	}
	
	.product-summary .media,
	.product-summary .detail
	{
		grid-column: 1 / -1;
	}
	
	.product-summary .media,
	.product-summary .detail > div 
	{			
		margin: var(--margin-details-gap) var(--padding-main-horizontal);
		margin-top: 40px;
		padding: 0px 8px;	
		height: fit-content;
	}	
	@media screen and (min-width: 1024px) 
	{
		.product-summary .media
		{
			grid-column: 2;
			padding-right: var(--grid-gap-wide-horizontal);
			margin: 0px;
			margin-top: 40px;
		}
		.product-summary .media .overlay
		{
			padding-right: calc(16px + var(--grid-gap-wide-horizontal));
		}
		.product-summary .detail
		{
			grid-column: 3;					
		}
		.product-summary .detail > div 
		{			
			margin: 0px;			
			margin-top: 40px;			
			padding: 0px;
		}		
	}
	@media screen and (min-width: 1024px) and (min-height: 530px)
	{
		.product-summary.sticky .detail > div
		{
			top: 16px;	
			position: sticky;
			z-index: 1;							
		}		
		.product-summary .detail
		{
			grid-row: span 100;	
		}
	}
	
	.product-summary .detail > div .brand 
	{ 
		grid-area: brand;     
		width: 140px;
		height: 80px; 		
		object-fit: contain;
		font-weight: var(--font-weight-semi-bold);
		font-size: var(--font-size-important);
		line-height: var(--font-size-important);
		width: 150px;
		background: white;
		height: 100px;
		border: 1px solid var(--colour-stroke);
		padding: 10px;	
		display: grid;
		align-content: center;
		justify-content: center;
		align-items: center;
		justify-items: center;	
		border-radius: var(--radius-nano);		
	}
	
	.product-summary .detail > div .branch-summary
	{
		grid-area: branch-summary;
		margin-top: 8px;
		border: 1px solid var(--colour-stroke);
		padding: 16px;
		border-radius: var(--radius-tiny);
		display: grid;
		grid-gap: 8px;		
		background: var(--colour-base);
		font-size: var(--font-size-standard);
	}	
	.product-summary .detail > div .branch-summary span
	{
		font-weight: var(--font-weight-bold);
		padding-left: 26px;
	}
	.product-summary .detail > div .branch-summary.somerset span
	{
		color: var(--colour-somerset);
	}
	.product-summary .detail > div .branch-summary.devon span
	{
		color: var(--colour-devon);
	}	
	.product-summary .detail > div .branch-summary span:after
	{
	    content: '!';
		display: block;
		width: 18px;
		height: 18px;
		background: pink;
		position: absolute;
		top: -1px;
		left: 0px;
		border-radius: var(--radius-bubble);
		color: white;
	    text-align: center;
		font-weight: 900;
		font-size: 16px;
		line-height: 18px;
	}
	.product-summary .detail > div .branch-summary.somerset span:after
	{
		background-color: var(--colour-somerset);
	}
	.product-summary .detail > div .branch-summary.devon span:after
	{
		background-color: var(--colour-devon);
	}
	
	.product-summary .detail > div .avpc
	{
		grid-area: avpc;
		display: flex;
		grid-gap: 8px;
		align-items: center;		
	}
	
	.product-summary .detail > div .availability 
	{ 		
		font-size: var(--font-size-menu);
		line-height: var(--font-size-menu);		
		color: var(--colour-secondary-text);
		padding-top: 8px;		
		position: relative;		
	}
	
	.product-summary .detail > div .product-code 
	{ 		
		font-size: var(--font-size-menu);
		line-height: var(--font-size-menu);
		white-space: nowrap;		
		padding-top: 8px;
		text-transform: uppercase;
		color: var(--colour-secondary-text);
		font-weight: var(--font-weight-semi-bold);		
	}
	.product-summary .detail > div .product-code abbr
	{
		text-transform: uppercase;
		font-weight: var(--font-weight-normal);	
		border: 0px;
		text-decoration: none;		
	}
	.product-summary .detail > div .on-sale 
	{ 				
		color: var(--colour-text-over-sale);
		border-radius: var(--radius-button);
		text-align: center;
		padding: 4px 8px;
		max-height: 26px;
		line-height: 18px;
		align-self: center;
		justify-self: end;
		font-weight: var(--font-weight-semi-bold);
		font-size: var(--font-size-menu);		
		order: -1;		
		background: var(--color-gradient-sale);
		background-size: 800% 800%;
		animation: moveGradient 15s ease infinite;	
		white-space: nowrap;
	}
	.product-summary .detail > div .branch 
	{ 		
		font-size: var(--font-size-menu);
		line-height: var(--font-size-menu);		
		padding-top: 23px;
		position: relative;				
		color: var(--colour-main-text);	
		font-weight: var(--font-weight-bold);	
		text-decoration: underline;
		text-underline-position: under;		
	}
	.product-summary .detail > div .branch.somerset
	{
		color: var(--colour-somerset);
	}
	.product-summary .detail > div .branch.devon
	{
		color: var(--colour-devon);
	}
	
	.product-summary .detail > div .title 
	{ 
		grid-area: title; 
		font-weight: var(--font-weight-bold);
		font-size: 1.7em;
		line-height: var(--font-size-title);
		margin: 16px 0px 0px 0px;
	}

	.product-summary .detail > div .price 
	{ 
		display: flex;
		grid-area: price; 		
		line-height: var(--font-size-title);		
		margin-top: 16px;
		align-items: center;		
		grid-gap: 8px;
		flex-wrap: wrap;		
	}
	.product-summary .detail > div .price span:not([class])
	{
		color: var(--colour-main-text);		
		font-size: var(--font-size-title);
		font-weight: var(--font-weight-semi-bold);
		display: flex;
		align-items: center;
		grid-gap: 8px;		
	}
	.product-summary .detail > div .price .was
	{		
		color: var(--colour-main-text); 
		display: flex;
		align-items: center;
		grid-gap: 8px;
		text-decoration: line-through;		
	}
	.product-summary .detail > div .price:has(.was) span:not([class])
	{
		color: var(--colour-sale); 
	}
	.product-summary .detail > div .price abbr
	{
		color: var(--colour-secondary-text);
		font-size: var(--font-size-cozy-title);
		line-height: var(--font-size-title);
		font-weight: var(--font-weight-normal);
		padding-right: 10px;
		border: 0px;
		text-decoration: none;		
	}
	
	.product-summary .detail > div .price .was:before
	{
		content: 'Was';
		color: var(--colour-secondary-text);
		font-size: var(--font-size-menu);
		line-height: var(--font-size-menu);
		font-weight: var(--font-weight-normal);			
	}
	.product-summary .detail > div .price .was + span:before
	{
		content: 'Now';
		color: var(--colour-secondary-text);
		font-size: var(--font-size-menu);
		line-height: var(--font-size-menu);
		font-weight: var(--font-weight-normal);			
	}
	.product-summary .detail > div .price-disclaimer 
	{ 
		grid-area: price-disclaimer; 		
		color: var(--colour-secondary-text);
		font-size: var(--font-size-standard);
		line-height: var(--font-size-standard);		
		font-weight: var(--font-weight-normal);		
	}
	.product-summary .detail > div .price-disclaimer a
	{
		text-decoration: underline;
	}
	.product-summary .detail > div .spec 
	{ 
		grid-area: spec; 
		font-size: var(--font-size-standard);
		line-height: var(--font-size-standard);
		color: var(--colour-secondary-text);		
		display: flex;
		width: 100%;	
		grid-gap: 8px 4px;    
		white-space: nowrap;
		flex-wrap: wrap;		
	}
	.product-summary .detail > div .spec > span 
	{
		display: block;
		font-size: 1.2em;
		color: var(--colour-secondary-text);
		border: 1px solid var(--colour-stroke);	
		border-radius: var(--radius-nano);	
		padding: 8px;
		background: var(--colour-base);
		height: 32px;
		line-height: 16px; 
		white-space: nowrap;		
	}
	.product-summary .detail > div .spec > span.price-includes
	{
		background: var(--colour-highlight);
		font-weight: var(--font-weight-bold);
	}
	
	.product-summary .detail > div .favourite,
	.product-summary .detail > div .print,
	.product-summary .detail > div .share,
	.product-summary .detail > div .brochure 
	{		
		height: 40px;		
		position: relative;		
		display: grid;
		grid-auto-flow: column;		
		position: relative;
		align-items: center;
		justify-content: center;					
		font-size: var(--font-size-standard);
		line-height: var(--font-size-standard);
		color: var(--colour-main-text);
		cursor: pointer;
		background: var(--colour-base);
		border: 1px solid var(--colour-stroke);		
		border-radius: var(--radius-button);
		grid-template-columns: 40px;		
	}

	.product-summary .detail > div .favourite > span,
	.product-summary .detail > div .print > span,
	.product-summary .detail > div .share > span,
	.product-summary .detail > div .brochure > span
	{
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;		
	}
	
	.product-summary .detail > div .favourite:after,
	.product-summary .detail > div .print:after,
	.product-summary .detail > div .share:after,
	.product-summary .detail > div .brochure: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: 32px;
		height: 32px;
		top: 4px;
		left: 4px;  		
	}
	
	.product-summary .detail > div .favourite:hover,
	.product-summary .detail > div .print:hover,
	.product-summary .detail > div .share:hover,
	.product-summary .detail > div .brochure:hover	
	{
		box-shadow: 0px 1px 2px 0px #000A;				
	}
	
	.product-summary .detail > div .favourite.change:after
	{
		animation: horizontal-spin 1s linear infinite;
	}

	.product-summary .detail > div .favourite:active,
	.product-summary .detail > div .print:active,
	.product-summary .detail > div .share:active,
	.product-summary .detail > div .brochure:active	
	{	
		animation: click .2s ease-in-out forwards;
	}
	
	.product-summary .detail > div .favourite:after
	{
		mask-image: url('/index/filled-heart.svg');
	}
	.product-summary .detail > div .favourite.remove:after
	{				
		background-color: var(--colour-main);
	}
	
	.product-summary .detail > div .print:after
	{
		mask-image: url('/index/printer.svg');
	}
	
	.product-summary .detail > div .share:after
	{
		mask-image: url('/index/share.svg');
	}
	
	.product-summary .detail > div .brochure:after
	{
		mask-image: url('/index/brochure.svg');
	}	
	
	body:not(.jse) .product-summary .detail > div .print,
	body:not(.jse) .product-summary .detail > div .share.not-supported,
	body:not(.jse) .product-summary .detail > div .share
	{
		display: none;
	}		

	.product-summary .detail > div .fpsb
	{
		grid-area: fpsb; 
		display: flex;
		grid-gap: var(--grid-gap-button);
		justify-content: flex-end;
		align-items: center;
	}	
	
	.product-summary .detail > div .telephone:after
	{
		display: none; /* remove default phone icon found on all tel: links */
	}
	
	.product-summary .detail > div .telephone,
	.product-summary .detail > div .enquiry,
	.product-summary .detail > div .details 	
	{ 
		grid-area: telephone; 
		background: var(--colour-secondary);
		color: var(--colour-text-over-secondary);		
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        grid-gap: 3px;	
		padding: 0px;
		font-weight: 700;
		font-size: 18px;
		margin-top: 16px;
	}
	.product-summary .detail > div .enquiry:before,
	.product-summary .detail > div .telephone:before
	{		
		display: block;
		content: '';
		width: 18px;
		height: 18px;
		border-radius: 30px;			
		top: 6px;
		left: 6px;
		background: var(--colour-base);				
		mask-repeat: no-repeat;		
		mask-position: center center;
		mask-size: 17px 14px;				
		mask-image: url(/index/phone.svg);	
	}	
	.product-summary .detail > div .enquiry 
	{ 
		grid-area: enquiry; 
		background: var(--colour-main);
		color: var(--colour-text-over-main);		
	}
	.product-summary .detail > div .details
	{
		grid-area: enquiry; 
		background: var(--colour-main);
		color: var(--colour-text-over-main);		
	}
	.product-summary .detail > div .enquiry:before
	{
		mask-image: url(/index/envelope.svg);
	}
	
	@media only print
	{		
		.product-summary .media
		{
			grid-auto-flow: column;
		}		
		.product-summary .media .thumbs
		{
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			justify-content: center;			
		}			
		.product-summary .media .thumbs label:nth-child(n+10)
		{
			display: none;
		}
		.product-summary .media .large-image input:checked + label
		{
			background: transparent;
		}
		section:first-of-type:has(.product-summary) .crumb-link,
		.product-summary .detail > div .brand,
		.product-summary .detail > div .on-sale,
		.product-summary .detail > div .button,		
		.product-summary .detail > div .print,
		.product-summary .detail > div .share,
		.product-summary .detail > div .favourite,
		.product-summary .detail > div .brochure,
		.product-summary .detail > div .spec,
		.product-summary .media .thumbs label.selected
		{
			display: none;
		}		
		.product-summary .detail > div
		{
			background: transparent;
			order: -1;
			grid-template-areas:         
				"title price"
				"avpc price-disclaimer"
				"branch-summary branch-summary";				
			align-items: center;				
		}
		.product-summary .detail > div .title
		{
			justify-self: start;
		}
		.product-summary .detail > div .fpsb
		{
			display: none;
		}
	}
	@media only screen
	{
		
	}	

	@media screen and (min-width: 800px)
	{
 			
	}
	
	@media screen and (min-width: 1024px)
	{		
		.product-summary .media .overlay .button:has(:checked) + .content > span /* iframe container */
		{			
			width: 62vw;
			aspect-ratio: 15 / 9;
		}	
		.product-summary .detail > div .telephone,
		.product-summary .detail > div .enquiry,
		.product-summary .detail > div .detail > divs	
		{ 
			font-size: 24px;
		}
		.product-summary .detail > div .enquiry:before,
		.product-summary .detail > div .telephone:before
		{					
			width: 24px;
			height: 24px;
			mask-size: 23px 20px;							
		}		
	}
	
	@media screen and (pointer:fine)
	{
		.product-summary .media .large-image label input:checked + img + span img:hover ~ a,		
		.product-summary .media .large-image label input:checked + img + span img + a:hover,
		.product-summary .media .large-image label input:checked + img + span img + a + a:hover,
		.product-summary .media .large-image label input:checked + img + span img + a:hover + a,
		.product-summary .media .large-image label input:checked + img + span img + a:has(+ a:hover)
		{
			display: inline-block;
		}
		.product-summary .media .large-image label input:checked + img + span a:hover
		{
			opacity: 100%;
			box-shadow: 0px 1px 2px 0px #000A;
		}	
		.product-summary .media .large-image label input:checked + img + span a:after
		{
			content: '';
			position: absolute;
			background-color: var(--colour-main-text);
			mask-size: contain;
			mask-position: center center;
			mask-repeat: no-repeat;		
			width: 50%;
			height: 50%;
			mask-image: url(/index/up.svg);
			top: 25%;		
		}
		.product-summary .media .large-image label input:checked + img + span a.left
		{
			left: anchor(left, 0px);
			margin-left: 40px;
		}
		.product-summary .media .large-image label input:checked + img + span a.left:after
		{
			transform: rotate(270deg);
			left: calc(25% - 2px);
		}
		.product-summary .media .large-image label input:checked + img + span a.right
		{
			right: anchor(right, 0px);
			margin-right: 40px;		
		}
		.product-summary .media .large-image label input:checked + img + span a.right:after
		{
			transform: rotate(90deg);
			right: calc(25% - 2px);
		}		
	}