.product-features
{
    margin: var(--margin-details-gap) var(--grid-gap-standard-horizontal);
    padding: 0px 8px;
}
@media screen and (min-width: 1024px)
{
	main section:has(.product-features) 
	{
		grid-column: 2;
		padding-right: var(--grid-gap-wide-horizontal);
	}
	.product-features
	{
		margin: var(--margin-details-gap) 0px;
	}
}

main section:has(.product-features) {	
	width: 100%;	
}

.product-features
{	
	padding: 0px 8px;
	display: grid;
    grid-gap: var(--margin-section-gap);
	grid-gap: 0px;
    align-items: start;
    grid-template-areas:        
        "header"
        "description";        
    justify-items: start;
}

.product-features details
{
	width: 100%;
}

.product-features summary
{	    
	grid-area: header;
    font-size: var(--font-size-title);
    color: var(--colour-main-text);	
	font-weight: var(--font-weight-bold);
	list-style: none;	
	display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr min-content;	
	cursor: pointer;
    align-items: center;
	user-select: none;	
}
.product-features:has(details:open) summary
{
	padding-bottom: 16px;
}

.product-features summary:after 
{
    content: '';
    background: var(--colour-main-text);
    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);
    cursor: pointer;
}

.product-features details:open summary:after 
{
	transform: rotate(0deg);
}

.product-features details:not([open]) ul
{
	animation-name: none;
	visibility: hidden;
}

.product-features details[open] ul
{
	visibility: visible;
	animation-iteration-count: 1;
    animation-duration: 1s;    
    animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
    animation-fill-mode: forwards;
    animation-name: open-down;
}

.product-features ul li
{
    min-height: 45px;
    padding: 10px 0px 10px 32px;    	
	margin: 10px 0px 10px 10px;	
}

.product-features ul li:nth-child(odd) 
{
    background-color: var(--colour-base);
}

@media print
{
	.product-features details
	{
		margin: 0cm .5cm;
	}	
	.product-features ul li
	{
		margin: 0px 6px;
	}
	
	.product-features details:not([open])
	{
		display: none;
	}
	
	.product-features summary:after 
	{
		display: none;
	}
}