:root{--olive:#566249;--olive2:#6F7B5F;--cream:#F7F3EC;--paper:#FFFDF9;--ink:#3F382F;--muted:#7B746B;--line:#DDD6C9;--pink:#B76878}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#F7F3EC,#EFEADF);font-family:Poppins,Arial,sans-serif;color:var(--ink)}
a{text-decoration:none;color:inherit}.wrap{max-width:1180px;margin:auto;padding:0 18px 70px}.top{position:sticky;top:0;z-index:30;background:rgba(255,253,249,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topin{max-width:1180px;margin:auto;padding:12px 18px;display:flex;align-items:center;gap:12px}.brand{font-family:Georgia,serif;font-weight:900;font-size:1.35rem;color:#4F5B43;flex:1}.brand small{display:block;font-family:Poppins,sans-serif;font-size:.6rem;letter-spacing:2px;color:#857E72;text-transform:uppercase;margin-top:2px}
.navbtn,.cartbtn{border:1px solid #A9B19C;background:#fff;color:#4F5B43;border-radius:11px;padding:9px 12px;font-weight:850;cursor:pointer}.cartbtn{background:#566249;color:#fff;border:0}
.hero{padding:34px 0 18px;display:grid;grid-template-columns:1.25fr .75fr;gap:18px;align-items:center}.hero h1{font-family:Georgia,serif;font-size:clamp(2.2rem,5vw,4rem);line-height:1.03;margin:0;color:#4A4D38}.hero p{color:#6F675E;line-height:1.65;max-width:720px}.hero-card{background:linear-gradient(135deg,#EEF1E7,#FFF9F3);border:1px solid #D5D9C8;border-radius:22px;padding:20px}.hero-card b{display:block;color:#4F5B43;font-size:1.05rem}.hero-card span{display:block;color:#776F66;font-size:.78rem;line-height:1.55;margin-top:6px}
.toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin:14px 0 18px}.search{width:100%;border:1px solid #CFC8BC;border-radius:13px;padding:13px 14px;background:#fff;font:inherit;outline:none}.search:focus{border-color:#6F7B5F;box-shadow:0 0 0 3px rgba(111,123,95,.11)}
.filters{display:flex;gap:7px;flex-wrap:wrap}.filter{border:1px solid #BFC6B3;background:#fff;color:#576047;border-radius:999px;padding:10px 12px;font-weight:850;font-size:.75rem;cursor:pointer}.filter.on{background:#566249;color:#fff;border-color:#566249}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.card{background:#FFFDF9;border:1px solid #DDD6C9;border-radius:18px;overflow:hidden;box-shadow:0 8px 22px rgba(66,59,48,.05);display:flex;flex-direction:column}.pic{height:220px;background:#F4F1EA;display:flex;align-items:center;justify-content:center;position:relative}.pic img{width:100%;height:100%;object-fit:contain;padding:12px}.placeholder{text-align:center;color:#7E786E;font-weight:800;font-size:.75rem;padding:15px}.badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap}.badge{background:#fff;border:1px solid #D9D4C8;color:#5E604A;border-radius:999px;padding:5px 7px;font-size:.58rem;font-weight:900}.badge.pro{background:#FFF3DF;color:#765C2F;border-color:#E9D1A6}.badge.sup{background:#F4EAF1;color:#84556C;border-color:#DEC3D2}
.copy{padding:13px;display:flex;flex-direction:column;gap:7px;flex:1}.code{font-size:.6rem;color:#8C857B;font-weight:800}.name{font-weight:950;color:#414730;line-height:1.25}.benefit{font-size:.72rem;color:#756E65;line-height:1.45;min-height:45px}.price{font-weight:950;color:#4F5B43;font-size:1rem}.actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:auto}.actions button{border-radius:10px;padding:10px 8px;font-weight:900;cursor:pointer;font-family:inherit}.add{background:#fff;border:1px solid #8D987B;color:#526041}.buy{background:#566249;color:#fff;border:0}.detail{border:0;background:transparent;color:#6A7058;font-weight:850;text-align:left;padding:0;cursor:pointer;font-size:.7rem}
.drawer{position:fixed;inset:0;z-index:70;background:rgba(28,28,24,.44);display:none;align-items:stretch;justify-content:flex-end}.drawer.on{display:flex}.panel{width:min(520px,100%);background:#FFFDF9;height:100%;overflow:auto;box-shadow:-20px 0 55px rgba(0,0,0,.18)}.phead{position:sticky;top:0;background:#FFFDF9;border-bottom:1px solid #DDD6C9;padding:14px 16px;display:flex;align-items:center;gap:10px;z-index:2}.phead b{flex:1;color:#4F5B43;font-family:Georgia,serif}.close{border:1px solid #CFC8BC;background:#fff;border-radius:9px;padding:7px 10px;cursor:pointer}.pbody{padding:15px}
.cartrow{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px 0;border-bottom:1px solid #EEE9DF}.cartrow img{width:58px;height:62px;object-fit:contain;background:#F6F3ED;border-radius:9px}.cartrow b{font-size:.76rem;line-height:1.3}.cartrow small{display:block;color:#7A736A;margin-top:4px}.qty{display:flex;gap:5px;align-items:center;margin-top:7px}.qty button{width:28px;height:28px;border:1px solid #CFC8BC;background:#fff;border-radius:7px;cursor:pointer}.rm{border:0;background:transparent;color:#A15B5B;cursor:pointer;font-size:.66rem;font-weight:800}
.total{display:flex;justify-content:space-between;padding:13px 0;font-weight:950;color:#4F5B43}.checkout{width:100%;border:0;border-radius:12px;padding:13px;background:#566249;color:#fff;font-weight:950;cursor:pointer}.empty{padding:40px 10px;text-align:center;color:#7A736A}
.modal{position:fixed;inset:0;z-index:90;background:rgba(28,28,24,.5);display:none;align-items:center;justify-content:center;padding:16px}.modal.on{display:flex}.modalbox{width:min(760px,100%);max-height:92vh;overflow:auto;background:#FFFDF9;border-radius:20px;border:1px solid #DDD6C9;box-shadow:0 25px 80px rgba(0,0,0,.25)}.mhead{padding:14px 16px;border-bottom:1px solid #DDD6C9;display:flex;align-items:center;gap:10px;position:sticky;top:0;background:#FFFDF9;z-index:2}.mhead b{flex:1;color:#4F5B43}.mbody{padding:16px}.checkout-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field.full{grid-column:1/-1}.field label{display:block;font-size:.67rem;font-weight:850;color:#625D55;margin-bottom:5px}.field input,.field textarea{width:100%;border:1px solid #CFC8BC;border-radius:10px;padding:11px;font:inherit;background:#fff}.field textarea{min-height:80px}.payopts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.payopt{border:1px solid #CFC8BC;border-radius:12px;padding:10px;background:#fff}.submit{width:100%;border:0;border-radius:12px;padding:13px;background:#566249;color:#fff;font-weight:950;cursor:pointer}.msg{margin-top:10px;border-radius:10px;padding:10px;font-size:.72rem;display:none}.msg.on{display:block}.msg.err{background:#FFF0EE;color:#7D443B;border:1px solid #E7C7C2}.msg.ok{background:#EDF6EA;color:#3F6438;border:1px solid #C9E0C2}
.policy{margin-top:30px;padding-top:18px;border-top:1px solid #D8D1C6;display:flex;gap:12px;flex-wrap:wrap;color:#746C63;font-size:.72rem}.policy a{text-decoration:underline}.offline{position:fixed;left:10px;bottom:10px;background:#FFF7DA;border:1px solid #DFC867;border-radius:999px;padding:6px 9px;font-size:.62rem;font-weight:900;color:#6C5B2D;display:none}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}.toolbar{grid-template-columns:1fr}.filters{overflow:auto;flex-wrap:nowrap;padding-bottom:4px}}
@media(max-width:560px){.topin{padding:10px 12px}.brand{font-size:1.02rem}.navbtn{display:none}.wrap{padding:0 12px 60px}.grid{grid-template-columns:1fr 1fr;gap:9px}.pic{height:155px}.copy{padding:10px}.name{font-size:.78rem}.benefit{font-size:.65rem;min-height:0}.actions{grid-template-columns:1fr}.checkout-grid,.payopts{grid-template-columns:1fr}.field.full{grid-column:auto}.hero{padding-top:22px}.hero h1{font-size:2.3rem}}