:root {
  --ink: #0f2a2e;
  --ink-2: #3d5a5e;
  --accent: #1c7c72;
  --accent-dark: #145850;
  --bg: #f6faf9;
  --card: #ffffff;
  --border: #dbe8e6;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

.site-header { background: var(--card); border-bottom: 1px solid var(--border); padding: 1rem 0; }
.row-between { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.brand { font-weight: 700; font-size: 1.25rem; color: var(--ink); }
.brand span { color: var(--accent); }
.main-nav a { color: var(--ink-2); font-weight: 600; margin-left: 1.25rem; font-size: 0.9rem; }
.main-nav a:hover { color: var(--accent-dark); text-decoration: none; }
.nav-cta { background: var(--accent); color: #fff !important; padding: 0.5rem 1rem; border-radius: 0.375rem; }
.nav-cta:hover { background: var(--accent-dark); }

.hero { padding: 4rem 0 3rem; }
.hero h1 { font-size: 2.5rem; margin: 0 0 1rem; max-width: 40rem; }
.hero p.lede { font-size: 1.15rem; color: var(--ink-2); max-width: 38rem; }
.btn-primary {
  display: inline-block; background: var(--accent); color: #fff; padding: 0.75rem 1.5rem;
  border-radius: 0.375rem; font-weight: 600; margin-top: 1rem;
}
.btn-primary:hover { background: var(--accent-dark); text-decoration: none; }
.btn-secondary {
  display: inline-block; border: 1px solid var(--border); color: var(--ink); padding: 0.75rem 1.5rem;
  border-radius: 0.375rem; font-weight: 600; margin-top: 1rem; margin-left: 0.75rem;
}

section { padding: 3rem 0; }
h2 { font-size: 1.75rem; margin-bottom: 0.5rem; }
h3 { font-size: 1.15rem; }
.muted { color: var(--ink-2); }
.small { font-size: 0.85rem; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 0.5rem; padding: 1.5rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.stat { text-align: center; }
.stat .num { font-size: 2rem; font-weight: 700; color: var(--accent-dark); }

table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
th { color: var(--ink-2); font-weight: 600; background: #eef6f5; }

form.stacked-form { max-width: 32rem; }
form.stacked-form label { display: block; font-weight: 600; margin: 1rem 0 0.35rem; }
form.stacked-form input, form.stacked-form textarea, form.stacked-form select {
  width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font: inherit;
}
form.stacked-form button { margin-top: 1.5rem; }

.newsletter-form { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.newsletter-form input { flex: 1; padding: 0.5rem; border: 1px solid var(--border); border-radius: 0.375rem; }
.newsletter-form button { background: var(--accent); color: #fff; border: none; padding: 0.5rem 0.9rem; border-radius: 0.375rem; cursor: pointer; }

.site-footer { background: var(--ink); color: #cfe3e0; padding: 3rem 0 1.5rem; margin-top: 4rem; }
.site-footer a { color: #cfe3e0; display: block; margin: 0.35rem 0; }
.site-footer h3 { color: #fff; font-size: 0.95rem; margin-bottom: 0.5rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 2rem; }
.site-footer .muted { color: #8fada9; }
.site-footer p.small { margin-top: 2rem; border-top: 1px solid #234; padding-top: 1.5rem; }

.flash { padding: 0.75rem 1rem; border-radius: 0.375rem; margin: 1rem 0; }
.flash.ok { background: #e4f5ec; color: #1a8f5a; }
.flash.error { background: #fbe9e7; color: #b3402f; }

.tag { display: inline-block; background: #eef6f5; color: var(--accent-dark); font-size: 0.75rem; font-weight: 600;
  padding: 0.15rem 0.6rem; border-radius: 999px; }
.tag.warn { background: #fdf1de; color: #9a6400; }

pre.code-block { background: #0f2a2e; color: #cfe3e0; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; font-size: 0.85rem; }

/* ---------------------------------------------------------------------------
   Store, auth, cart and checkout. Appended to the existing hand-rolled sheet
   rather than added as a second <link> — base.html's two render-blocking asset
   mistakes are catalogued, and a third stylesheet would change their shape.
   --------------------------------------------------------------------------- */
.nav-cart-count{display:inline-block;min-width:1.25rem;padding:0 .35rem;margin-left:.25rem;
  border-radius:.75rem;background:var(--accent);color:#fff;font-size:.75rem;text-align:center}
.nav-logout-form{display:inline}
.link-button{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;
  font:inherit;text-decoration:underline}
.d-block{display:block}

.category-card{display:block;text-decoration:none;color:inherit}
.category-card:hover{border-color:var(--accent)}

.product-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.product-card-media{display:block;padding:1rem 1rem 0;text-align:center}
.product-card-body{padding:0 1rem 1rem}
.product-card h3{margin:.25rem 0 .35rem;font-size:1rem;line-height:1.3}
.product-card h3 a{color:inherit;text-decoration:none}
.product-card h3 a:hover{color:var(--accent)}
.product-mark{max-width:100%;height:auto}
.product-price{font-weight:700;color:var(--ink);margin:.5rem 0}
.product-price-lg{font-size:1.5rem}
.product-compare{margin-left:.4rem;font-weight:400;color:var(--ink-2);text-decoration:line-through}
.product-rating{margin-left:.5rem;color:var(--ink-2);font-size:.85rem}
.product-facts{padding-left:1.1rem}

.store-toolbar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.store-toolbar input[type=search]{flex:1 1 16rem;padding:.5rem .65rem;border:1px solid var(--border);
  border-radius:.375rem;font:inherit}
.store-toolbar select,.store-toolbar button{padding:.5rem .75rem;border:1px solid var(--border);
  border-radius:.375rem;font:inherit;background:var(--card)}
.store-toolbar button{background:var(--accent);color:#fff;border-color:var(--accent);cursor:pointer}

.pagination{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin:1.5rem 0}
.pagination a,.pagination-current{padding:.35rem .7rem;border:1px solid var(--border);
  border-radius:.375rem;text-decoration:none}
.pagination-current{background:var(--accent);color:#fff;border-color:var(--accent)}

.breadcrumb{margin-bottom:1rem}
.product-detail{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:2rem;
  align-items:start}
.product-detail-media{text-align:center}
@media (max-width:44rem){.product-detail{grid-template-columns:1fr}}
.add-to-cart-form{display:flex;gap:.5rem;align-items:flex-end;flex-wrap:wrap;margin-top:1rem}
.add-to-cart-form label{display:block;font-size:.85rem;color:var(--ink-2)}
.add-to-cart-form input[type=number]{width:5rem;padding:.5rem;border:1px solid var(--border);
  border-radius:.375rem;font:inherit}

.cart-table{width:100%;margin-bottom:1.5rem}
.cart-qty-form{display:flex;gap:.35rem}
.cart-qty-form input{width:4rem;padding:.35rem;border:1px solid var(--border);border-radius:.375rem;font:inherit}
.cart-qty-form button{padding:.35rem .6rem;border:1px solid var(--border);border-radius:.375rem;
  background:var(--card);font:inherit;cursor:pointer}
.cart-summary{max-width:22rem;margin-left:auto;text-align:right}
.cart-summary p{margin:.35rem 0}
.cart-total{font-size:1.15rem;border-top:1px solid var(--border);padding-top:.5rem}

.checkout-steps{display:flex;gap:1.5rem;list-style:none;padding:0;margin:0 0 1.5rem}
.checkout-steps li{color:var(--ink-2);font-size:.9rem}
.checkout-steps li.is-current{color:var(--ink);font-weight:600}
.checkout-step-num{display:inline-block;width:1.5rem;height:1.5rem;line-height:1.5rem;
  border-radius:50%;background:var(--border);color:var(--ink);text-align:center;font-size:.8rem;
  margin-right:.35rem}
.checkout-steps li.is-current .checkout-step-num{background:var(--accent);color:#fff}

.account-nav{margin-bottom:1rem}