
:root{
    --brand-red:#d62828;
    --brand-gray:#777e86;
    --ink:#333;
    --bg:#f7f7f7;
    --radius:8px;
    --shadow:0 2px 12px rgba(0,0,0,.08);
    --ease:cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html, body { min-height: 100%; height: auto; }
body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    color:var(--ink);
    background:var(--bg);
    line-height:1.6;
}

.container{ max-width:1200px; margin:0 auto; padding:0 1rem; }



.product{
    display:grid;
    grid-template-columns: 420px 1fr;
    gap:2rem;
    padding:2rem 0 4rem;
    align-items:start;
}
.product__image img{ width:100%; height:auto; display:block; object-fit:contain; }
.product__title{ font-size:2.4rem; margin:0 0 1rem; }


.acc{ display:block; }

.acc__item + .acc__item{ margin-top:.85rem; }


.acc__item:nth-child(odd) .acc__trigger{ background:var(--brand-red); }
.acc__item:nth-child(even) .acc__trigger{ background:var(--brand-gray); }

.acc__trigger{
    width:100%;
    border:0;
    color:#fff;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.02em;
    padding:1rem 1.25rem;
    border-radius:var(--radius);
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-shadow:var(--shadow);
    cursor:pointer;
    transition:filter .2s var(--ease);
}
.acc__trigger:hover{ filter:brightness(0.95); }


.chev{
    display:inline-block;
    width:0; height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:6px solid #fff;   
    transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.acc__trigger[aria-expanded="true"] .chev{
    transform: rotate(180deg);      
}



.acc__panel{
    overflow:hidden;
    max-height:0;           
    transition:max-height .35s var(--ease), opacity .25s var(--ease);
    opacity:0;
    border-radius:0 0 var(--radius) var(--radius);
    background:#fff;
    border:1px solid #e9e9e9;
    border-top:none;
    box-shadow:var(--shadow);
}
.acc__panel.is-open{ opacity:1; }
.acc__inner{ padding:1rem 1.25rem; }


.footer{ background:#333; color:#fff; text-align:center; padding:1rem 0; }


@media (max-width: 900px){
    .product{ grid-template-columns: 1fr; }
    .product__image{ max-width:520px; }
    .product__title{ margin-top:1rem; }
}


html {
    scrollbar-gutter: stable;  
}


@supports not (scrollbar-gutter: stable) {
    body { overflow-y: scroll; }          
}


body { overflow-x: hidden; }

.product-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:16px;
}
.product-table thead th{
    background:#9ea2a6;
    color:#fff;
    text-align:left;
    padding:12px 14px;
}
.product-table thead th:first-child{ border-top-left-radius:6px; }
.product-table thead th:last-child{ border-top-right-radius:6px; }

.product-table td{
    background:#fff;
    padding:14px;
    border-top:1px solid #e5e5e5;
}
.product-table tbody tr:nth-child(even) td{ background:#f7f7f7; }


.product-table th:nth-child(1), .product-table td:nth-child(1){ width:16%; }
.product-table th:nth-child(3), .product-table td:nth-child(3){ width:16%; }
.product-table th:nth-child(4), .product-table td:nth-child(4){ width:12%; }

.product-table--two td:first-child { width: 70%; }
.product-table--two .right { text-align: right; white-space: nowrap; }


.acc__inner ul,
.acc__inner ol {
    
    padding-left: 1.25rem !important;
    margin: .5rem 0 .9rem;
}

.acc__inner li {
    list-style: disc outside;     
    padding-left: 0 !important;   
    text-indent: 0 !important;    
    margin: .35rem 0;
}


.acc__inner li li {
    padding-left: 1rem;
    list-style: circle outside;
}
