body{font-family: var(--wt-font); background: rgb(246, 248, 247); color: rgb(24, 43, 35);}
#catalogView{display: block;}
#detailView{display: none;}
body.detail #catalogView{display: none;}
body.detail #detailView{display: block;}
.shell{width: min(1280px, 100% - 48px);}
.catalog-hero{position: relative; min-height: 520px; display: flex; align-items: center; background: rgb(37, 67, 46); color: white; isolation: isolate; padding: 0px;}
.catalog-hero .hero-visual{position: absolute; inset: 0px; margin: 0px; width: 100%; height: 100%; border: 0px; border-radius: 0px; overflow: hidden; z-index: -2;}
.catalog-hero .hero-visual img{width: 100%; height: 100%; object-fit: cover; object-position: 64% 52%; display: block; aspect-ratio: auto;}
.catalog-hero::after{content: ""; position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(13, 35, 25, 0.86) 0%, rgba(13, 35, 25, 0.62) 40%, rgba(13, 35, 25, 0.12) 78%); z-index: -1;}
.catalog-hero .hero-inner{display: block; width: min(1280px, 100% - 48px); padding: 76px 0px;}
.catalog-hero .hero-copy{max-width: 660px; padding: 0px;}
.catalog-hero h1{font: 900 clamp(34px,3.7vw,52px)/1.14 var(--wt-heading); letter-spacing: -0.035em; color: rgb(255, 255, 255); margin: 0px 0px 22px;}
.catalog-hero h1 em{font: inherit; color: inherit;}
.catalog-hero p{font: 400 clamp(16px,1.5vw,19px)/1.6 var(--wt-font); color: rgb(241, 245, 242); max-width: 610px; margin: 0px 0px 28px;}
.catalog-hero .hero-button{background: #2e7d32; color: white; border-radius: 4px; padding: 14px 24px; font: 800 12px/1.4 var(--wt-heading); text-transform: uppercase; letter-spacing: 0.025em;}
.material-nav{min-height: 84px;}
.material-link{font-family: var(--wt-font); font-size: 18px; font-weight: 700;}
.catalog-heading h2{font: 800 32px/1.25 var(--wt-heading); letter-spacing: -0.025em;}
.p-body h3{font-family: var(--wt-font); font-size: 18px;}
.p-sku{font-size: 14px;}
.p-spec{font-size: 14px;}
#detailView{--font: var(--wt-font); font-family: var(--wt-font);}
#detailView .wrap{width: min(1280px, 100% - 48px);}
#detailView .swatches{display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;}
#detailView .swatch{width: 46px; height: 46px; min-width: 46px; padding: 3px; border: 1px solid rgb(220, 228, 222); border-radius: 10px; background: white; cursor: pointer; position: relative;}
#detailView .swatch span{display: block; width: 100%; height: 100%; border-radius: 7px; background: var(--swatch-color); border: 1px solid rgba(0, 0, 0, 0.024);}
#detailView .swatch[aria-pressed="true"]{border: 2px solid rgb(37, 134, 90); padding: 2px; box-shadow: rgb(37, 134, 90) 0px 0px 0px 1px;}
#detailView .hint{font-size: 13px; line-height: 1.6; color: rgb(101, 113, 107);}
#detailView .finish-selection{font-size: 12px; color: rgb(101, 113, 107); margin: 10px 0px 0px; min-height: 20px;}
#detailView .swatch-head h3{font-family: var(--wt-font); font-size: 17px;}
#detailView .film-cta a{font-size: 14px;}
.sidebar-search{display: flex; align-items: center;}
.sidebar-search input{line-height: 1.4; min-width: 0px;}
@media (max-width: 720px) {.shell, #detailView .wrap{width: calc(100% - 32px);}
.catalog-hero{min-height: 470px;}
.catalog-hero .hero-inner{width: calc(100% - 32px); padding: 58px 0px;}
.catalog-hero .hero-visual img{object-position: 65% 50%;}
.catalog-hero::after{background: linear-gradient(90deg, rgba(13, 35, 25, 0.85), rgba(13, 35, 25, 0.55));}
.catalog-hero h1{font-size: 36px; max-width: 550px;}
.catalog-hero p{font-size: 17px;}
.material-link{font-size: 16px;}
.catalog-heading h2{font-size: 27px;}
#detailView .tech th{width: 40%; min-width: 0px;}
#detailView .tech td{width: 60%;}}
#detailTitle:focus,#catalogHeading:focus{outline:none}

.catalog-hero .hero-button:hover{background:#1b5e20}
#detailView .film-cta{text-decoration:none}
#detailView .film-cta a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;border-bottom:0;box-shadow:none}