:root{--g:#1f7a4d;--gd:#16603b;--ink:#1a1d1b;--soft:#f4f6f5;--r:14px}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:#fff;overflow-x:hidden;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.container{max-width:1200px;padding-inline:max(16px,3vw)}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid #e8ecea;padding-top:env(safe-area-inset-top)}
.navbar-brand{font-weight:800;font-size:1.35rem;letter-spacing:-.02em}.navbar-brand span{color:var(--g)}
.nav-link{font-weight:500;padding:.75rem 0}
:focus-visible{outline:3px solid var(--g);outline-offset:2px}
.btn{border-radius:999px;font-weight:600;min-height:44px;display:inline-flex;align-items:center;justify-content:center;transition:.2s}
.btn-brand{background:var(--g);color:#fff;border:0}.btn-brand:hover{background:var(--gd);color:#fff}
.btn-link{color:var(--g)}
.hero{background:linear-gradient(180deg,var(--soft),#fff);padding:clamp(24px,5vw,72px) 0}
.eyebrow{color:var(--g);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem}
h1{font-size:clamp(2.1rem,5.5vw,4rem);font-weight:800;line-height:1.08;letter-spacing:-.03em}
.lead{max-width:34rem;color:#4a514d;margin-bottom:1.5rem}
.heroimg{aspect-ratio:4/5;max-height:70vh;margin-inline:auto;border-radius:24px;overflow:hidden;background:var(--soft);box-shadow:0 18px 50px rgba(0,0,0,.12)}
.heroimg img{width:100%;height:100%;object-fit:cover}
.py-section{padding:clamp(40px,7vw,88px) 0}.bg-soft{background:var(--soft)}
.head{text-align:center;margin-bottom:2rem}.head h2,.banner h2{font-size:clamp(1.6rem,3.6vw,2.5rem);font-weight:800;letter-spacing:-.02em}
.head p{color:#5b625e}
.grp{font-size:1.4rem;font-weight:700;margin-bottom:1.25rem}
.style-panel{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--soft);color:inherit;text-decoration:none;height:100%}
.style-panel img{width:100%;aspect-ratio:16/10;object-fit:contain;background:#eef2f0}
.style-panel div{padding:1.1rem 1.25rem}.style-panel h3{font-size:1.25rem;font-weight:700;margin:0}.style-panel span{color:var(--g);font-weight:600}
.pcard{display:flex;flex-direction:column;border:1px solid #e8ecea;border-radius:var(--r);overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.04);transition:box-shadow .2s}
.pcard:hover{box-shadow:0 10px 30px rgba(0,0,0,.1)}
.pimg{aspect-ratio:1/1;background:var(--soft);overflow:hidden}.pimg img{width:100%;height:100%;object-fit:contain;transition:transform .3s}
@media(hover:hover){.pcard:hover .pimg img{transform:scale(1.04)}}
.pbody{display:flex;flex-direction:column;flex:1;padding:1.1rem}.pbody h3{font-size:1.05rem;font-weight:700}
.tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.5rem}.tags span{background:#e5f3ec;color:var(--gd);border-radius:999px;padding:.15rem .65rem;font-size:.78rem;font-weight:600}
.price{font-weight:800;font-size:1.2rem}
.pbtn{margin-top:auto;display:grid;gap:.5rem}
.note{text-align:center;color:#6b726e;font-size:.85rem;margin-top:1.5rem}
.ben{background:#fff;border-radius:var(--r);padding:1.25rem;height:100%;text-align:center}.ben span{font-size:1.8rem;color:var(--g)}.ben h3{font-size:1.05rem;font-weight:700;margin:.5rem 0}.ben p{font-size:.9rem;color:#5b625e;margin:0}
.banner{background:var(--ink);color:#fff;text-align:center;padding:clamp(48px,8vw,96px) 0}.banner p{opacity:.85;margin-bottom:1.5rem}
.accordion-button:not(.collapsed){background:#e5f3ec;color:var(--gd)}.accordion-button:focus{box-shadow:0 0 0 3px rgba(31,122,77,.35)}
.site-footer{background:#111412;color:#d5dbd7;padding:3rem 0 calc(1.5rem + env(safe-area-inset-bottom))}.site-footer h3{font-size:1rem;color:#fff}.site-footer a{color:#d5dbd7;text-decoration:none}.site-footer a:hover{color:#fff;text-decoration:underline}.site-footer address{line-height:1.8}
.toast-lite{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:.7rem 1.2rem;border-radius:999px;opacity:0;pointer-events:none;transition:.25s;z-index:2000;max-width:90vw}
.toast-lite.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:576px){.pbtn{grid-template-columns:1fr 1fr}.pbtn .btn-link{grid-column:1/-1}}
@media(min-width:992px){.pbtn{grid-template-columns:1fr 1fr}}
@media(max-width:359px){.pbtn{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}