:root{
  --primary:#0d7a6f; --primary-dark:#0a5c54; --accent:#1f9d57;
  --dark:#143642; --light:#f4f8f8; --border:#e2eceb;
  --text:#2b3a3a; --muted:#6b7c7b; --danger:#c0392b; --radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Inter",system-ui,Arial,sans-serif;color:var(--text);background:#fff;line-height:1.55}
.container{max-width:1140px;margin:0 auto;padding:0 20px}
a{color:var(--primary);text-decoration:none}
h1,h2,h3,h4{color:var(--dark);line-height:1.2}
img{max-width:100%}
.btn{display:inline-block;border:none;border-radius:var(--radius);font-weight:600;font-size:1rem;padding:.75em 1.6em;cursor:pointer;transition:.15s}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-light{background:#fff;color:var(--primary-dark)}
.btn-light:hover{background:#e9fbf6}
.btn-block{display:block;width:100%}
.muted{color:var(--muted)}

/* Notice bar */
.notice-bar{background:var(--dark);color:#fff;font-size:.82rem;text-align:center;padding:8px 12px}
.notice-bar strong{color:#6fe0c4}

/* Header */
.site-header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.3rem;color:var(--dark)}
.brand-mark{display:inline-grid;place-items:center;width:32px;height:32px;background:var(--primary);color:#fff;border-radius:8px;font-size:1rem}
.brand-name span{color:var(--primary)}
.main-nav{display:flex;gap:26px}
.main-nav a{color:var(--text);font-weight:500}
.main-nav a:hover{color:var(--primary)}
.cart-btn{position:relative;background:var(--light);border:1px solid var(--border);border-radius:var(--radius);padding:8px 14px;font-size:1rem;cursor:pointer}
.cart-count{background:var(--accent);color:#fff;border-radius:20px;font-size:.72rem;font-weight:700;padding:1px 7px;margin-left:2px}

/* Hero */
.hero{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff}
.hero-inner{padding:70px 20px}
.hero-text{max-width:560px}
.hero h1{color:#fff;font-size:2.6rem;margin-bottom:.4em}
.hero p{font-size:1.15rem;opacity:.95;margin-bottom:1.4em}

/* Trust row */
.trust-row{background:var(--light);border-bottom:1px solid var(--border)}
.trust-inner{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;padding:14px 20px;font-size:.86rem;color:var(--muted);font-weight:600}

/* Shop */
#shop{padding:50px 20px}
.shop-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filter-btn{background:#fff;border:1px solid var(--border);border-radius:30px;padding:6px 16px;font-size:.88rem;cursor:pointer;color:var(--text)}
.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}
.card{border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;transition:.18s;background:#fff}
.card:hover{box-shadow:0 8px 22px rgba(13,122,111,.12);transform:translateY(-3px)}
.card-img{height:150px;border-radius:8px;background:var(--light);display:grid;place-items:center;margin-bottom:12px;overflow:hidden}
.card-img svg{width:64px;height:64px;opacity:.5}
.card-img img{height:100%;width:100%;object-fit:cover}
.card-cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600}
.card h3{font-size:1.02rem;margin:4px 0}
.rx-badge{display:inline-block;background:var(--danger);color:#fff;font-size:.66rem;font-weight:700;padding:2px 7px;border-radius:5px;margin-left:6px;vertical-align:middle}
.card-desc{font-size:.85rem;color:var(--muted);flex:1;margin:6px 0 12px}
.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}
.price{font-size:1.2rem;font-weight:700;color:var(--dark)}
.add-btn{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-weight:600;cursor:pointer;font-size:.88rem}
.add-btn:hover{background:var(--primary-dark)}

/* About / Contact */
.about,.contact{padding:50px 20px;border-top:1px solid var(--border)}
.about{background:var(--light)}
.about-inner,.contact-inner{max-width:760px}
.about h2,.contact h2{margin-bottom:.5em}

/* Footer */
.site-footer{background:var(--dark);color:#cfe0de;padding:46px 20px 20px;margin-top:10px}
.footer-cols{display:flex;flex-wrap:wrap;gap:40px;margin-bottom:28px}
.footer-cols>div{min-width:160px}
.footer-cols h4{color:#fff;margin-bottom:10px;font-size:.95rem}
.footer-cols a{display:block;color:#8fe6d2;font-size:.9rem;margin-bottom:6px}
.brand-footer{color:#fff;font-size:1.1rem;margin-bottom:8px}
.brand-footer .brand-name{color:#fff}
.disclaimer{border-top:1px solid #244;padding-top:16px;font-size:.76rem;color:#9fb4b2}

/* Cart drawer */
.cart-overlay,.modal-overlay{position:fixed;inset:0;background:rgba(20,54,66,.45);opacity:0;visibility:hidden;transition:.2s;z-index:50}
.cart-overlay.open,.modal-overlay.open{opacity:1;visibility:visible}
.cart-drawer{position:fixed;top:0;right:0;height:100%;width:380px;max-width:90vw;background:#fff;z-index:60;display:flex;flex-direction:column;transform:translateX(100%);transition:.25s;box-shadow:-6px 0 24px rgba(0,0,0,.12)}
.cart-drawer.open{transform:translateX(0)}
.cart-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border)}
.cart-close,.modal-close{background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--muted)}
.cart-items{flex:1;overflow-y:auto;padding:10px 20px}
.cart-empty{color:var(--muted);text-align:center;padding:40px 0}
.cart-line{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}
.cart-line .ci-img{width:50px;height:50px;border-radius:6px;background:var(--light);display:grid;place-items:center;flex:none}
.cart-line .ci-img svg{width:28px;height:28px;opacity:.5}
.ci-main{flex:1}
.ci-name{font-weight:600;font-size:.92rem}
.ci-price{color:var(--muted);font-size:.85rem}
.qty{display:inline-flex;align-items:center;gap:8px;margin-top:6px}
.qty button{width:24px;height:24px;border:1px solid var(--border);background:#fff;border-radius:6px;cursor:pointer}
.ci-remove{background:none;border:none;color:var(--danger);cursor:pointer;font-size:.8rem}
.cart-footer{border-top:1px solid var(--border);padding:18px 20px}
.cart-total{display:flex;justify-content:space-between;font-weight:700;font-size:1.1rem;margin-bottom:12px}
.cart-note{font-size:.76rem;color:var(--muted);text-align:center;margin-top:8px}

/* Modal */
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:14px;padding:26px;width:440px;max-width:92vw;max-height:90vh;overflow-y:auto;z-index:70;visibility:hidden;opacity:0;transition:.2s}
.modal-overlay.open .modal{visibility:visible;opacity:1}
.checkout-form{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.checkout-form label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:600;color:var(--text)}
.checkout-form input,.checkout-form textarea{border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-size:.95rem;font-family:inherit}
.checkout-summary{background:var(--light);border-radius:8px;padding:12px;font-size:.88rem}
.checkout-summary .cs-line{display:flex;justify-content:space-between;margin-bottom:4px}
.checkout-summary .cs-total{font-weight:700;border-top:1px solid var(--border);padding-top:6px;margin-top:6px}
.rx-note{background:#fdecea;color:var(--danger);border-radius:8px;padding:10px;font-size:.82rem}
.order-success{text-align:center;padding:20px 0}
.order-success .check{font-size:2.4rem}

@media(max-width:720px){
  .main-nav{display:none}
  .hero h1{font-size:1.9rem}
  .hero-inner{padding:48px 20px}
}