:root{--dulux-dark-blue:#0B1B34;--dulux-primary-blue:#002C65;}.spider-chart-container{margin:0 auto;border-radius:8px;display:flex;flex-wrap:wrap;justify-content:space-between;}.spider-chart-header-section{width:100%;text-align:center;margin-bottom:25px;}.spider-chart-header-section h1{color:var(--dulux-dark-blue);font-family:Dulux Headline;font-size:32px;font-style:normal;font-weight:700;line-height:120%;}.spider-chart-header-section h2{color:var(--Black,#001325);font-size:16px;font-style:normal;font-weight:400;line-height:150%;}.legend-container{display:flex;flex-wrap:wrap;width:100%;margin-bottom:20px;justify-content:space-between;}.legend{display:flex;flex-wrap:wrap;gap:12px 24px;}.legend-item{flex:0 0 calc(25% - 18px);box-sizing:border-box;}.legend-item{display:flex;align-items:center;margin-bottom:8px;padding:5px;border-radius:4px;cursor:pointer;transition:background-color 0.2s;}.legend-item:hover{background-color:#f0f0f0;}.legend-item.inactive{opacity:0.5;}.legend-item.inactive .product-name{text-decoration:line-through;}.color-box{display:inline-block;width:16px;height:16px;margin-right:8px;border-radius:3px;}.product-name{font-size:14px;position:relative;}.legend-item.inactive .product-name::before{content:"";position:absolute;top:50%;left:-5px;right:-5px;height:1px;background-color:#000;transform:translateY(-50%);}.chart-container-wrapper{display:flex;flex-direction:row;width:100%;justify-content:end;}.chart-container{width:100%;height:500px;margin:0 auto;position:relative;}.scale-container{position:absolute;text-align:right;margin-top:20px;align-self:flex-end;}.scale-container h3{margin-bottom:5px;font-size:16px;color:var(--dulux-dark-blue);font-weight:600;}.scale-container p{margin:3px 0;font-size:14px;}@media (max-width:1300px){.chart-container{width:90%;}}@media (max-width:768px){.spider-chart-container{padding-inline:16px;}.spider-chart-header-section h1{font-size:26px;}.legend-container{flex-direction:column;}.legend{flex-direction:column;flex-wrap:nowrap;}.legend-item{flex:1 0 auto;}.chart-container-wrapper{flex-direction:column;}.chart-container{width:100%;height:300px;}.scale-container{position:relative;margin-top:0;text-align:left;align-self:flex-start;}}