:root{
  --g50:#f4faf0; --g100:#e8f4de; --g200:#d4e9c3; --g300:#b6d89e; --g500:#5e9a45; --g600:#4a8035; --g700:#3b672b; --g900:#23401a;
  --ink:#27312a; --muted:#5f6e63; --line:#dbe8d1; --bg:#fcfef9; --warn:#b3261e; --r:14px;
  --head:"Lora",Georgia,serif; --body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;cursor:pointer}
h1,h2,h3,h4{font-family:var(--head);line-height:1.25;margin:0 0 .6em;font-weight:600;color:var(--g900)}
h1{font-size:clamp(1.9rem,5vw,3rem)} h2{font-size:clamp(1.5rem,3.5vw,2rem);margin-bottom:1.1em} h3{font-size:1.1rem}
:focus-visible{outline:3px solid var(--g500);outline-offset:2px}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.section{padding:64px 0}
.tint{background:var(--g50)}
button{font:inherit;cursor:pointer}
.promo{background:var(--g700);color:#fff;text-align:center;padding:8px 16px;font-weight:600;font-size:.92rem}

/* header */
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:16px;min-height:72px}
.brand img{height:58px;width:58px;object-fit:contain}
.nav{display:flex;gap:22px;margin-left:auto;font-weight:600;font-size:.95rem;align-items:center}
.nav-cats{display:contents}
.nav a{padding:6px 0;border-bottom:2px solid transparent;transition:.2s}
.nav a:hover{color:var(--g600);border-color:var(--g500)}
.actions{display:flex;gap:8px;align-items:center}
.icon-btn,.cart-btn,.menu-btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-size:.85rem;font-weight:700;transition:.2s}
.icon-btn:hover,.menu-btn:hover{border-color:var(--g500);background:var(--g50)}
.cart-btn{background:var(--g600);color:#fff;border-color:var(--g600)}
.cart-btn:hover{background:var(--g700)}
.cart-btn span{background:#fff;color:var(--g700);border-radius:999px;padding:0 7px;margin-left:4px;font-size:.78rem}
.menu-btn{display:none}

/* hero */
.hero{padding:56px 0;background:linear-gradient(135deg,var(--g100),#fff 70%)}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.lead{font-size:1.08rem;color:var(--muted);max-width:52ch}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.hero-imgs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hero-imgs div{background:var(--g100);border-radius:var(--r);aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line)}
.hero-imgs img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.hero-imgs div:last-child{margin-top:28px}
.btn{display:inline-block;border-radius:999px;padding:12px 24px;font-weight:700;border:1.5px solid transparent;text-align:center;transition:.2s}
.btn.primary{background:var(--g600);color:#fff}
.btn.primary:hover{background:var(--g700)}
.btn.ghost{background:#fff;border-color:var(--g500);color:var(--g700)}
.btn.ghost:hover{background:var(--g50)}
.btn.full{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* products */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.tab{border:1px solid var(--line);background:#fff;padding:8px 18px;border-radius:999px;font-weight:700}
.tab.active{background:var(--g600);border-color:var(--g600);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s}
.card:hover{box-shadow:0 8px 24px rgba(59,103,43,.14)}
.img{background:var(--g100);aspect-ratio:4/3;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative}
.img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:6px}
.badge{position:absolute;top:10px;left:10px;background:#fff;color:var(--warn);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:.78rem;font-weight:700}
.info{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.info h3{margin:0}
.meta{color:var(--muted);font-size:.88rem}
.price{font-weight:800;font-size:1.25rem;color:var(--g700)}
.price .meta{font-weight:600}
.sizes-line{font-size:.88rem;color:var(--muted)}
.info .btn{margin-top:auto}
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.cat{background:var(--g100);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:block;transition:.2s}
.cat:hover{background:var(--g200)}
.cat p{color:var(--muted);margin:0 0 12px}.cat span{font-weight:800;color:var(--g700)}
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.why>div,.pay-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.pay{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.pay-card p{margin:0;color:var(--muted)} .pay-card strong{font-size:1.4rem;color:var(--g700)}
.note{color:var(--muted);font-size:.9rem;margin-top:16px}

/* about */
.about{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:start}
.about-main h3{font-size:1.5rem;margin-bottom:.5em}
.about-main p{color:var(--muted);font-size:1.05rem;margin:0 0 1em}
.about-main .tagline{font-family:var(--head);font-size:1.3rem;color:var(--g700);font-weight:600;border-left:4px solid var(--g500);padding-left:14px;margin-top:1.4em}
.about-side{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.commit{list-style:none;padding:0;margin:0 0 6px;display:grid;gap:10px}
.commit li{background:var(--g50);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.about-side>p{color:var(--muted);margin:16px 0 0}

/* contact + footer */
.contact{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:0}
dt{font-weight:800;color:var(--g700)} dd{margin:0}
.contact-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.footer{background:var(--g900);color:#dfeed5;padding:44px 0 0}
.footer h4{color:#fff}
.footer a{display:block;padding:3px 0;opacity:.9}.footer a:hover{opacity:1;text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.foot-logo{height:72px;width:72px;object-fit:contain;background:#fff;border-radius:12px;margin-bottom:10px}
.copy{text-align:center;border-top:1px solid rgba(255,255,255,.15);margin:32px 0 0;padding:16px;font-size:.88rem}

/* dialogs */
dialog{border:none;border-radius:18px;padding:0;width:min(940px,94vw);max-height:92vh;overflow-x:hidden;overflow-y:auto;color:var(--ink)}
dialog::backdrop{background:rgba(20,40,15,.5)}
#checkoutDialog,#resultDialog{width:min(520px,94vw)}
.x{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font-weight:700;font-size:.85rem}
.pd{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.pd-media,.pd-info,.car{min-width:0}
.pd-media{padding:18px;background:var(--g50)}
.pd-info{padding:24px;position:relative;display:flex;flex-direction:column;gap:6px}
.pd-info>.x{position:absolute;top:14px;right:14px}
.pd-info h2{margin:0 80px .2em 0}
.lbl{font-weight:800;margin-top:10px;font-size:.92rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 16px;font-weight:700}
.chip[aria-pressed=true]{background:var(--g600);border-color:var(--g600);color:#fff}
.chip[data-out=true]{opacity:.5;text-decoration:line-through}
.sel-line{background:var(--g100);border-radius:10px;padding:10px 14px;font-weight:700}
.sel-line .price{display:block}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.qty button{border:none;background:#fff;width:38px;height:38px;font-size:1.2rem}
.qty span{min-width:34px;text-align:center;font-weight:800}
.msg{color:var(--warn);font-weight:700;min-height:1.2em;margin:4px 0}
.pd-btns{display:grid;gap:10px;margin-top:6px}
.pd-btns .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.thumbs button{border:2px solid var(--line);border-radius:10px;background:var(--g100);padding:2px;width:62px;height:62px}
.thumbs button[aria-current=true]{border-color:var(--g600)}
.thumbs img{width:100%;height:100%;object-fit:cover;border-radius:7px}

/* size swipe carousel */
.car{position:relative}
.car-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-radius:12px;touch-action:pan-x pan-y}
.car-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;background:var(--g100);border-radius:12px;display:flex;flex-direction:column}
.slide-img{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.slide-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:6px}
.slide-cap{display:flex;justify-content:space-between;align-items:baseline;padding:10px 16px 14px;border-top:1px solid var(--line);background:#fff;border-radius:0 0 12px 12px}
.slide-cap .sz{font-family:var(--head);font-weight:600;font-size:1.25rem;color:var(--g900)}
.slide-cap .pr{font-weight:800;color:var(--g700);font-size:1.15rem}
.car-nav{position:absolute;top:36%;transform:translateY(-50%);z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.95);font-size:1.4rem;line-height:1;color:var(--g700)}
.car-nav.prev{left:6px}.car-nav.next{right:6px}
.car-nav[disabled]{opacity:.35;cursor:default}
.dots{display:flex;justify-content:center;gap:8px;margin:12px 0 2px}
.dot{width:10px;height:10px;border-radius:50%;border:none;padding:0;background:var(--g300)}
.dot[aria-current=true]{background:var(--g600);transform:scale(1.25)}
.swipe-hint{text-align:center;font-size:.82rem;color:var(--muted);margin:2px 0 0}

/* drawer, forms */
.scrim{position:fixed;inset:0;background:rgba(20,40,15,.45);z-index:40}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,100%);background:#fff;z-index:50;transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column;visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.drawer-head h2{margin:0;font-size:1.3rem}
.cart-items{flex:1;overflow:auto;padding:12px 20px}
.ci{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.ci img{width:70px;height:70px;object-fit:contain;background:var(--g100);border-radius:10px;mix-blend-mode:multiply}
.ci h4{margin:0 0 2px;font-size:1rem}
.ci-row{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.rm{border:none;background:none;color:var(--warn);font-weight:700;padding:4px 0}
.empty{color:var(--muted);text-align:center;padding:40px 0}
.drawer-foot{padding:16px 20px;border-top:1px solid var(--line);display:grid;gap:10px}
.total-row{display:flex;justify-content:space-between;font-size:1.1rem}
#checkoutForm{padding:0 0 20px}
#checkoutForm>*:not(.drawer-head){margin-left:20px;margin-right:20px}
#checkoutForm label{display:block;font-weight:700;margin-top:12px;font-size:.92rem}
input,textarea,select{width:100%;margin-top:4px;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;font:inherit;background:#fff;color:var(--ink)}
input:focus,textarea:focus,select:focus{border-color:var(--g500);outline:none}
.err{display:block;color:var(--warn);font-weight:600;min-height:1.1em}
.summary{background:var(--g50);border-radius:12px;padding:14px 16px;display:grid;gap:6px;margin-top:16px;margin-bottom:4px}
.summary div{display:flex;justify-content:space-between;gap:12px}
.summary div:last-child{border-top:1px solid var(--line);padding-top:8px;font-size:1.1rem}
.result{padding:28px;text-align:center}
.result h2{margin-bottom:.4em}
.result .tick{width:56px;height:56px;border-radius:50%;background:var(--g600);color:#fff;font-size:1.8rem;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.result .tick.warn{background:var(--warn)}.result .tick.wait{background:#c58a12}
.result .summary{text-align:left}
.result p{color:var(--muted)}
.result .btn{margin-top:8px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(30px);background:var(--g900);color:#fff;padding:12px 20px;border-radius:12px;opacity:0;pointer-events:none;transition:.25s;z-index:80;max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}

@media (max-width:860px){
  .hero-grid,.about,.pd{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:1fr}
  .menu-btn{display:inline-block}
  .icon-btn{display:none}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:flex-start;gap:0;padding:8px 20px 14px;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a,.nav-cats a{padding:10px 0;width:100%}
  .nav-cats{display:flex;flex-direction:column;width:100%}
  .actions{margin-left:auto}
  .section{padding:44px 0}
  .pd-media{padding:12px}
  .hero-imgs div:last-child{margin-top:0}
}
@media (max-width:480px){ .pd-btns .row{grid-template-columns:1fr} .grid{grid-template-columns:1fr 1fr;gap:12px} .info{padding:12px} .price{font-size:1.05rem} .info .btn{padding:10px 12px} .sizes-line{display:none} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} }