.page-motion .material-visual{animation:none}
.material-copy>.colours{margin-top:10px}
.sample>img{transition:opacity .24s ease}
.sample>img.changing{opacity:.2}
.swatch-grid figure{cursor:pointer;border-radius:50%;outline:none}
.swatch-grid figure.active img{box-shadow:0 0 0 3px var(--cream),0 0 0 5px var(--olive)}
.portland .swatch-grid figure.active img{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--olive)}
.swatch-grid figure:focus-visible img{box-shadow:0 0 0 3px var(--cream),0 0 0 6px var(--ink)}
.portland .swatch-grid figure:focus-visible img{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--ink)}
@media(prefers-reduced-motion:reduce){.sample>img{transition:none}}
@media(max-width:820px){.material{padding:46px 0!important}.material-grid{display:flex!important;flex-direction:column;gap:22px!important}.material-copy{display:contents}.material-copy .title-row{order:1}.material-copy .lead{order:2;margin:0!important}.material-copy .colours{order:3;width:100%;margin-top:2px!important}.material-visual{order:4;width:100%;margin-top:4px}.title-row{display:flex!important;align-items:center;justify-content:space-between;gap:12px;width:100%}.title-row h2{min-width:0}.title-row>.benefit,.title-row>.benefits{margin-top:0!important;margin-left:auto;justify-content:flex-end;flex-shrink:0}.colours h3{margin-bottom:12px}.swatch-grid{row-gap:10px}.tier{margin-top:12px}}
@media(max-width:480px){.material{padding:38px 0!important}.material-grid{gap:18px!important}.title-row h2{font-size:clamp(2.2rem,12vw,3.2rem)}.benefit{padding:7px 10px;font-size:.68rem}.benefits{gap:5px}.sample{aspect-ratio:1.2!important}}

html[lang="th"] .materials-page .material .title-row h2{line-height:1.02;min-width:0}
html[lang="th"] .materials-page .title-row>.benefit,html[lang="th"] .materials-page .benefits .benefit{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;white-space:nowrap!important;line-height:1.2;letter-spacing:0}
html[lang="th"] .materials-page .help h2{line-height:1.08}
html[lang="th"] .materials-page .help .wrap{align-items:flex-end}
html[lang="th"] .materials-page .help .wrap>div{min-width:0;flex:1}
html[lang="th"] .materials-page .help a{align-self:flex-end;flex-shrink:0;line-height:1.25;margin-bottom:0}
html[lang="th"] .materials-page .intro>.wrap>span{display:block;margin-bottom:20px}
html[lang="th"] .materials-page .intro h1{margin:0 0 14px;line-height:1.08}
html[lang="th"] .materials-page .intro p{line-height:1.75}

.portland .title-row {
  flex-wrap: wrap;
}

.portland .title-row > .benefits {
  max-width: 100%;
  margin-left: 0;
  justify-content: flex-start;
}

html[lang="th"] .materials-page .intro{padding-block:72px 64px}
html[lang="th"] .materials-page .intro>.wrap>span{margin-bottom:12px}
html[lang="th"] .materials-page .intro h1{margin-bottom:10px;line-height:1.08;letter-spacing:normal}
@media(max-width:580px){html[lang="th"] .materials-page .intro{padding-block:44px 38px}}

.intro .materials-title > span{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.materials-title-th,.materials-title br,html[lang="th"] .materials-title-en{display:none}
html[lang="th"] .materials-title-th{display:inline}
@media (580px < width <= 850px){.materials-title .materials-break-tablet{display:inline}}
@media (max-width:580px){.materials-title .materials-break-mobile{display:inline}}