:root{
  --bg: #FFFFFF;
  --bg-alt: #F4F6F5;
  --panel: #FFFFFF;
  --ink: #1A241F;
  --ink-soft: #57635C;
  --line: #DCE2DE;
  --teal: #1F5C52;
  --teal-deep: #123B34;
  --teal-pale: #E8F1EF;
  --sage: #7C9186;
  --warn-bg: #FBF3E3;
  --warn-line: #C79A3E;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.5;
  font-size:16px;
}
h1,h2,h3{
  font-family: "Public Sans", sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0 0 0.4em 0;
  line-height:1.15;
  color:var(--teal-deep);
}
a{color:var(--teal-deep); text-decoration:none;}
a:hover{text-decoration:underline;}
.hidden{display:none !important;}

#agegate{
  position:fixed; inset:0; background:rgba(18,24,20,0.94);
  display:flex; align-items:center; justify-content:center; z-index:999;
  padding:24px;
}
#agegate .box{
  background:var(--panel); max-width:480px; width:100%;
  padding:36px 32px; border-radius:2px; border-top:4px solid var(--teal);
}
#agegate h2{font-size:1.3rem;}
#agegate p{color:var(--ink-soft); font-size:0.92rem;}
#agegate .actions{display:flex; gap:12px; margin-top:22px;}
.btn{
  font-family:inherit; font-size:0.88rem; font-weight:600; padding:11px 20px; border-radius:3px;
  border:1px solid var(--teal); background:var(--teal); color:#fff; cursor:pointer;
}
.btn.secondary{background:transparent; color:var(--ink-soft); border-color:var(--line);}
.btn.small{padding:7px 12px; font-size:0.8rem;}
.btn:hover{background:var(--teal-deep); border-color:var(--teal-deep); color:#fff;}

.utility-bar{
  background:var(--teal-deep); color:#DDEBE7; font-size:0.78rem;
  padding:6px 5vw; display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px;
}
.utility-bar a{color:#DDEBE7;}

header.site-header{
  background:var(--panel); border-bottom:1px solid var(--line);
  padding:16px 5vw; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
.logo{font-family:"Public Sans", sans-serif; font-size:1.3rem; font-weight:800; letter-spacing:-0.02em; color:var(--teal-deep);}
.logo::before{content:"⬡ "; color:var(--sage);}
.search-bar{
  flex:1 1 260px; max-width:420px; display:flex; border:1px solid var(--line); border-radius:3px; overflow:hidden;
}
.search-bar input{border:none; padding:9px 12px; flex:1; font-family:inherit; font-size:0.88rem; outline:none;}
.search-bar button{border:none; background:var(--bg-alt); padding:0 14px; cursor:pointer; color:var(--ink-soft);}
.header-actions{display:flex; gap:18px; align-items:center; font-size:0.82rem; color:var(--ink-soft);}

nav.catnav{
  background:var(--teal-deep); display:flex; gap:0; padding:0 5vw; flex-wrap:wrap;
}
nav.catnav a.navlink{
  display:inline-block; font-size:0.86rem; font-weight:600;
  color:#CFE3DD; cursor:pointer; padding:12px 18px; border-bottom:3px solid transparent;
}
nav.catnav a.navlink.active, nav.catnav a.navlink:hover{color:#fff; border-bottom-color:var(--sage); text-decoration:none;}

main{max-width:1120px; margin:0 auto; padding:0 5vw 80px;}

.trust-strip{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:0;
  background:var(--bg-alt); margin:0 -5vw 40px; padding:22px 5vw; border-bottom:1px solid var(--line);
}
.trust-strip div{padding:0 18px; border-left:1px solid var(--line); font-size:0.82rem; color:var(--ink-soft);}
.trust-strip div:first-child{border-left:none; padding-left:0;}
.trust-strip strong{display:block; color:var(--teal-deep); font-size:0.92rem; margin-bottom:2px;}

.cat-tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:18px; margin:24px 0 48px;}
.cat-tile{
  background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:26px;
  display:flex; flex-direction:column; gap:8px; transition:border-color .15s;
}
.cat-tile:hover{border-color:var(--teal);}
.cat-tile .icon{font-size:1.6rem;}
.cat-tile h3{font-size:1.05rem; margin-bottom:2px;}
.cat-tile p{font-size:0.85rem; color:var(--ink-soft); margin:0;}
.cat-tile .go{font-size:0.8rem; font-weight:600; color:var(--teal); margin-top:6px;}

.hero{padding:40px 0 32px; border-bottom:1px solid var(--line); margin-bottom:32px;}
.hero .kicker{font-size:0.85rem; color:var(--teal); font-weight:700;}
.hero h1{font-size:1.9rem; max-width:680px;}
.hero p{color:var(--ink-soft); max-width:560px; font-size:0.98rem;}

.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:20px; margin:28px 0 44px;}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:3px;
  padding:22px; display:flex; flex-direction:column; gap:9px;
}
.card h3{font-size:1.02rem;}
.product-photo{
  background:var(--bg-alt); border:1px dashed var(--line); border-radius:3px;
  height:140px; display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); font-size:0.8rem; text-align:center; padding:10px;
}
.card .spec{font-size:0.82rem; color:var(--ink-soft);}
.card .price{font-size:1.15rem; margin-top:auto; padding-top:10px; color:var(--teal-deep); font-weight:700;}
.spec-table{width:100%; border-collapse:collapse; font-size:0.83rem; margin:2px 0;}
.spec-table tr{border-bottom:1px solid var(--line);}
.spec-table tr:last-child{border-bottom:none;}
.spec-table td{padding:5px 0; color:var(--ink-soft);}
.spec-table td:first-child{color:var(--ink); font-weight:600; width:42%;}
.size-select{display:flex; gap:8px; flex-wrap:wrap; margin:4px 0;}
.size-select button{
  font-family:inherit; font-size:0.84rem; font-weight:600; padding:7px 14px;
  border:1px solid var(--line); background:var(--bg-alt); border-radius:20px; cursor:pointer; color:var(--ink);
}
.size-select button.sel{border-color:var(--teal); background:var(--teal-pale); color:var(--teal-deep);}
.card .add{align-self:flex-start; margin-top:8px;}

.disclaimer{
  background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:3px;
  padding:16px 18px; font-size:0.82rem; color:#5A4A22; margin:18px 0;
}
.disclaimer strong{display:block; margin-bottom:4px; font-size:0.78rem; letter-spacing:0.02em;}

.legal h2{font-size:1.1rem; margin-top:32px;}
.legal p, .legal li{color:var(--ink-soft); font-size:0.92rem;}

.ack{
  background:var(--bg-alt); border:1px solid var(--line); padding:20px; border-radius:3px;
  display:flex; gap:12px; align-items:flex-start; margin:24px 0;
}
.ack input{margin-top:4px;}
.ack label{font-size:0.85rem; color:var(--ink-soft);}

/* ---- Blog / article ---- */
.article{max-width:680px; margin:0 auto;}
.article h1{font-size:1.8rem;}
.article .byline{font-size:0.82rem; color:var(--ink-soft); margin-bottom:24px;}
.article p{font-size:1rem; color:var(--ink); margin:0 0 1em;}
.article h2{font-size:1.2rem; margin-top:1.6em;}
.article ul{color:var(--ink); font-size:1rem;}
.blog-list{display:grid; gap:18px; margin:28px 0 44px;}
.blog-card{
  background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:22px;
  display:flex; flex-direction:column; gap:6px;
}
.blog-card h3{font-size:1.05rem;}
.blog-card p{font-size:0.88rem; color:var(--ink-soft); margin:0;}

footer.site-footer{border-top:1px solid var(--line); background:var(--bg-alt); margin-top:20px;}
.footer-grid{
  max-width:1120px; margin:0 auto; padding:36px 5vw;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:28px;
}
.footer-grid h4{font-size:0.88rem; font-weight:700; color:var(--teal-deep); margin:0 0 10px;}
.footer-grid a{display:block; font-size:0.86rem; color:var(--ink); margin-bottom:7px;}
.footer-bottom{
  border-top:1px solid var(--line); padding:16px 5vw; font-size:0.78rem; color:var(--ink-soft);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}