:root { --ink:#21351d; --muted:#70806b; --line:#dce5d5; --paper:#f3f7ed; --green:#4b8b25; --green-dark:#34722c; --lime:#66a91e; --mint:#e8f3de; --orange:#ef543c; --yellow:#ffad18; --orange-soft:#fff0e7; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,textarea { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }

.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1180px)/2)); background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); position:sticky; top:0; z-index:20; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); font-size:18px; font-weight:800; letter-spacing:-.04em; }
.brand>span:last-child span { color:var(--orange); }
.brand-mark { width:40px; height:40px; display:block; overflow:hidden; border-radius:11px; background:var(--green); box-shadow:0 4px 12px rgba(52,114,44,.18); }
.brand-mark img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 24%; }
.date-pill { display:flex; align-items:center; gap:9px; background:var(--paper); border:1px solid var(--line); color:#4c5a50; font-size:13px; font-weight:700; border-radius:999px; padding:9px 13px; }
.date-dot { width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px var(--orange-soft); }

.hero { max-width:1180px; min-height:300px; margin:28px auto 0; padding:46px 48px; display:flex; justify-content:space-between; align-items:center; gap:36px; color:#fff; background:linear-gradient(118deg,var(--lime) 0%,var(--green) 48%,var(--green-dark) 100%); border-radius:28px; box-shadow:0 18px 50px rgba(54,111,43,.18); overflow:hidden; position:relative; }
.hero::before { content:''; position:absolute; width:360px; height:360px; left:-180px; bottom:-260px; border:1px solid rgba(255,255,255,.16); border-radius:50%; box-shadow:0 0 0 34px rgba(255,255,255,.035),0 0 0 68px rgba(255,255,255,.025); }
.hero-content { position:relative; z-index:1; }
.eyebrow { margin:0 0 12px; color:#ffd476; font-size:12px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(44px,5vw,68px); font-weight:500; line-height:.98; letter-spacing:-.055em; }
.hero-copy { margin:20px 0 0; max-width:570px; color:rgba(255,255,255,.82); font-size:16px; line-height:1.55; }
.hero-logo-wrap { flex:0 0 auto; width:156px; height:176px; padding:9px; border:1px solid rgba(255,255,255,.28); border-radius:24px; background:rgba(255,255,255,.1); box-shadow:0 18px 40px rgba(28,71,25,.2); transform:rotate(3deg); position:relative; z-index:1; }
.hero-logo { width:100%; height:100%; display:block; border-radius:17px; object-fit:cover; }

.page-layout { max-width:1180px; margin:0 auto; padding:38px 0 110px; display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:34px; align-items:start; }
.catalog { min-width:0; }
.catalog-tools { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:36px; }
.search-field { width:min(440px,100%); height:48px; display:flex; align-items:center; gap:11px; padding:0 14px; background:#fff; border:1px solid var(--line); border-radius:14px; transition:border-color .2s,box-shadow .2s; }
.search-field:focus-within { border-color:#82b662; box-shadow:0 0 0 4px rgba(75,139,37,.1); }
.search-field>span { color:var(--green); font-size:23px; line-height:1; transform:rotate(-15deg); }
.search-field input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--ink); }
.search-field input::placeholder { color:#929b94; }
.search-field button { border:0; background:none; color:#88928b; font-size:22px; cursor:pointer; }
.selection-label { white-space:nowrap; color:var(--muted); font-size:13px; }
.selection-label strong { color:var(--green); font-size:15px; }

.product-group { margin-bottom:34px; }
.group-heading { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.group-heading h2 { margin:0; font:500 23px/1.1 Georgia,serif; letter-spacing:-.025em; }
.group-heading>span { min-width:25px; height:25px; padding:0 7px; display:grid; place-items:center; border-radius:999px; background:#e7ebe7; color:var(--muted); font-size:11px; font-weight:800; }
.product-list { overflow:hidden; border:1px solid var(--line); border-radius:17px; background:#fff; }
.product-row { min-height:72px; padding:11px 13px 11px 18px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid #e8ece8; transition:background .18s; }
.product-row:last-child { border-bottom:0; }
.product-row.is-selected { background:#f3faed; box-shadow:inset 3px 0 0 var(--lime); }
.product-info { min-width:0; display:flex; align-items:center; gap:10px; }
.product-info h3 { margin:0; font-size:14px; font-weight:640; line-height:1.35; }
.product-info>span { flex:0 0 auto; padding:4px 7px; border-radius:6px; background:#f0f2ef; color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; }
.stepper { flex:0 0 auto; display:grid; grid-template-columns:36px 58px 36px; align-items:center; border:1px solid #d9e0da; border-radius:11px; overflow:hidden; background:#fff; }
.stepper button { width:36px; height:38px; border:0; background:#fff; color:var(--green); font-size:20px; font-weight:500; cursor:pointer; transition:background .15s; }
.stepper button:hover:not(:disabled) { background:var(--mint); }
.stepper button:disabled { color:#c5ccc7; cursor:default; }
.stepper input { width:58px; height:38px; padding:0 3px; border:0; border-left:1px solid #e6eae6; border-right:1px solid #e6eae6; outline:0; text-align:center; color:var(--ink); font-size:13px; font-weight:750; appearance:textfield; }
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button { appearance:none; margin:0; }

.notes-section { margin-top:46px; }
.text-field { display:block; margin-top:12px; padding:16px 18px; background:#fff; border:1px solid var(--line); border-radius:15px; }
.text-field>span { display:block; margin-bottom:9px; color:#36443a; font-size:13px; font-weight:750; }
.text-field textarea { width:100%; padding:0; resize:vertical; border:0; outline:0; color:var(--ink); font-size:14px; line-height:1.55; }
.text-field textarea::placeholder { color:#a0a8a1; }
.empty-state { margin:46px 0; padding:45px 20px; text-align:center; background:#fff; border:1px dashed #cbd5cd; border-radius:17px; }
.empty-state span { font-family:Georgia,serif; font-size:22px; }
.empty-state p { color:var(--muted); font-size:13px; }

.summary-card { position:sticky; top:102px; padding:22px; background:linear-gradient(145deg,#4f9228 0%,#32702c 100%); color:#fff; border-radius:21px; box-shadow:0 18px 45px rgba(52,114,44,.22); overflow:hidden; }
.summary-card::after { content:''; position:absolute; width:160px; height:160px; right:-90px; top:-95px; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 0 20px rgba(255,255,255,.025),0 0 0 40px rgba(255,255,255,.02); pointer-events:none; }
.summary-head { position:relative; z-index:1; display:flex; align-items:start; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.13); }
.summary-head p { margin:0 0 4px; color:#a9c5b5; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.summary-head h2 { margin:0; font:500 24px Georgia,serif; }
.summary-head>span { min-width:30px; height:30px; padding:0 9px; display:grid; place-items:center; border-radius:999px; background:rgba(255,255,255,.12); color:#dce9e1; font-size:12px; font-weight:800; }
.summary-body { min-height:190px; max-height:min(44vh,390px); overflow:auto; padding:18px 2px 20px; scrollbar-width:thin; scrollbar-color:#527462 transparent; }
.summary-empty { min-height:152px; display:grid; place-items:center; align-content:center; gap:11px; text-align:center; color:#a9c5b5; }
.summary-empty span { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.14); border-radius:50%; font-size:22px; }
.summary-empty p { max-width:180px; margin:0; font-size:13px; line-height:1.4; }
.summary-items { display:grid; gap:15px; }
.summary-items>div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:start; }
.summary-items span { color:#dce8e1; font-size:12px; line-height:1.35; }
.summary-items strong { color:#fff; font-size:12px; white-space:nowrap; }
.copy-button { width:100%; height:51px; border:0; border-radius:13px; background:var(--orange); color:#fff; font-size:14px; font-weight:800; cursor:pointer; box-shadow:0 8px 22px rgba(239,84,60,.3); transition:transform .15s,background .2s; }
.copy-button span { margin-right:8px; }
.copy-button:hover { background:#de4430; transform:translateY(-1px); }
.copy-button.copied,.mobile-bar button.copied { background:#3b9365; }
.clear-button { width:100%; margin-top:13px; border:0; background:none; color:#a9c5b5; font-size:12px; cursor:pointer; }
.clear-button:hover { color:#fff; }
.mobile-bar { display:none; }

@media (max-width:1228px) { .hero,.page-layout { margin-left:24px; margin-right:24px; } }
@media (max-width:850px) {
  .topbar { height:68px; padding:0 18px; }
  .hero { min-height:260px; margin-top:20px; padding:38px; }
  .hero-logo-wrap { width:130px; height:146px; }
  .page-layout { grid-template-columns:1fr; padding-top:28px; padding-bottom:120px; }
  .summary-card { display:none; }
  .mobile-bar { position:fixed; z-index:30; left:12px; right:12px; bottom:12px; min-height:68px; padding:10px 10px 10px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:linear-gradient(120deg,#4f9228,#32702c); color:#fff; border:1px solid rgba(255,255,255,.1); border-radius:18px; box-shadow:0 12px 35px rgba(38,83,31,.3); }
  .mobile-bar div { display:grid; }
  .mobile-bar div>span { font:500 22px Georgia,serif; }
  .mobile-bar small { color:#a9c5b5; font-size:10px; }
  .mobile-bar button { min-width:145px; height:46px; padding:0 18px; border:0; border-radius:12px; background:var(--orange); color:#fff; font-size:13px; font-weight:800; }
}
@media (max-width:560px) {
  .date-pill { font-size:11px; padding:8px 10px; }
  .brand { font-size:16px; }
  .brand-mark { width:34px; height:34px; }
  .hero,.page-layout { margin-left:16px; margin-right:16px; }
  .hero { min-height:0; padding:34px 26px; border-radius:22px; }
  .hero-logo-wrap { display:none; }
  h1 { font-size:43px; }
  .hero-copy { margin-top:13px; font-size:14px; }
  .catalog-tools { align-items:stretch; flex-direction:column; gap:10px; margin-bottom:30px; }
  .selection-label { align-self:flex-end; }
  .group-heading h2 { font-size:21px; }
  .product-row { min-height:82px; padding-left:14px; gap:9px; }
  .product-info { align-items:flex-start; flex-direction:column; gap:5px; }
  .product-info h3 { font-size:13px; }
  .stepper { grid-template-columns:34px 50px 34px; }
  .stepper button { width:34px; }
  .stepper input { width:50px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }