html{box-sizing:border-box;font-size:16px;overflow-x:hidden}@media (width>=600px){body{padding-top:var(--akzo-header-height,150px)}}*,:before,:after{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:inherit;-webkit-tap-highlight-color:transparent;margin:0;padding:0}h1,h2,h3,h4,h5,h6,p{margin:0;font-size:100%;font-weight:400}ul,ol{margin:0;padding:0;list-style:none}dl{margin:0;padding:0}figure{margin:0}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none}img{border:0;max-width:100%;height:auto;display:block}strong{font-weight:700}table{border-collapse:collapse;border-spacing:0}table th,table td{padding:var(--spacing-sm) var(--spacing-md)}table th{margin-bottom:18px;font-size:14px;font-weight:700;line-height:20px}table td{margin-bottom:18px;font-size:14px;font-weight:400;line-height:20px}hr{height:1px;margin:var(--spacing-xl) 0;background-color:var(--color-stroke-default);border:none}input,button,select,textarea{font:inherit;color:inherit;text-overflow:ellipsis;background:0 0;border:none;outline:none}:focus{outline:none}button{cursor:pointer;background:0 0;border:none;padding:0}.button-test{color:#171717;background-color:#0ea5e9;padding:5px}.theme-switcher{border-radius:.5rem;padding:1rem}.theme-switcher:hover{border-color:#0ea5e9}.theme-switcher:focus{border-color:#78716c;outline:none;box-shadow:0 0 0 2px #007bff40}.theme-description{color:#171717;margin-top:.75rem;font-size:.875rem}.title{color:#171717;margin-bottom:1rem;font-size:1.125rem;font-weight:600}.theme-dropdown{width:"fit-content";background-color:#fff;border:2px solid #ccc;border-radius:.5rem;padding:.75rem;font-size:1rem;transition:border-color .3s}.clearfix:after{content:"";clear:both;display:table}.content-wrapper{width:100%;margin:0 auto;padding:0 1.5rem}@media (width<=600px){.content-wrapper{padding:0 1.5rem}}@media (width>=600px){.content-wrapper{padding:0 3rem}.content-wrapper.no-margin-padding{max-width:100%;margin:0;padding:0}}@media (width>=904px){.content-wrapper{padding:0 4.5rem}}@media (width>=1440px){.content-wrapper{max-width:75rem;padding:0}}.top-none{padding-top:0!important}.top-default{padding-top:1.5rem!important}@media (width>=904px){.top-default{padding-top:2.25rem!important}}.top-xl{padding-top:3.375rem!important}@media (width>=904px){.top-xl{padding-top:5rem!important}}.bottom-none{padding-bottom:0!important}.bottom-default{padding-bottom:1.5rem!important}@media (width>=904px){.bottom-default{padding-bottom:2.25rem!important}}.bottom-xl{padding-bottom:3.375rem!important}@media (width>=904px){.bottom-xl{padding-bottom:5rem!important}}.padding-top-xxs{padding-top:.25rem}.padding-top-xs{padding-top:.5rem}.padding-top-s{padding-top:.75rem}.padding-top-m{padding-top:1rem}.padding-top-l{padding-top:1.5rem}.padding-top-xl{padding-top:2rem}.padding-top-xxl{padding-top:3rem}.padding-top-3xl{padding-top:3.5rem}.padding-top-4xl{padding-top:4rem}.padding-top-5xl{padding-top:5rem}.padding-top-6xl{padding-top:7.5rem}.padding-top-none{padding-top:0}.padding-bottom-xxs{padding-bottom:.25rem}.padding-bottom-xs{padding-bottom:.5rem}.padding-bottom-s{padding-bottom:.75rem}.padding-bottom-m{padding-bottom:1rem}.padding-bottom-l{padding-bottom:1.5rem}.padding-bottom-xl{padding-bottom:2rem}.padding-bottom-xxl{padding-bottom:3rem}.padding-bottom-3xl{padding-bottom:3.5rem}.padding-bottom-4xl{padding-bottom:4rem}.padding-bottom-5xl{padding-bottom:5rem}.padding-bottom-6xl{padding-bottom:7.5rem}.padding-bottom-none{padding-bottom:0}.margin-top-xxs{margin-top:.25rem}.margin-top-xs{margin-top:.5rem}.margin-top-s{margin-top:.75rem}.margin-top-m{margin-top:1rem}.margin-top-l{margin-top:1.5rem}.margin-top-xl{margin-top:2rem}.margin-top-xxl{margin-top:3rem}.margin-top-3xl{margin-top:3.5rem}.margin-top-4xl{margin-top:4rem}.margin-top-5xl{margin-top:5rem}.margin-top-6xl{margin-top:7.5rem}.margin-top-none{margin-top:0}.margin-bottom-xxs{margin-bottom:.25rem}.margin-bottom-xs{margin-bottom:.5rem}.margin-bottom-s{margin-bottom:.75rem}.margin-bottom-m{margin-bottom:1rem}.margin-bottom-l{margin-bottom:1.5rem}.margin-bottom-xl{margin-bottom:2rem}.margin-bottom-xxl{margin-bottom:3rem}.margin-bottom-3xl{margin-bottom:3.5rem}.margin-bottom-4xl{margin-bottom:4rem}.margin-bottom-5xl{margin-bottom:5rem}.margin-bottom-6xl{margin-bottom:7.5rem}.margin-bottom-none{margin-bottom:0}.icon{stroke-linecap:round;stroke-linejoin:round;stroke-width:.09375rem;width:1.5rem;height:1.5rem;display:inline-block}.icon-3xl{stroke-width:.375rem;width:7.5rem;height:7.5rem}.icon-xxl{stroke-width:.21875rem;width:3.5rem;height:3.5rem}.icon-xl{stroke-width:.1875rem;width:3rem;height:3rem}.icon-l{stroke-width:.125rem;width:2rem;height:2rem}.icon-s{stroke-width:.0625rem;width:1rem;height:1rem}.heading-xxxl,.heading-xxl,.heading-xl,.heading-l,.heading-m,.heading-s{font-family:var(--brand-font,"Open Sans"), sans-serif}.body,.body-bold,.body-s,.body-s-bold,.body-xs,.body-xs-bold,.overline,.overline-s,.overline-s-bold,.overline--bold,.strikethrough-header-s,.strikethrough,.strikethrough-s,.label,.body-link,.body-link-bold,.body-s-link,.body-s-link-bold,.body-xs-link,.body-xs-link-bold,.button,.button-s,.button-xs{font-family:var(--base-font,"Open Sans"), sans-serif}.heading-xxxl{font-size:2.5rem;font-weight:700;line-height:2.75rem}@media (width>=904px){.heading-xxxl{font-size:4rem;line-height:4rem}}.heading-xxl{font-size:2.25rem;font-weight:700;line-height:2.5rem}@media (width>=904px){.heading-xxl{font-size:3.375rem;line-height:3.5rem}}.heading-xl{font-size:2rem;font-weight:700;line-height:2.25rem}@media (width>=904px){.heading-xl{font-size:2.75rem;line-height:3rem}}.heading-l{font-size:1.75rem;font-weight:700;line-height:2rem}@media (width>=904px){.heading-l{font-size:2.25rem;line-height:2.5rem}}.heading-m{font-size:1.5rem;font-weight:700;line-height:1.75rem}@media (width>=904px){.heading-m{font-size:1.75rem;line-height:2rem}}.heading-s{font-size:1.25rem;font-weight:700;line-height:1.5rem}.body-xs{margin-bottom:16px;font-size:12px;font-weight:400;line-height:16px}.body-xs-bold{margin-bottom:16px;font-size:12px;font-weight:700;line-height:16px}.body-s{margin-bottom:18px;font-size:14px;font-weight:400;line-height:20px}.body-s-bold{margin-bottom:18px;font-size:14px;font-weight:700;line-height:20px}.body{margin-bottom:20px;font-size:16px;font-weight:400;line-height:24px}.body-bold{margin-bottom:20px;font-size:16px;font-weight:700;line-height:24px}.overline{text-transform:uppercase;margin-bottom:18px;font-size:14px;font-weight:400;line-height:16px}.overline--bold{text-transform:uppercase;margin-bottom:18px;font-size:14px;font-weight:700;line-height:16px}.overline-s{text-transform:uppercase;margin-bottom:18px;font-size:12px;font-weight:400;line-height:16px}.overline-s-bold{text-transform:uppercase;margin-bottom:18px;font-size:12px;font-weight:700;line-height:16px}.strikethrough-header-s{margin-bottom:24px;font-size:20px;font-weight:700;line-height:24px;text-decoration:line-through}.strikethrough{margin-bottom:20px;font-size:16px;font-weight:400;line-height:20px;text-decoration:line-through}.strikethrough-s{margin-bottom:18px;font-size:14px;font-weight:400;line-height:16px;text-decoration:line-through}.label{margin-bottom:18px;font-size:14px;font-weight:600;line-height:16px}.body-link{margin-bottom:20px;font-size:16px;font-weight:400;line-height:20px;text-decoration:underline}.body-link-bold{margin-bottom:20px;font-size:16px;font-weight:700;line-height:20px;text-decoration:underline}.body-s-link{margin-bottom:18px;font-size:14px;font-weight:400;line-height:16px;text-decoration:underline}.body-s-link-bold{margin-bottom:18px;font-size:14px;font-weight:700;line-height:16px;text-decoration:underline}.body-xs-link{margin-bottom:16px;font-size:12px;font-weight:400;line-height:16px;text-decoration:underline}.body-xs-link-bold{margin-bottom:16px;font-size:12px;font-weight:700;line-height:16px;text-decoration:underline}.button-xs{margin-bottom:16px;font-size:12px;font-weight:700;line-height:16px}.button-s{margin-bottom:12px;font-size:14px;font-weight:700;line-height:16px}.button{margin-bottom:12px;font-size:16px;font-weight:700;line-height:20px}:host{box-sizing:border-box;--swatch-dot-gap:4px;--swatch-dot-size:2px;width:100%;min-width:120px;max-width:100%;display:block;container-type:inline-size}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@container (width<=150px){.selector.unselected{min-height:60px;padding:var(--spacing-s);gap:var(--spacing-2xs)}.selector.unselected .label{font-size:var(--font-size-xs);line-height:1.2}.selector.selected{padding:var(--spacing-s)}.selector.selected.default{height:84px}.selector.selected.small{height:72px}.name{font-size:var(--font-size-xs)}}@container (width<=200px) and (width>=151px){.selector.unselected{min-height:72px;padding:var(--spacing-m)}.selector.unselected .label{font-size:var(--font-size-s);line-height:1.2}.selector.selected{padding:var(--spacing-m)}.selector.selected.default{height:120px}.selector.selected.small{height:96px}.name{font-size:var(--font-size-s)}}@container (width<=250px) and (width>=201px){.selector.selected.default{height:140px}.selector.selected.small{height:100px}}.selector{opacity:1;cursor:pointer;width:100%;transition:border var(--motion-duration-medium-01) var(--motion-easing-standard), background-color var(--motion-duration-medium-01) var(--motion-easing-standard), filter var(--motion-duration-medium-01) var(--motion-easing-standard);background:0 0;border:none;padding:0}.selector.unselected{justify-content:center;align-items:center;gap:var(--spacing-xs);height:auto;min-height:84px;padding:var(--spacing-m);box-sizing:border-box;border:none;border-radius:0;flex-direction:column;display:flex;position:relative;background:var(--color-surface-neutral-option2,#f6f6f6)!important}.selector.unselected:before{content:"";pointer-events:none;background:repeating-linear-gradient(to right, var(--color-stroke-strong) 0 8px, transparent 8px 16px) top/100% 2px repeat-x, repeating-linear-gradient(to right, var(--color-stroke-strong) 0 8px, transparent 8px 16px) bottom/100% 2px repeat-x, repeating-linear-gradient(to bottom, var(--color-stroke-strong) 0 8px, transparent 8px 16px) left/2px 100% repeat-y, repeating-linear-gradient(to bottom, var(--color-stroke-strong) 0 8px, transparent 8px 16px) right/2px 100% repeat-y;position:absolute;inset:0}.selector.unselected akzo-icon{color:var(--color-icon-subdued);flex-shrink:0}.selector.unselected .label{font-size:var(--font-size-s);color:var(--color-text-functional);text-align:center;word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;hyphens:auto;box-sizing:border-box;white-space:normal;width:100%;max-width:100%;margin:0;padding:0;line-height:1.3}.selector.unselected:focus,.selector.unselected:focus-visible{border-color:var(--color-interactive-primary-default)}.selector.selected{cursor:default;border:none;border-top-right-radius:26px;border-bottom-left-radius:26px;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:18px;display:flex;position:relative;overflow:hidden}.selector.selected.small{border-top-right-radius:26px;border-bottom-left-radius:26px;height:104px}.selector.selected.large{border-top-right-radius:32px;border-bottom-left-radius:32px;gap:16px;width:240px;height:240px;padding:24px}.selector.selected.large .header{margin-bottom:16px}.selector.selected.large .name{font-size:var(--font-size-l,18px)}.selector.selected.large .buttons{gap:16px;margin-top:auto}.selector.selected.large .buttons .button{font-size:16px}.selector.selected.default{height:auto}@media (width<=600px){.selector.selected.default{height:100%}}.selector .label{font-size:var(--font-size-m);color:var(--color-text-title);white-space:nowrap}.selector .swatch-bg-image{pointer-events:none;user-select:none;z-index:0;background-position:0 0;background-repeat:repeat;background-size:contain;width:100%;height:100%;position:absolute;top:0;left:0}.selector .swatch{width:var(--size-l);height:var(--size-l);border-radius:var(--radius-s);background-color:var(--color-surface-neutral-option3)}.selector .header{z-index:1;justify-content:space-between;align-items:flex-start;width:100%;display:flex;position:relative}.selector .name{word-break:break-word;overflow-wrap:break-word;hyphens:auto;flex:1;min-width:0;margin:0;font-size:1.25rem;font-weight:600}.selector .buttons{z-index:1;flex-direction:column;width:100%;margin-top:16px;display:flex;position:relative}.selector .buttons .button{text-align:left;cursor:pointer;text-underline-offset:6px;align-self:flex-start;align-items:center;gap:var(--spacing-xxs);background:0 0;border:none;margin-left:0;padding:0;font-size:14px;font-weight:700;text-decoration:underline;display:flex;position:relative}.selector .buttons .button .button-icon{flex-shrink:0}.selector .buttons .button:hover{opacity:.8;filter:brightness(1.1)}.selector .buttons .button:focus{outline:none}.selector .buttons .button:focus-visible{outline-offset:2px;outline:2px solid}.selector .buttons .button:active{opacity:.6}.selector:focus{outline:3px solid var(--color-interactive-focus-default);outline-offset:2px;z-index:1;position:relative}.selector:focus-visible{outline:3px solid var(--color-interactive-focus-default);outline-offset:2px;z-index:1;box-shadow:0 0 0 1px var(--color-surface-neutral-option1), 0 0 0 4px var(--color-interactive-focus-default);position:relative}.selector:focus:not(:focus-visible){outline:1px solid var(--color-stroke-default);outline-offset:1px}@media (prefers-contrast:high){.selector:focus,.selector:focus-visible{outline:3px solid highlight}}.selector.selected:focus,.selector.selected:focus-visible{box-shadow:0 0 0 2px var(--color-surface-neutral-option1), 0 0 0 5px var(--color-interactive-focus-default), inset 0 0 0 2px #ffffff4d}