#detailView{--green-900: #103d2b; --green-800: #15553a; --green-700: #1b6d48; --green-600: #25865a; --green-50: #f4f8f5; --ink: #18221d; --muted: #65716b; --light: #8c9691; --line: #e1e7e3; --bg: #f6f8f7; --radius: 14px; --shadow: 0 1px 2px rgba(16,40,28,.05),0 12px 30px -18px rgba(16,40,28,.2); --font: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
#detailView *{box-sizing: border-box;}
html{scroll-behavior: smooth;}
#detailView{margin: 0px; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.55;}
#detailView a{color: inherit; text-decoration: none;}
#detailView button,#detailView input,#detailView select,#detailView textarea{font: inherit;}
#detailView button{cursor: pointer;}
#detailView img{display: block; max-width: 100%;}
#detailView .wrap{width: min(1280px, 100% - 40px); margin: auto;}
#detailView .eyebrow{font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-600);}
#detailView .header{position: sticky; top: 0px; z-index: 60; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);}
#detailView .nav{display: flex; align-items: center; gap: 28px; margin-left: 8px;}
#detailView .btn{display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 9px; padding: 11px 18px; font-weight: 800; font-size: 0.84rem; transition: 0.18s;}
#detailView .btn-primary{background: var(--green-700); color: rgb(255, 255, 255);}
#detailView .btn-primary:hover{background: var(--green-800); transform: translateY(-1px);}
#detailView .btn-outline{background: rgb(255, 255, 255); color: var(--green-800); border-color: var(--green-700);}
#detailView .btn-outline:hover{background: var(--green-50);}
#detailView .search{position: relative;}
#detailView .search input{width: 100%; padding: 10px 11px 10px 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--green-50); outline: 0px; font-size: 0.82rem;}
#detailView .search input:focus{border-color: var(--green-600); background: rgb(255, 255, 255);}
#detailView .search span{position: absolute; left: 11px; top: 9px; color: var(--light);}
#detailView .check{display: flex; align-items: center; gap: 8px; padding: 5px 0px; font-size: 0.81rem; color: rgb(70, 82, 75); cursor: pointer;}
#detailView .check input{width: 15px; height: 15px; accent-color: var(--green-600);}
#detailView .count{margin-left: auto; color: var(--light); font-size: 0.72rem;}
#detailView .result{font-size: 0.84rem; color: var(--muted);}
#detailView .result b{color: var(--ink);}
#detailView .sort{margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--muted);}
#detailView .sort select{border: 1px solid var(--line); border-radius: 8px; background: rgb(255, 255, 255); padding: 8px 10px; color: var(--ink); outline: 0px;}
#detailView .card{background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: 0.18s; display: flex;}
#detailView .card:hover{transform: translateY(-4px); box-shadow: rgba(16, 40, 28, 0.25) 0px 18px 42px -18px; border-color: rgb(203, 222, 210);}
#detailView .sku{font-size: 0.77rem; color: var(--green-700); font-weight: 850; letter-spacing: 0.03em;}
#detailView .name{font-size: 0.96rem; font-weight: 820; margin-top: 3px;}
#detailView .meta{font-size: 0.75rem; color: var(--muted); margin-top: 6px;}
#detailView .profile{font-size: 0.73rem; color: var(--green-700); font-weight: 750; margin-top: 7px; min-height: 18px;}
#detailView .view{font-size: 0.78rem; font-weight: 800; color: var(--green-700);}
#detailView .subtype{font-size: 0.68rem; color: var(--light); text-align: right; max-width: 52%;}
#detailView{display: none;}
#detailView{display: block;}
#detailView .crumb{padding: 24px 0px 8px; font-size: 0.78rem; color: var(--muted);}
#detailView .crumb a{color: var(--green-700); font-weight: 750;}
#detailView .detail-hero{display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; padding: 16px 0px 34px;}
#detailView .gallery{background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);}
#detailView .main-image{aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: grid; place-items: center; position: relative;}
#detailView .main-image img{width: 100%; height: 100%; object-fit: contain; padding: 20px;}
#detailView .swatch-head{display: flex; justify-content: space-between; gap: 10px; margin: 17px 0px 8px;}
#detailView .swatch-head h3{font-size: 0.9rem; margin: 0px;}
#detailView .selected{font-size: 0.72rem; color: var(--green-700); font-weight: 800;}
#detailView .hint{font-size: 0.7rem; color: var(--light); margin: 0px 0px 10px;}
#detailView .swatches{display: flex; gap: 10px; flex-wrap: wrap;}
#detailView .swatch{width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgb(255, 255, 255); outline: 1px solid var(--line); background: var(--c); position: relative;}
#detailView .swatch.active{outline: 2px solid var(--green-700); outline-offset: 2px;}
#detailView .info{padding-top: 6px;}
#detailView .detail-type{display: inline-flex; align-items: center; gap: 4px; width: max-content; max-width: 100%; margin-bottom: 10px; padding: 5px 10px; border: 1px solid rgb(213, 231, 220); border-radius: 999px; background: var(--green-50); color: var(--green-700); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; text-transform: none; line-height: 1.2;}
#detailView .info h1{font-size: clamp(1.8rem, 3vw, 2.45rem); line-height: 1.08; letter-spacing: -0.03em; margin: 7px 0px 12px;}
#detailView .tagline{font-size: 0.92rem; color: var(--muted); max-width: 620px; margin-bottom: 18px;}
#detailView .quick{border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: rgb(255, 255, 255); margin-bottom: 18px;}
#detailView .qrow{display: grid; grid-template-columns: 145px 1fr; border-bottom: 1px solid var(--line); font-size: 0.82rem;}
#detailView .qrow:last-child{border-bottom: 0px;}
#detailView .qrow dt{background: var(--green-50); font-weight: 800; color: var(--green-900); padding: 9px 12px;}
#detailView .qrow dd{margin: 0px; padding: 9px 12px; color: rgb(70, 82, 75);}
#detailView .detail-actions{display: flex; gap: 10px; flex-wrap: wrap;}
#detailView .tabs{background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 36px;}
#detailView .tabbar{display: flex; overflow: auto; border-bottom: 1px solid var(--line);}
#detailView .tab{border-width: 0px 0px 3px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: none; background: rgb(255, 255, 255); padding: 15px 18px; font-weight: 800; font-size: 0.8rem; color: var(--muted); white-space: nowrap;}
#detailView .tab.active{color: var(--green-800); border-color: var(--green-600);}
#detailView .tab:focus-visible{outline: rgb(43, 138, 90) solid 2px; outline-offset: -2px;}
#detailView .swatch{box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 0px 1px inset;}
#detailView .panel{display: none; padding: 26px;}
#detailView .panel.active{display: block;}
#detailView .panel h2{font-size: 1.15rem; margin: 0px 0px 9px;}
#detailView .panel h3{font-size: 0.92rem; margin: 20px 0px 9px;}
#detailView .panel p{font-size: 0.86rem; color: rgb(70, 82, 75); margin: 0px 0px 12px;}
#detailView .tech{width: 100%; border-collapse: collapse; font-size: 0.82rem;}
#detailView .tech th,#detailView .tech td{padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left;}
#detailView .tech th{width: 230px; background: var(--green-50); color: var(--green-900);}
#detailView .tech td{color: rgb(70, 82, 75);}
#detailView .cert-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px;}
#detailView .cert-card{background: var(--green-900); color: rgb(255, 255, 255); border-radius: 7px; padding: 16px 12px; min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;}
#detailView .cert-icon{width: 26px; height: 26px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; margin-bottom: 8px;}
#detailView .cert-card strong{font-size: 0.76rem; line-height: 1.2;}
#detailView .cert-card span{font-size: 0.59rem; line-height: 1.35; color: rgb(216, 232, 223); margin-top: 4px;}
#detailView .cert-intro{max-width: 850px;}
@media (max-width: 760px) {#detailView .cert-grid{grid-template-columns: repeat(2, 1fr);}
#detailView .panel{padding: 20px;}}
#detailView .close{border: 1px solid var(--line); background: rgb(255, 255, 255); border-radius: 50%; width: 34px; height: 34px; font-size: 1.2rem; color: var(--muted);}
#detailView .field{display: flex; flex-direction: column; gap: 5px;}
#detailView .field label{font-size: 0.75rem; font-weight: 800; color: rgb(68, 80, 72);}
#detailView .field input,#detailView .field textarea{border: 1px solid var(--line); border-radius: 8px; padding: 10px; outline: 0px;}
#detailView .field input:focus,#detailView .field textarea:focus{border-color: var(--green-600);}
#detailView .field textarea{min-height: 110px; resize: vertical;}
@media (max-width: 1040px) {#detailView .detail-hero{grid-template-columns: 1fr 1fr;}}
@media (max-width: 780px) {#detailView .wrap{width: min(100% - 28px, 680px);}
#detailView .nav{display: none;}
#detailView .meta{font-size: 0.69rem;}
#detailView .detail-hero{grid-template-columns: 1fr; gap: 22px;}
#detailView .panel{padding: 20px 16px;}}
@media (max-width: 450px) {#detailView .card .name{font-size: 0.84rem;}
#detailView .card .meta{font-size: 0.67rem;}
#detailView .sort{margin-left: 0px; width: 100%; justify-content: flex-end;}
#detailView .qrow{grid-template-columns: 120px 1fr;}}
#detailView #catalog,#detailView{scroll-margin-top: 96px;}
@media (max-width: 780px) {#detailView .check{min-height: 40px; padding: 7px 0px;}
#detailView .check input{width: 18px; height: 18px;}}
#detailView .main-image{background: rgb(255, 255, 255);}
#detailView .gallery .main-image img{padding: 0px;}
#detailView .media-stage{position: relative; width: 100%; height: 100%;}
#detailView .media-stage img{position: static;}
@media (max-width: 640px) {#detailView #search{font-size: 16px;}}
#detailView .film-cta{display: flex; flex-direction: column; gap: 7px; margin-top: 15px;}
#detailView .film-cta a{font-size: 0.78rem; font-weight: 800; color: var(--green-700);}
#detailView .film-cta a:hover{text-decoration: underline;}
#detailView .feat-list{list-style: none; padding: 0px; margin: 6px 0px 4px; display: grid; gap: 11px;}
#detailView .feat-list li{display: flex; gap: 11px; align-items: flex-start; font-size: 0.85rem; color: rgb(70, 82, 75); margin: 0px;}
#detailView .feat-list .fi{flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--green-50); display: grid; place-items: center; color: var(--green-700); margin-top: 1px;}
#detailView .feat-list b{color: var(--ink);}
#detailView .cert-grid{grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important;}
#detailView .cert-card{cursor: default; transition: transform 0.2s, box-shadow 0.2s; background: linear-gradient(160deg, rgb(22, 102, 63), rgb(13, 63, 40)) !important; border-radius: 10px !important; padding: 28px 20px !important; min-height: 0px !important;}
#detailView .cert-card:hover{transform: translateY(-4px); box-shadow: rgba(13, 63, 40, 0.3) 0px 12px 24px;}
#detailView .cert-icon{background: rgba(255, 255, 255, 0.14); border-radius: 50%; display: grid; place-items: center; width: 52px !important; height: 52px !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; font-size: 22px !important; margin: 0px auto 14px !important;}
#detailView .cert-title{font-size: 15px; font-weight: 800; letter-spacing: 0.2px; margin-bottom: 6px;}
#detailView .cert-sub{font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.82); line-height: 1.5;}
@media (max-width: 900px) {#detailView .cert-grid{grid-template-columns: repeat(2, 1fr) !important;}}
@media (max-width: 600px) {#detailView .cert-grid{grid-template-columns: 1fr !important;}}
@media (prefers-reduced-motion: reduce) {#detailView .cert-card{transition: none !important;}}
#detailView .tab{display: inline-flex; align-items: center; gap: 8px;}
#detailView .tab-icon{width: 20px; height: 20px; display: inline-grid; place-items: center; flex: 0 0 auto;}
#detailView .tab-label{display: inline-block;}
#detailView .tab-icon svg{width: 18px; height: 18px; display: block;}
#detailView .tab-icon-description,#detailView .tab-icon-certifications,#detailView .tab-icon-technical{filter: drop-shadow(rgba(16, 40, 28, 0.08) 0px 1px 1px);}
#detailView .detail-type{margin-bottom: 8px;}
#detailView .detail-actions{display: flex; flex-direction: column; gap: 9px; width: 100%;}
#detailView .detail-actions .btn{width: 100%; min-height: 46px;}
#detailView .detail-actions .btn-primary{order: 1;}
#detailView .detail-actions .btn-outline{order: 2;}
#detailView .main-image img{position: relative; z-index: 1;}
#detailView .swatch-head .selected{display: none !important;}
#detailView .cert-intro{max-width: none !important; line-height: 1.55 !important; margin-bottom: 14px !important;}
#detailView .tech th{width: 250px;}
#detailView .technical-note{line-height: 1.55; margin: 14px 0px 0px !important; font-size: 0.74rem !important; color: var(--muted) !important;}
@media (max-width: 600px) {#detailView .tab{padding: 14px 12px; gap: 6px;}
#detailView .tab-icon{width: 19px; height: 19px;}
#detailView .tab-icon svg{width: 17px; height: 17px;}}
#detailView [data-site-chrome]{font-family: "Source Sans 3", "Source Sans Pro", "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--text-dark);}
#detailView [data-site-chrome] *,#detailView [data-site-chrome] p{margin: 0px; padding: 0px; box-sizing: border-box;}
#detailView [data-site-chrome] h4{font-family: Montserrat, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.5px;}
#detailView [data-site-chrome] h4{font-weight: 800;}
#detailView{--primary-color: #2e7d32; --primary-hover: #1b5e20; --accent-orange: #e65100; --accent-orange-hover: #c74400; --text-dark: #1e293b; --text-muted: #64748b; --bg-light: #f8fafc; --border-color: #e2e8f0;}
#detailView [data-site-chrome] a:focus-visible,#detailView [data-site-chrome] button:focus-visible,#detailView [data-site-chrome] [tabindex]:focus-visible{outline: rgb(230, 81, 0) solid 3px; outline-offset: 3px;}
#detailView .ordering-help{margin: 12px 0px 0px; font-size: 14px; line-height: 1.6;}
#detailView .ordering-help a{display: inline-flex; gap: 5px; align-items: center; min-height: 44px; color: rgb(21, 85, 58); text-decoration: underline; text-underline-offset: 3px; font-weight: 650;}
#detailView .ordering-help a:focus-visible,#detailView #filmBookLink:focus-visible{outline: rgb(230, 81, 0) solid 3px; outline-offset: 4px; border-radius: 3px;}
#detailView .enquiry-support{flex-shrink: 0;}
#detailView .film-cta a{display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px;}
#detailView .cert-resource-link{display: inline-flex; align-items: center; gap: 5px; min-height: 44px; margin-top: 12px; color: rgb(21, 85, 58); font-size: 14px; font-weight: 800; text-decoration: none;}
#detailView .cert-resource-link:hover{text-decoration: underline; text-underline-offset: 3px;}
#detailView .cert-resource-link:focus-visible{outline: rgb(230, 81, 0) solid 3px; outline-offset: 4px; border-radius: 3px;}
@media (max-width: 640px) {#detailView .enquiry-support{width: 100%; flex-shrink: 1;}}
#detailView a:focus-visible,#detailView button:focus-visible,#detailView select:focus-visible,#detailView input:focus-visible,#detailView textarea:focus-visible,#detailView summary:focus-visible,#detailView [tabindex="0"]:focus-visible{outline-offset: 3px; outline: rgb(184, 63, 0) solid 3px !important;}
#detailView [hidden]{display: none !important;}
#detailView #main-content{scroll-margin-top: 100px;}
#detailView [data-qa-pending-social]{width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: rgb(255, 255, 255);}
#detailView{--light: #58665e; --green-600: #1d764d; --accent-orange: #b83f00; --accent-orange-hover: #973400;}
#detailView .count{color: rgb(88, 102, 94);}
#detailView .hint{color: rgb(88, 102, 94);}
#detailView .swatches .swatch{padding: 0px;}
#detailView .close{min-width: 44px; min-height: 44px;}
#detailView .tab{min-height: 44px;}
#detailView .check{min-height: 36px;}
#detailView .tabbar{scroll-padding-inline: 16px;}
@media (max-width: 640px) {#detailView .search input{font-size: 16px;}
#detailView .detail-hero,#detailView .info,#detailView .enquiry-support{min-width: 0px;}
#detailView .ordering-help,#detailView .qrow dd{overflow-wrap: anywhere;}}
#detailView a[href^="tel:"],#detailView a[href^="mailto:"]{direction: ltr; unicode-bidi: isolate;}
#detailView html[dir="rtl"] .count{margin-left: 0px; margin-right: auto;}
#detailView html[dir="rtl"] .sort{margin-left: 0px; margin-right: auto;}
@media (prefers-reduced-motion: reduce) {html{scroll-behavior: auto !important;}
#detailView *,#detailView ::before,#detailView ::after{animation: auto ease 0s 1 normal none running none !important; transition: none !important; scroll-behavior: auto !important;}}
#detailView [data-site-chrome]{font-family: "Source Sans 3", "Source Sans Pro", "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--text-dark);}
#detailView [data-site-chrome] *,#detailView [data-site-chrome] p{margin: 0px; padding: 0px; box-sizing: border-box;}
#detailView [data-site-chrome] h4{font-family: Montserrat, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.5px;}
#detailView [data-site-chrome] h4{font-weight: 800;}
#detailView{--primary-color: #2e7d32; --primary-hover: #1b5e20; --accent-orange: #e65100; --accent-orange-hover: #c74400; --text-dark: #1e293b; --text-muted: #64748b; --bg-light: #f8fafc; --border-color: #e2e8f0;}
#detailView [data-site-chrome] a:focus-visible,#detailView [data-site-chrome] button:focus-visible,#detailView [data-site-chrome] [tabindex]:focus-visible{outline: rgb(230, 81, 0) solid 3px; outline-offset: 3px;}
#detailView .ordering-help{margin: 12px 0px 0px; font-size: 14px; line-height: 1.6;}
#detailView .ordering-help a{display: inline-flex; gap: 5px; align-items: center; min-height: 44px; color: rgb(21, 85, 58); text-decoration: underline; text-underline-offset: 3px; font-weight: 650;}
#detailView .ordering-help a:focus-visible,#detailView #filmBookLink:focus-visible{outline: rgb(230, 81, 0) solid 3px; outline-offset: 4px; border-radius: 3px;}
#detailView .enquiry-support{flex-shrink: 0;}
#detailView .film-cta a{display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px;}
#detailView .cert-resource-link{display: inline-flex; align-items: center; gap: 5px; min-height: 44px; margin-top: 12px; color: rgb(21, 85, 58); font-size: 14px; font-weight: 800; text-decoration: none;}
#detailView .cert-resource-link:hover{text-decoration: underline; text-underline-offset: 3px;}
#detailView .cert-resource-link:focus-visible{outline: rgb(230, 81, 0) solid 3px; outline-offset: 4px; border-radius: 3px;}
@media (max-width: 640px) {#detailView .enquiry-support{width: 100%; flex-shrink: 1;}}
#detailView a:focus-visible,#detailView button:focus-visible,#detailView select:focus-visible,#detailView input:focus-visible,#detailView textarea:focus-visible,#detailView summary:focus-visible,#detailView [tabindex="0"]:focus-visible{outline-offset: 3px; outline: rgb(184, 63, 0) solid 3px !important;}
#detailView [hidden]{display: none !important;}
#detailView #main-content{scroll-margin-top: 100px;}
#detailView [data-qa-pending-social]{width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: rgb(255, 255, 255);}
#detailView{--light: #58665e; --green-600: #1d764d; --accent-orange: #b83f00; --accent-orange-hover: #973400;}
#detailView .count{color: rgb(88, 102, 94);}
#detailView .hint{color: rgb(88, 102, 94);}
#detailView .swatches .swatch{padding: 0px;}
#detailView .close{min-width: 44px; min-height: 44px;}
#detailView .tab{min-height: 44px;}
#detailView .check{min-height: 36px;}
#detailView .tabbar{scroll-padding-inline: 16px;}
@media (max-width: 640px) {#detailView .search input{font-size: 16px;}
#detailView .detail-hero,#detailView .info,#detailView .enquiry-support{min-width: 0px;}
#detailView .ordering-help,#detailView .qrow dd{overflow-wrap: anywhere;}}
#detailView a[href^="tel:"],#detailView a[href^="mailto:"]{direction: ltr; unicode-bidi: isolate;}
#detailView html[dir="rtl"] .count{margin-left: 0px; margin-right: auto;}
#detailView html[dir="rtl"] .sort{margin-left: 0px; margin-right: auto;}
@media (prefers-reduced-motion: reduce) {html{scroll-behavior: auto !important;}
#detailView *,#detailView ::before,#detailView ::after{animation: auto ease 0s 1 normal none running none !important; transition: none !important; scroll-behavior: auto !important;}}
body:not(.detail) #detailView{display: none;}
body.detail #detailView{display: block;}
body.detail{background: rgb(246, 248, 247);}
#detailView{display: none;}
#detailView .gallery{min-width: 0px;}
#detailView .media-stage{width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center;}