/* Controls from the approved concept; original cpv2 card styling remains authoritative. */
#collection{--ink:#1a1b30;--muted:#576371;--teal:#087f86;--line:#dce7e7;padding:44px 0 56px;background:#f8faf9;scroll-margin-top:24px;color:var(--ink)}
#collection *, .cs-home-hero *, .cs-home-trust *{box-sizing:border-box}
#collection .wrap,.cs-home-hero .wrap,.cs-home-trust .wrap{width:min(1376px,calc(100% - 80px));margin:auto}
#collection .sectionhead{display:flex;align-items:end;justify-content:space-between;margin-bottom:23px;gap:16px}
#collection .eyebrow,.cs-home-hero .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:1.6px;font-weight:650;color:#087f86;margin:0 0 7px}
#collection h2{font-size:32px;line-height:1.15;letter-spacing:-1px;font-weight:600;margin:0;color:#1a1b30}
#collection .sectionhead p:not(.eyebrow){margin:0;color:#576371;font-size:13px;max-width:340px}
#collection .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
#collection .filter{min-height:43px;border:1px solid #c4d3d5;background:#fff;border-radius:7px;padding:9px 15px;color:#3e4b55;font-size:13px;display:flex;align-items:center;gap:8px;line-height:1.5;box-shadow:none;cursor:pointer;font-weight:400}
#collection .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent,#087f86)}
#collection .filter[aria-pressed=true]{border:2px solid #087f86;padding:8px 14px;background:#e4f3f1;color:#125e64;font-weight:650}
#collection .filter small{font-size:10px;opacity:.7;margin-left:3px}
#collection .searchbox{position:relative;margin:0 0 12px}
#collection .searchbox svg{position:absolute;left:17px;top:15px;color:#697c84}
#collection #search{width:100%;height:50px;margin:0;padding:12px 100px 12px 47px;border:1px solid #bccfd0;border-radius:7px;color:#1a1b30;background:white;font-size:16px;box-shadow:none}
#collection #clear-search{position:absolute;right:11px;top:8px;background:#edf3f3;border:0;padding:6px 12px;border-radius:4px;color:#4a6268;font-size:12px;min-height:34px;line-height:1.5}
#collection .utility{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:21px}
#collection .count{font-size:12px;color:#536a70}
#collection .sorts{display:flex;gap:6px;align-items:center;border:0;padding:0;margin:0;background:none;min-width:0}
#collection .sorts legend{float:left;font-size:11px;color:#536a70;margin:0 10px 0 0;padding:0;line-height:34px;font-weight:400}
#collection .sort{position:relative;font-size:12px;white-space:nowrap;min-height:34px;padding:7px 13px;border:1px solid #c6d3d5;border-radius:99px;background:white;cursor:pointer;line-height:1.5;margin:0;font-weight:400}
#collection .sort input{position:absolute;opacity:0;width:1px;height:1px}
#collection .sort:has(:checked){background:#e0f2ef;border-color:#087f86;color:#076c71;font-weight:650}
#collection .sort:has(:focus-visible),#collection button:focus-visible,#collection input:focus-visible{outline:3px solid #087f86;outline-offset:3px}
html body #collection ul.products{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:16px!important;margin:0!important;padding:0!important;width:100%!important;list-style:none}
html body #collection ul.products:before,html body #collection ul.products:after{display:none!important}
html body #collection ul.products>li.product{float:none!important;width:auto!important;margin:0!important;padding:0!important;min-width:0!important}
html body #collection [hidden],html body #collection ul.products>li.product[hidden]{display:none!important}
html body #collection .cpv2-card .cpv2-name{font-size:18px!important;line-height:1.3!important}
#collection .empty{text-align:center;border:1px dashed #b8ccca;border-radius:8px;padding:40px 20px;background:white}
#collection .empty h3{margin:0 0 10px;font-size:22px}
#collection .primary,.cs-home-hero .primary,.cs-home-hero .secondary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:5px;padding:11px 18px;font-weight:650;font-size:13px;text-decoration:none;line-height:1.5}
#collection .primary,.cs-home-hero .primary{background:#087f86;color:white;border:1px solid #087f86}
.cs-home-hero .secondary{border:1px solid #9fb3b9;background:#ffffffad;color:#1a1b30}
.cs-home-hero{position:relative;overflow:hidden;background:#f6f8fa;isolation:isolate;color:#1a1b30}
.cs-home-hero:before{content:"";position:absolute;inset:0;background:url('/wp-content/uploads/2026/05/chameleon-home-hero-supplied-molecule-20260521-095727.jpg') 65% center/cover;opacity:.82;z-index:-2}
.cs-home-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f7f9fb 0%,rgba(247,249,251,.96) 35%,rgba(247,249,251,.12) 83%);z-index:-1}
.cs-home-hero .wrap{padding:40px 0 42px}.cs-home-hero .eyebrow{margin-bottom:14px}
.cs-home-hero h1{font-size:clamp(34px,3.6vw,53px);font-weight:600;line-height:1.08;letter-spacing:-2px;margin:0 0 16px;color:#1a1b30}
.cs-home-hero h1 em{font-style:normal;color:#087f86}
.cs-home-hero p.copy{font-size:15px;color:#576371;max-width:490px;margin:0 0 24px}
.cs-home-hero .heroactions{display:flex;gap:12px;align-items:center}
.cs-home-trust{border-bottom:1px solid #dce7e7;background:#fff}
.cs-home-trust .wrap{display:flex;justify-content:center;gap:42px;padding:13px 0;color:#52616a;font-size:11px;letter-spacing:.35px}
.cs-home-trust b{color:#087f86;margin-right:7px}
@media(max-width:1279px){html body #collection ul.products{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:899px){html body #collection ul.products{grid-template-columns:repeat(3,minmax(0,1fr))!important}#collection .wrap,.cs-home-hero .wrap,.cs-home-trust .wrap{width:calc(100% - 40px)}#collection .sectionhead{align-items:start}#collection .sectionhead>p{display:none}#collection .utility{align-items:start;flex-direction:column;gap:10px}}
@media(max-width:680px){html body #collection ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}#collection{padding:28px 0 36px}#collection .wrap,.cs-home-hero .wrap,.cs-home-trust .wrap{width:calc(100% - 28px)}#collection h2{font-size:27px}#collection .sectionhead{margin-bottom:19px}#collection .filters{gap:6px;margin-bottom:14px}#collection .filter{padding:8px 10px;font-size:11px;min-height:38px;gap:6px}#collection .filter[aria-pressed=true]{padding:7px 9px}#collection .filter small{display:none}#collection .utility{gap:10px;margin-bottom:15px}#collection .sorts{gap:5px;flex-wrap:wrap}#collection .sorts legend{display:none}#collection .sort{font-size:11px;padding:7px 11px}html body #collection .cpv2-card .cpv2-name{font-size:16px!important}.cs-home-hero .wrap{padding:27px 0 30px}.cs-home-hero h1{font-size:36px;letter-spacing:-1.4px}.cs-home-hero .eyebrow{font-size:9px;letter-spacing:1px}.cs-home-hero p.copy{max-width:285px;font-size:13px}.cs-home-hero:before{background-position:73% center;opacity:.5}.cs-home-hero .heroactions{gap:8px;flex-wrap:wrap}.cs-home-hero .primary,.cs-home-hero .secondary{font-size:11px;padding:10px 13px}.cs-home-trust .wrap{gap:11px;justify-content:space-between;font-size:9px}.cs-home-trust b{margin-right:3px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Match inherited Shop card typography exactly; only the names are enlarged. */
html body #collection .cpv2-card{font-size:16px;line-height:1.5;color:#444}
@media(max-width:768px){html body #collection .cpv2-card{font-size:15px}}
/* Break out of the inherited page gutter once; the section's own wrap supplies spacing. */
#collection,.cs-home-hero,.cs-home-trust{width:100vw;max-width:none;margin-left:calc(50% - 50vw)}