/* self-hosted fonts. Google Fonts was two preconnects plus a render-blocking stylesheet on
   fonts.googleapis.com, which then pulled the woff2 from fonts.gstatic.com: four network trips to
   two third-party origins before a single heading could paint. The same swap on coppercrest took
   LCP from 3.15s to 1.38s.

   Both families are variable fonts, so one file per subset covers every weight the site uses
   (Playfair 500/600, DM Sans 400-700) instead of six static cuts. The unicode-ranges are copied
   from what Google serves, so a character outside latin still falls back per-glyph rather than
   loading a font that lacks it. latin-ext is kept because it holds the degree sign and the
   dashes used throughout the storage and temperature copy.

   font-display:swap matches the previous behaviour: text paints immediately in the fallback and
   is repainted when the webfont lands, so a slow font never blocks content.

   Licences: Playfair Display and DM Sans are both under the SIL Open Font License, which permits
   self-hosting. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url(/assets/fonts/dm-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url(/assets/fonts/dm-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/playfair-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/playfair-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
:root{--ink:#003037;--ink2:#0A4A50;--teal:#2F8F8A;--teal-d:#1F6F6B;--mint:#EEF5F5;--bg:#F6F8F8;--paper:#FFFFFF;--line:#D8E2E2;--muted:#5A6B6D;--soft:#8A9799;--ok-bg:#E3F3EA;--ok-fg:#1F7A4D;--warn-bg:#FBEFD6;--warn-fg:#8A5A00;--dim-bg:#ECEFEF;--dim-fg:#5A6B6D;--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}a:hover{color:var(--teal)}
img{max-width:100%;height:auto}
h1,h2,h3,h4{margin:0;line-height:1.15;text-wrap:balance}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.5vw,50px);letter-spacing:-0.01em;line-height:1.05}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3vw,34px)}
h3{font-size:18px;font-weight:600}
p{margin:0 0 14px}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
main{display:block;min-height:60vh}
main>section,main>article,main>div,main>nav,main>p,main>ul{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
main>section.hero,main>section.band,main>section.cta{max-width:none;padding:0}
.eyebrow{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:8px}
.eyebrow.dot{background:var(--mint);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.eyebrow.dot::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--teal);margin-right:8px;vertical-align:middle}
.eyebrow.light{color:#8FC7C3}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#EEF5F5;border:1px solid var(--ink);border-radius:999px;padding:13px 24px;font-size:15px;font-weight:600;cursor:pointer;min-height:46px;font-family:inherit;white-space:nowrap}
.btn:hover{background:var(--ink2);color:#fff}
.btn.ghost{background:var(--paper);color:var(--ink)}.btn.ghost:hover{background:var(--mint);border-color:var(--ink)}
.btn.light{background:#EEF5F5;color:var(--ink);border-color:#EEF5F5}
.btn.small{padding:9px 14px;font-size:13px;min-height:40px}
.pill{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;vertical-align:middle}
.pill.ok{background:var(--ok-bg);color:var(--ok-fg)}.pill.warn{background:var(--warn-bg);color:var(--warn-fg)}.pill.dim{background:var(--dim-bg);color:var(--dim-fg)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px}
.chips span,.chip{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--ink)}
.chip.on{background:var(--ink);color:#EEF5F5;border-color:var(--ink)}.chip span{background:none;border:0;padding:0;color:inherit;opacity:.7;margin-left:4px}
.chips.links{margin-bottom:8px}
/* ticker + header */
.ticker{background:var(--ink);color:#EEF5F5;overflow:hidden;font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;padding:9px 0}
.ticker-track{display:flex;width:max-content;animation:pa-ticker 40s linear infinite}
.ticker-track span{display:inline-flex;align-items:center;gap:12px;padding:0 22px}.ticker-track i{width:5px;height:5px;border-radius:50%;background:var(--teal)}
@keyframes pa-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}
.site-header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.site-header .wrap{display:flex;align-items:center;gap:20px;padding-top:10px;padding-bottom:10px}
.logo img{height:44px;width:auto;display:block;margin-left:-12px}
.nav{flex:1}.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;flex-wrap:wrap}
.nav a{display:block;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--muted)}.nav a:hover,.nav a.on{color:var(--ink);background:var(--mint)}
.cartbtn{background:var(--ink);color:#EEF5F5;border:0;border-radius:999px;padding:10px 16px;font:600 13px var(--sans);cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px}
.cartbtn .count{background:var(--teal);border-radius:999px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;padding:0 6px}
.navtoggle,.navbtn{display:none}
@media (max-width:900px){.navbtn{display:flex;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;margin-left:auto;border:1px solid var(--line);border-radius:10px}.navbtn span,.navbtn span::before,.navbtn span::after{display:block;width:20px;height:2px;background:var(--ink);position:relative;content:""}.navbtn span::before{position:absolute;top:-6px}.navbtn span::after{position:absolute;top:6px}.nav{display:none;flex-basis:100%;order:5}.navtoggle:checked~.nav{display:block}.nav ul{flex-direction:column}.site-header .wrap{flex-wrap:wrap}}
/* footer */
.site-footer{background:var(--ink);color:#EEF5F5;margin-top:72px}
.site-footer .grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px;padding-top:56px;padding-bottom:28px}
.site-footer p{color:#C9DEDD;font-size:14px}.site-footer h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8FC7C3;margin-bottom:10px}
.site-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:14px}.site-footer a{color:#EEF5F5}.site-footer a:hover{color:#8FC7C3}
.flogo{height:46px;width:auto;margin-left:-14px;margin-bottom:10px}
.pay span{border:1px solid rgba(238,245,245,.3);border-radius:6px;padding:3px 9px;font-size:12px;font-weight:600;color:#EEF5F5;margin-left:6px}
.site-footer .legal{border-top:1px solid rgba(238,245,245,.15);padding-top:18px;padding-bottom:28px}.site-footer .legal p{font-size:12.5px;color:#8FC7C3}.fine{font-size:12px}
/* home */
.hero{background:var(--paper);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px;align-items:center;padding-top:60px;padding-bottom:52px}
.hero .lede{font-size:18px;color:var(--muted);max-width:520px;margin:0 0 20px}
.hero h1{margin:8px 0 16px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;border-top:1px solid var(--line);padding-top:14px}
.stats strong{display:block;font-family:var(--serif);font-size:28px;font-weight:500}.stats span{font-size:12px;color:var(--muted)}
.hero-img{display:flex;align-items:center;justify-content:center;background:var(--paper);border:1px solid var(--line);border-radius:20px;height:420px;overflow:hidden}
.hero-img img{width:38%;height:auto;margin:0 -7%}.hero-img img.mid{width:50%;position:relative;z-index:2}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:40px}
.feature{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px}.feature h3{margin-bottom:8px}.feature p{font-size:14px;color:var(--muted);margin:0}
main>section.wrap{margin-top:56px}
.sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}.sechead a{font-weight:600;font-size:14px}
.hubgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.hubcard{display:flex;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px;align-items:flex-start}.hubcard:hover{border-color:var(--ink)}
.hubcard img{width:84px;height:84px;flex-shrink:0;border-radius:12px;border:1px solid var(--line)}.hubcard p{font-size:14px;color:var(--muted);margin:6px 0 8px}.hubcard span{font-weight:600;font-size:14px}
.catgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.catcard{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px}.catcard:hover{border-color:var(--ink)}.catcard h3{font-size:16px;margin-bottom:6px}.catcard p{font-size:13.5px;color:var(--muted);margin:0 0 8px}.catcard span{font-weight:600;font-size:13px}
.band{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:56px}
.band .two{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;padding-top:56px;padding-bottom:56px;align-items:start}
@media (max-width:860px){.band .two{grid-template-columns:1fr}}
.guidelist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.guidelist li a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 20px}.guidelist li a:hover{border-color:var(--ink)}.guidelist h3{font-size:16px;margin-bottom:6px}.guidelist p{font-size:14px;color:var(--muted);margin:0}
main>ul.guidelist{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.cta{background:var(--ink);color:#EEF5F5;margin-top:64px}.cta .wrap{padding-top:64px;padding-bottom:64px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}.cta p{color:#C9DEDD;font-size:17px;margin:0}
/* grid + cards */
.sortbar{display:flex;justify-content:flex-end;margin:10px 0 16px;font-size:14px;color:var(--muted)}.sortbar select{margin-left:8px;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:9px 14px;font:14px var(--sans);color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.grid.compact{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin:18px 0 8px}
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;position:relative}.card:hover{border-color:var(--ink);box-shadow:0 8px 24px rgba(0,48,55,.08)}
.card-img{display:block;aspect-ratio:1/1;background:#fff;border-bottom:1px solid var(--mint)}.card-img img{width:100%;height:100%;object-fit:contain;padding:6px}
.card-body{display:flex;flex-direction:column;gap:8px;padding:16px;flex:1}
.card-meta{display:flex;justify-content:space-between;align-items:center;gap:8px}.card-meta .cat{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.card h3{font-size:17px;line-height:1.3}.card .desc{font-size:13px;color:var(--muted);line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:8px}.card .price{font-size:20px;font-weight:600}
/* pages */
.shop-head{padding-top:40px;padding-bottom:8px}.shop-head p{color:var(--muted);font-size:15.5px;max-width:70ch}.shop-head h1{margin-bottom:12px}.shop-head.narrow{max-width:720px;text-align:center;padding-bottom:40px}.shop-head.narrow .form{text-align:left}
.crumbs{font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;padding-top:24px;margin-bottom:22px}.crumbs .cur{color:var(--ink)}
.warn{font-size:13px;color:var(--muted);line-height:1.55;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:28px 0}
.note{font-size:14.5px;color:var(--muted);background:var(--mint);border-radius:12px;padding:12px 16px}
/* product */
.pdp{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:48px;align-items:start}
.pdp-img{position:sticky;top:96px;background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;aspect-ratio:1/1}.pdp-img img{width:100%;height:100%;object-fit:contain;padding:28px}
.pdp-info{display:flex;flex-direction:column;gap:14px;min-width:0}.pdp-info h1{font-size:40px}.pdp-info h2{font-size:22px;font-family:var(--sans);font-weight:600;margin-top:14px}.pdp-info h3{margin-top:6px}
.pdp-info .sub{color:var(--muted);margin:0}
.price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.price-row .price{font-family:var(--serif);font-size:34px;font-weight:500}.gst{font-size:13px;color:var(--muted)}
.buy{display:flex;gap:12px;flex-wrap:wrap;margin:4px 0 8px}.buy .btn{flex:1;min-width:200px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--paper)}.qty button{background:transparent;border:0;width:44px;height:46px;font-size:18px;cursor:pointer;color:var(--ink)}.qty input{width:44px;text-align:center;border:0;font:600 15px var(--sans);color:var(--ink);-moz-appearance:textfield}.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.qty.small{border:0;gap:4px}.qty.small button{width:28px;height:28px;font-size:14px;border:1px solid var(--line);border-radius:50%}.qty.small span{min-width:22px;text-align:center;font-weight:600}.qty.small .link{border:0;width:auto;font-size:12px;text-decoration:underline;color:var(--muted);margin-left:6px;height:auto}
.areas{margin:0;padding-left:20px;color:var(--muted);line-height:1.6;display:flex;flex-direction:column;gap:4px}.areas strong{color:var(--ink)}
.aka{font-size:14px;color:var(--muted)}
.specs{border:1px solid var(--line);border-radius:14px;background:var(--paper);overflow:hidden}.specs h2{font-size:13px!important;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--mint);padding:12px 16px;margin:0!important;border-bottom:1px solid var(--line)}
.specs dl{margin:0}.specs dl div{display:grid;grid-template-columns:minmax(140px,40%) 1fr;gap:12px;padding:10px 16px;border-bottom:1px solid var(--mint);font-size:14px}.specs dt{color:var(--muted)}.specs dd{margin:0}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:520px}th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--mint);font-weight:600}tr:last-child td{border-bottom:0}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}tr.cur td{background:var(--mint)}td.ok{color:var(--ok-fg);font-weight:600}
.faqs{margin-top:48px;max-width:820px}.faqs h2{margin-bottom:12px}
.faq{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-size:22px;color:var(--muted);flex-shrink:0}.faq[open] summary::after{content:"−"}.faq summary h3{font-size:16px}.faq p{color:var(--muted);font-size:15px;line-height:1.65;padding-bottom:16px;margin:0;max-width:68ch}
.faqpage h2{margin:36px 0 6px}
.related{margin-top:40px}.linklist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.linklist li{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px}.linklist a{font-weight:600;display:block;margin-bottom:4px}.linklist span{font-size:13.5px;color:var(--muted)}
.fbt{margin-top:48px}.fbt h2{margin-bottom:18px}
/* hub */
.hub-head{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;margin-bottom:24px}
@media (max-width:800px){.hub-head{grid-template-columns:1fr}}
.hub-img{background:var(--paper);border:1px solid var(--line);border-radius:20px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}.hub-img img{width:100%;height:100%;object-fit:contain;padding:24px}
.answer{font-size:18px;line-height:1.55;color:var(--ink);max-width:66ch;margin:10px 0 14px}
.hub h2{margin:36px 0 10px}.hub p{max-width:70ch;color:#1e3a3c}.hub .lead{font-weight:600;color:var(--ink)}
/* compounds index */
.compgroups{display:flex;flex-direction:column;gap:36px}.compgroups h2{margin-bottom:6px}.compgroups>section>p{color:var(--muted);max-width:70ch}
.complist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.complist li{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:3px}.complist a{font-weight:600;font-size:16px}.complist span{font-size:13.5px;color:var(--muted)}.complist em{font-style:normal;font-size:13px;color:var(--teal-d);font-weight:600}
/* guide */
.guide{max-width:820px}.guide header{padding-top:8px}.guide .byline{font-size:13px;color:var(--soft)}.guide-body h2{margin:36px 0 10px}.guide-body p{font-size:16.5px;line-height:1.7;color:#1e3a3c;max-width:68ch}.guide .fbt .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.prose p{font-size:16.5px;line-height:1.7;max-width:68ch;color:#1e3a3c}.prose h2{margin:32px 0 8px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:18px}.step{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px}.step p{font-size:14px;color:var(--muted);margin:8px 0 0}
main>.two{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}@media (max-width:800px){main>.two{grid-template-columns:1fr}}
/* forms */
.form{display:flex;flex-direction:column;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:26px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}.form input,.form select,.form textarea{border:1px solid var(--line);border-radius:12px;padding:13px 14px;font:15px var(--sans);color:var(--ink);background:#fff;min-height:48px}.form textarea{min-height:120px;resize:vertical}
.form.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.form .full{grid-column:1/-1}.form .check,.form .radio{flex-direction:row;align-items:center;font-weight:400;color:var(--muted)}.form .check input,.form .radio input{min-height:0;width:16px;height:16px;accent-color:var(--ink)}
.search{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.search input{flex:1;min-width:240px;border:1px solid var(--line);border-radius:999px;padding:12px 20px;font:15px var(--sans);min-height:48px}
/* checkout */
.checkout{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start}@media (max-width:860px){.checkout{grid-template-columns:1fr}}
.co-main h2{margin:28px 0 12px;font-size:26px}.co-side{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:26px;position:sticky;top:96px}.co-side h2{font-size:14px;font-family:var(--sans);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:15px}.row.muted{color:var(--muted);font-size:13px}.row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-size:18px;font-weight:600}
.cart-line{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px}.cart-line img{width:64px;height:64px;border-radius:10px;border:1px solid var(--line);object-fit:contain}.cart-line .muted{font-size:12.5px;color:var(--muted)}
.cart-empty{text-align:center;padding:40px 16px;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted)}.cart-empty img{opacity:.5}.cart-empty p{margin:0}.cart-empty .btn{margin-top:10px}
/* drawer */
.drawer[hidden]{display:none}.drawer-bg{position:fixed;inset:0;background:rgba(0,48,55,.45);z-index:40}
.drawer-panel{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--paper);z-index:50;display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(0,48,55,.18)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}.drawer-head h2{font-size:24px}.drawer-head .x{background:none;border:0;font-size:24px;width:44px;height:44px;cursor:pointer;color:var(--muted)}
.drawer-body{flex:1;overflow:auto;padding:18px 22px}.drawer-foot{padding:18px 22px;border-top:1px solid var(--line)}.drawer-foot .btn{width:100%;margin-top:10px}
body.drawer-open{overflow:hidden}
/* calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;margin-top:20px}@media (max-width:800px){.calc{grid-template-columns:1fr}}
.calc-form{display:flex;flex-direction:column;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:24px}.calc-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}.calc-form input,.calc-form select{border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:16px var(--sans);min-height:48px;color:var(--ink);background:#fff}
.calc-out{display:grid;grid-template-columns:1fr 1fr;gap:12px}.calc-out div{background:var(--mint);border:1px solid var(--line);border-radius:16px;padding:18px}.calc-out span{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}.calc-out strong{display:block;font-family:var(--serif);font-size:28px;font-weight:500;margin:6px 0 2px;font-variant-numeric:tabular-nums}.calc-out em{font-style:normal;font-size:13px;color:var(--muted)}
.calc .warn{grid-column:1/-1;margin:0;background:var(--warn-bg);color:var(--warn-fg);border-color:transparent}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* home compound sections */
.compsec{display:grid;grid-template-columns:minmax(280px,1fr) 1.7fr;gap:40px;align-items:start;margin-top:64px}
@media (max-width:900px){.compsec{grid-template-columns:1fr}}
.compsec-copy h2{margin:4px 0 12px}.compsec-copy p{color:var(--muted);font-size:15.5px}
.mini{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}.mini a{font-weight:600;color:var(--teal-d)}.mini li::before{content:"→ ";color:var(--soft)}
.compsec .grid.compact{margin:0}

/* embedded calculator */
.calc.embed{margin-top:8px;grid-template-columns:1fr}.calc.embed .calc-out{grid-template-columns:repeat(4,1fr)}@media (max-width:700px){.calc.embed .calc-out{grid-template-columns:1fr 1fr}}
.calc.embed .calc-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;padding:18px}.calc-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:22px}.calc-head h2{font-size:22px!important;font-family:var(--sans)!important;font-weight:600!important;margin:0!important}.calc-head a{font-size:14px;font-weight:600}
.calc-out.four{grid-template-columns:repeat(2,1fr)}

.card .price.small{font-size:14px;font-weight:600;color:var(--muted)}
.calc.embed .calc-out strong{font-size:21px}

/* compounds dropdown */
.nav li.has-menu{position:relative}.caret{display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 0 3px 4px}
.menu{display:none;position:absolute;top:100%;left:-12px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(0,48,55,.14);padding:18px 20px 12px;width:min(920px,calc(100vw - 48px));z-index:40}
.nav li.has-menu:hover .menu,.nav li.has-menu:focus-within .menu{display:block}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 24px}.menu-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.menu-grid .mh{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);font-weight:600;padding:4px 0 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.menu-grid li a{padding:4px 0;font-size:13.5px;color:var(--ink);font-weight:500;background:none}.menu-grid li a:hover{color:var(--teal)}
.menu-foot{display:flex;gap:18px;justify-content:flex-end;border-top:1px solid var(--line);margin-top:12px;padding-top:10px}.menu-foot a{font-size:13px;font-weight:600;padding:4px 0}
@media (max-width:900px){.menu{position:static;box-shadow:none;border:0;border-left:2px solid var(--line);border-radius:0;padding:6px 0 6px 14px;width:auto;display:block}.menu-grid{grid-template-columns:1fr}.menu-foot{justify-content:flex-start}}

.card-img[style] img{padding:0}

/* ===== layout safety: nothing may push the page sideways ===== */
html,body{max-width:100%;overflow-x:hidden}
.wrap,main>section,main>article,main>div,main>nav,main>p,main>ul{min-width:0}
img,svg,video{max-width:100%}
.pdp-info,.card,.hub,.guide{min-width:0;overflow-wrap:anywhere}
.tbl{max-width:100%}
.form input,.form select,.form textarea,.calc-form input,.calc-form select{max-width:100%;min-width:0}
pre{overflow-x:auto}

/* ===== shop / category content ===== */
.shop-content{margin-top:48px;max-width:860px}.shop-content h2{margin:36px 0 10px}.shop-content p{font-size:16px;line-height:1.7;color:#1e3a3c;max-width:70ch}.shop-content .faqs{margin-top:32px}
.shop-content p.meta{font-size:14px;color:var(--muted);line-height:1.6}
.catlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}.catlist li{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:14.5px;line-height:1.55}.catlist li span{color:var(--muted)}
.compsum{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:start;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px;margin:14px 0}
.compsum-img img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:#fff}
.compsum h3{font-size:20px;font-family:var(--serif);font-weight:500;margin-bottom:2px}.compsum .lead{font-weight:600;font-size:14px;margin-bottom:8px;color:var(--ink)}.compsum p{font-size:15px;margin-bottom:8px}.compsum .meta{margin:0 0 4px}
@media (max-width:560px){.compsum{grid-template-columns:72px 1fr;gap:12px;padding:14px}}
.steps-list{margin:0 0 10px;padding-left:22px;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.6;color:#1e3a3c}

/* ===== checkout ===== */
.checkout-wrap{margin-top:8px}
.co-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start}@media (max-width:860px){.co-grid{grid-template-columns:1fr}}
.co-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px;margin-bottom:16px}
.co-h{font-size:14px;font-family:var(--sans);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.co-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.co-form .full{grid-column:1/-1}.co-form label{display:block;font-size:13px;font-weight:500;margin-bottom:5px}.co-form input,.co-form select,.co-form textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:15px var(--sans);color:var(--ink);background:#fff;min-height:46px}.co-form textarea{min-height:64px;resize:vertical}
.co-form label.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--muted);font-size:13.5px;line-height:1.5;margin:4px 0 0}.co-form label.check input{width:18px;height:18px;min-height:0;margin-top:2px;accent-color:var(--ink);flex:none}
@media (max-width:560px){.co-form{grid-template-columns:1fr}}
.opt-list{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.opt-card{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;cursor:pointer;border-bottom:1px solid var(--line)}.opt-card:last-child{border-bottom:0}.opt-card:hover{background:var(--mint)}.opt-card.on{background:var(--mint);box-shadow:inset 0 0 0 2px var(--teal)}
.opt-radio{flex:none;width:18px;height:18px;border:2px solid var(--line);border-radius:50%;position:relative;margin-top:2px;background:#fff}.opt-card.on .opt-radio{border-color:var(--teal)}.opt-card.on .opt-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--teal)}
.opt-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.opt-title{font-weight:600;font-size:15px}.opt-eta{font-weight:400;color:var(--muted);font-size:13px}.opt-sub{font-size:13px;color:var(--muted)}.opt-price{font-weight:600;font-size:14px}.opt-note{display:none;font-size:13px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-top:4px}.opt-card.on .opt-note{display:block}
.promo-row{display:flex;gap:8px}.promo-row input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;padding:11px 16px;font:15px var(--sans);text-transform:uppercase}.promo-row .btn{padding:10px 18px}
.co-sum{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px;position:sticky;top:96px}
.crow{display:grid;grid-template-columns:52px 1fr auto auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--mint)}.crow img{width:52px;height:52px;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:#fff}.crow-n{font-weight:600;font-size:14px;line-height:1.3}.crow .muted{font-size:12.5px;color:var(--muted)}
.crow-q{display:flex;align-items:center;gap:6px}.crow-q button{width:26px;height:26px;border:1px solid var(--line);background:#fff;border-radius:50%;cursor:pointer;color:var(--ink);font-size:14px}.crow-q b{min-width:18px;text-align:center}.crow .x{cursor:pointer;color:var(--soft);font-size:13px;padding:4px}
.co-line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:15px}.co-line.ok{color:var(--ok-fg)}.co-line.tot{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-size:18px;font-weight:600}
.co-min{background:var(--warn-bg);color:var(--warn-fg);border-radius:12px;padding:12px 14px;font-size:14px;margin-top:10px}
.btn.full{width:100%;margin-top:12px}.btn[disabled]{opacity:.5;cursor:not-allowed}
.small{font-size:12.5px}.muted{color:var(--muted)}.center{text-align:center}.small.muted{margin-top:8px}
.step{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin:16px 0 8px}
.paydetail{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:var(--mint);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0;font-size:14px}.pd-l{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}.pd-v{font-weight:700;word-break:break-all;text-align:left}.pd-copy{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font:600 12px var(--sans);cursor:pointer;color:var(--ink)}.pd-copy:hover{border-color:var(--ink)}
.pdrop{display:block;border:2px dashed var(--line);border-radius:14px;padding:18px;text-align:center;cursor:pointer;font-size:14px;color:var(--muted);background:#fff;margin-top:8px}.pdrop:hover{border-color:var(--teal)}.pdrop.has{border-style:solid;border-color:var(--ok-fg);color:var(--ok-fg);background:var(--ok-bg)}
.pprev{max-width:220px;max-height:220px;border-radius:10px;border:1px solid var(--line);margin-top:10px;display:block}
.walletbox{background:var(--mint);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:8px 0;font-size:13px;word-break:break-all;text-align:left}.walletbox b{display:block;margin-bottom:4px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.paybox{max-width:480px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;text-align:center}.paybox-logo{background:var(--ink);padding:18px}.paybox-logo img{height:44px;width:auto}.paybox-body{padding:26px 24px}.paybox h2{font-size:24px;margin:6px 0 10px}.paybox p{color:var(--muted);font-size:14.5px;line-height:1.6}.paybox .btn{width:100%;margin-top:8px}.paybox .btn.ghost{margin-top:10px}.paybox .big{font-size:42px}.paybox .key{font-size:16px;font-weight:700;background:var(--mint);padding:12px;border-radius:10px;margin:12px 0}.paybox a{font-weight:600;text-decoration:underline}
.form-msg{background:var(--mint);border-radius:10px;padding:10px 12px;font-size:14px;margin:0}

/* ===== widgets: chat + whatsapp ===== */
#paw{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.wfab{width:54px;height:54px;border-radius:50%;background:var(--ink);color:#EEF5F5;border:0;box-shadow:0 8px 24px rgba(0,48,55,.25);font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;text-decoration:none}.wfab.wa{background:#25D366;color:#fff}
#chatBadge{display:none;position:absolute;top:-4px;right:-4px;background:#e11d48;color:#fff;font:700 11px var(--sans);min-width:20px;height:20px;border-radius:999px;align-items:center;justify-content:center;padding:0 5px}#chatBadge.on{display:flex}
#chatPanel{display:none;position:fixed;right:16px;bottom:82px;width:min(360px,calc(100vw - 32px));height:min(520px,calc(100vh - 110px));background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px rgba(0,48,55,.22);z-index:61;flex-direction:column;overflow:hidden}#chatPanel.on{display:flex}
.cw-h{background:var(--ink);color:#EEF5F5;padding:14px 16px;font-weight:600;display:flex;justify-content:space-between;align-items:center}.cw-h span{cursor:pointer;opacity:.8}
.cw-b{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.cw-m{max-width:82%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.45;word-wrap:break-word}.cw-m.user{align-self:flex-end;background:var(--ink);color:#EEF5F5}.cw-m.shop{align-self:flex-start;background:var(--paper);border:1px solid var(--line)}.cw-m img{max-width:200px;border-radius:8px;display:block;margin-top:4px}
.cw-prod{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.12);border-radius:8px;padding:6px;text-decoration:none;color:inherit;margin-top:4px}.cw-m.shop .cw-prod{background:var(--mint)}.cw-prod img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:6px;margin:0}.cw-prod span{font-size:13px;line-height:1.3}.cw-file{color:inherit;text-decoration:underline;font-size:13px}
.cw-f{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line);background:var(--paper)}.cw-f input[type=text]{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;padding:10px 14px;font:14px var(--sans)}.cw-f .btn{padding:8px 14px;min-height:40px}.cw-f .ic{background:none;border:1px solid var(--line);border-radius:50%;width:40px;height:40px;cursor:pointer}
.cw-form{padding:18px;display:flex;flex-direction:column;gap:10px}.cw-form p{font-size:14px;color:var(--muted);margin:0}.cw-form input{border:1px solid var(--line);border-radius:12px;padding:11px 13px;font:14px var(--sans)}

/* ===== mobile: two cards per row, tighter chrome ===== */
@media (max-width:640px){
  .wrap,main>section,main>article,main>div,main>nav,main>p,main>ul{padding-left:14px;padding-right:14px}
  .grid,.grid.compact,.guide .fbt .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card{border-radius:12px}.card-body{padding:10px;gap:5px}.card h3{font-size:14px;line-height:1.25}.card .desc{display:none}.card .price{font-size:15px}.card-meta .cat{font-size:9.5px}.pill{font-size:10px;padding:2px 7px}
  .card-foot{flex-direction:column;align-items:stretch;gap:6px}.card-foot .btn.small{width:100%;padding:8px 10px;font-size:12.5px;min-height:36px}
  h1{font-size:clamp(28px,8vw,34px)}.pdp-info h1{font-size:28px}h2{font-size:clamp(22px,6vw,26px)}
  .pdp{gap:24px}.pdp-img{position:static;aspect-ratio:1/1}.pdp-img img{padding:14px}
  .hero-grid{padding-top:32px;padding-bottom:28px;gap:24px}.hero-img{height:260px}.stats{grid-template-columns:1fr 1fr}
  .logo img{height:36px;margin-left:-8px}.cartbtn{padding:8px 12px;min-height:40px}
  .site-footer .grid4{gap:26px;padding-top:36px}.flogo{margin-left:-10px}
  .calc-out{grid-template-columns:1fr 1fr}.calc.embed .calc-out{grid-template-columns:1fr 1fr}.calc-out strong{font-size:22px}
  .co-sum{position:static;padding:16px}.co-card{padding:16px}
  .compsec{margin-top:40px;gap:20px}.chips span,.chip{font-size:12px;padding:5px 10px}
  .sortbar{justify-content:flex-start}.sortbar label{width:100%}.sortbar select{width:100%;margin:6px 0 0}
  .specs dl div{grid-template-columns:1fr;gap:2px}
  .form,.calc-form{padding:16px;border-radius:14px}.form.grid2{grid-template-columns:1fr}
  #paw{right:12px;bottom:12px}.wfab{width:48px;height:48px;font-size:21px}#chatPanel{right:8px;bottom:70px;width:calc(100vw - 16px);height:min(520px,calc(100vh - 90px))}
  .menu{width:auto}
}
@media (max-width:380px){.grid,.grid.compact{gap:8px}.card-body{padding:8px}.card h3{font-size:13px}}

.btn.wa{background:#25D366;border-color:#25D366;color:#fff}.btn.wa:hover{background:#1ebe5a}.paybox .btn.wa{margin-top:10px}