/*
Theme Name: hh-greenhouse
Theme URI: https://honeypothouseplants.com
Author: Joshua (nephew)
Description: Hand-rolled theme for Honeypot Houseplants.
Version: 1.0
License: MIT
Text Domain: hh-greenhouse
*/

:root {
  --hh-toolbar: #4f6f7a; --hh-surface: #3e3e3e; --hh-surface-light: #4a4a4a;
  --hh-accent: #81a823; --hh-text: #e8ecef; --hh-text-darker: #b9c3c9;
  --hh-outline: rgba(255,255,255,0.1);
}
body { margin: 0; background: var(--hh-surface); color: var(--hh-text); font-family: system-ui, -apple-system, sans-serif; }
a { color: var(--hh-accent); text-decoration: none; }
.hh-toolbar { background: var(--hh-toolbar); padding: 0 16px; }
.hh-toolbar-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 16px; height: 56px; }
.hh-toolbar a, .hh-toolbar .hh-appname { color: #f2f5f7; font-weight: 500; }
.hh-appname { font-size: 1.05rem; }
.hh-search { flex: 1; }
.hh-search input { width: 60%; background: var(--hh-surface-light); border: 1px solid var(--hh-outline); color: var(--hh-text); border-radius: 4px; padding: 6px 10px; }
.hh-basket-count { background: var(--hh-accent); color: #1b1b1b; border-radius: 10px; padding: 0 6px; font-size: .8rem; margin-left: 4px; }
.hh-main { max-width: 1200px; margin: 24px auto; padding: 0 16px; }
.hh-hero h1 { font-size: 1.9rem; margin-bottom: 8px; }
.hh-hero p { color: var(--hh-text-darker); max-width: 640px; }
.hh-button { display: inline-block; background: var(--hh-accent); color: #1b1b1b !important; padding: 8px 18px; border-radius: 4px; font-weight: 600; border: none; cursor: pointer; }
.hh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 20px 0; }
.hh-card { background: var(--hh-surface-light); border: 1px solid var(--hh-outline); border-radius: 6px; overflow: hidden; }
.hh-card img { width: 100%; height: 200px; object-fit: cover; display: block; background: #fff; }
.hh-card-body { padding: 12px; }
.hh-card-name { margin: 0 0 4px; font-size: 1.05rem; }
.hh-card-name a { color: var(--hh-text); }
.hh-card-sub { color: var(--hh-text-darker); font-size: .85rem; min-height: 2.2em; margin: 0 0 8px; }
.hh-card-price { color: var(--hh-accent); font-weight: 700; margin: 0; }
.hh-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hh-detail img { width: 100%; border-radius: 6px; background: #fff; }
.hh-detail-price { font-size: 1.4rem; }
.hh-care { color: var(--hh-text-darker); }
.hh-qty { width: 5rem; background: var(--hh-surface-light); color: var(--hh-text); border: 1px solid var(--hh-outline); border-radius: 4px; padding: 6px 8px; }
.hh-form label { display: block; margin-bottom: 14px; color: var(--hh-text-darker); }
.hh-form input, .hh-form textarea, .hh-form select { display: block; width: 100%; margin-top: 4px; background: var(--hh-surface-light); color: var(--hh-text); border: 1px solid var(--hh-outline); border-radius: 4px; padding: 8px 10px; }
.hh-table { width: 100%; border-collapse: collapse; }
.hh-table th, .hh-table td { text-align: left; padding: 6px 12px; border-bottom: 1px solid var(--hh-outline); }
.hh-table th { color: var(--hh-text-darker); font-weight: 500; }
.hh-footer { max-width: 1200px; margin: 40px auto; padding: 16px; color: var(--hh-text-darker); font-size: .85rem; border-top: 1px solid var(--hh-outline); }
@media (max-width: 800px) { .hh-detail { grid-template-columns: 1fr; } }