/* Smart Buyer Field — New Design System
   Warm old palette replaced with Ink / Paper / Electric Blue
   No external CSS frameworks required beyond Tailwind CDN (colors synced) */
:root{
  --ink:#12372F;
  --ink-soft:#245448;
  --ink-muted:#71877E;
  --paper:#F7F8F2;
  --paper-soft:#E8F2E9;
  --surface:#FFFFFF;
  --line:#DCE7DD;
  --line-strong:#C3D4C5;
  --accent:#16805D;
  --accent-hover:#106448;
  --accent-teal:#287A70;
  --accent-teal-soft:#D5F0E7;
  --accent-rose:#C65B63;
  --radius-xl:1.25rem;
  --radius-2xl:1.5rem;
  --radius-pill:999px;
  --shadow-soft:0 8px 24px rgba(18,55,47,0.06);
  --shadow-float:0 18px 40px rgba(18,55,47,0.12);
}
*{ -webkit-font-smoothing:antialiased; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  overflow-x:hidden;
}
.font-display{ font-family:'Fraunces',serif; }
.font-sans{ font-family:'Inter',sans-serif; }
::selection{ background:var(--accent); color:#fff; }

/* Scrollbar */
::-webkit-scrollbar{ width:7px; height:7px; }
::-webkit-scrollbar-track{ background:var(--paper); }
::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:999px; }
::-webkit-scrollbar-thumb:hover{ background:var(--ink-muted); }

/* Utility helpers */
.container-max{ max-width:1280px; margin:0 auto; padding:0 20px; }
@media(min-width:768px){ .container-max{ padding:0 28px; } }
.glass{
  background:rgba(255,255,255,0.84);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.announcement{
  background:var(--ink);
  color:#fff;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:700;
}
.nav-link{
  position:relative;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  font-weight:800; color:var(--ink-muted);
  padding-bottom:4px;
  transition:color .2s;
}
.nav-link:hover, .nav-link.active{ color:var(--ink); }
.nav-link.active::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--accent); border-radius:999px;
}

/* Buttons */
.btn-primary{
  background:var(--ink);
  color:#fff;
  font-weight:800; font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  padding:16px 26px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:all .22s ease;
  box-shadow:0 10px 20px rgba(15,23,42,0.14);
}
.btn-primary:hover{ background:var(--accent); transform:translateY(-1px); }
.btn-secondary{
  background:#fff; color:var(--ink);
  border:1px solid var(--line);
  font-weight:800; font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  padding:14px 22px; border-radius:999px; transition:all .2s;
}
.btn-secondary:hover{ border-color:var(--ink); }
.btn-ghost{
  background:var(--paper-soft); color:var(--accent); border:1px solid #DBEAFE;
  font-weight:800; font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  padding:12px 18px; border-radius:999px;
}
.badge-count{
  background:var(--accent-rose); color:#fff; font-weight:900; font-size:11px;
  min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* Cards */
.product-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:1.25rem;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:all .28s ease;
}
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-float); border-color:#C3D4C5; }
.product-media{
  background:#F1F5F9; border-bottom:1px solid var(--line);
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  padding:18px; position:relative; overflow:hidden;
}
.product-media img{ max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .6s ease; }
.product-card:hover .product-media img{ transform:scale(1.06); }
.sku-pill{
  position:absolute; top:12px; left:12px;
  background:rgba(255,255,255,0.92); border:1px solid var(--line);
  padding:6px 10px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft);
  backdrop-filter:blur(6px);
}
.price{ color:var(--accent-rose); font-weight:900; letter-spacing:-0.02em; }

/* Filters */
.filter-pill{
  background:#fff; border:1px solid var(--line); color:var(--ink-muted);
  padding:10px 16px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
  transition:all .2s; cursor:pointer;
}
.filter-pill:hover{ border-color:var(--ink); color:var(--ink); }
.filter-pill.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* Toast */
#toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(90px);
  background:var(--ink); color:#fff;
  padding:14px 20px; border-radius:999px;
  display:flex; align-items:center; gap:12px;
  font-weight:700; font-size:13px; letter-spacing:0.02em;
  box-shadow:0 16px 40px rgba(15,23,42,0.32);
  border:1px solid rgba(255,255,255,0.12);
  opacity:0; pointer-events:none;
  transition:all .42s cubic-bezier(0.22,1,0.36,1);
  z-index:9999;
}
#toast.show{ transform:translateX(-50%) translateY(0); opacity:1; }
#toast i{ font-size:18px; color:#fff; }

/* Drawer / Console */
#cart-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,0.46); backdrop-filter:blur(4px);
  z-index:80; opacity:0; pointer-events:none; transition:opacity .3s ease;
}
#cart-overlay.open{ opacity:1; pointer-events:auto; }
#cart-drawer{
  position:fixed; top:0; right:0; height:100dvh; height:100svh; width:min(560px, 100vw);
  background:#fff; z-index:81; border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .44s cubic-bezier(0.22,1,0.36,1);
  display:flex; flex-direction:column; box-shadow:-20px 0 60px rgba(15,23,42,0.18);
  overflow:hidden;
}
#cart-drawer.open{ transform:translateX(0); }
.drawer-head{
  padding:22px 24px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--paper);
  flex-shrink:0;
}
.cart-scroll{
  flex:1; overflow-y:auto; min-height:0; display:flex; flex-direction:column;
  background:#F7F8F2;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#C3D4C5 transparent;
}
.cart-scroll::-webkit-scrollbar{ width:6px; }
.cart-scroll::-webkit-scrollbar-thumb{ background:#C3D4C5; border-radius:999px; }
.cart-scroll::-webkit-scrollbar-track{ background:transparent; }
.cart-list{
  padding:18px; display:flex; flex-direction:column; gap:14px; background:#F7F8F2;
  flex:0 0 auto;
}
.cart-checkout{
  padding:18px; border-top:1px solid var(--line); background:#fff; flex-shrink:0;
}
.cart-item{
  background:#fff; border:1px solid var(--line); border-radius:1rem; padding:12px; display:flex; gap:12px;
}
.qty-btn{
  width:32px; height:32px; border-radius:999px; border:1px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:900; transition:all .2s;
}
.qty-btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* Form */
.field-label{
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase; font-weight:800; color:var(--ink-muted); margin-bottom:8px; display:block;
}
.input{
  width:100%; background:#fff; border:1px solid var(--line);
  padding:14px 16px; border-radius:0.9rem; font-size:14px; font-weight:600; color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
.input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(37,99,235,0.12); }
.input::placeholder{ color:#94A3B8; font-weight:500; }
textarea.input{ resize:vertical; }

/* Section headings */
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase; font-weight:900; color:var(--accent);
}
.kicker::before{ content:""; width:22px; height:2px; background:var(--accent); border-radius:999px; display:inline-block; }

.hero-grid{
  display:grid; grid-template-columns:1fr; gap:28px;
}
@media(min-width:1024px){ .hero-grid{ grid-template-columns:1.05fr 0.95fr; align-items:center; } }

.stat{
  background:#fff; border:1px solid var(--line); border-radius:1rem; padding:16px 18px;
  display:flex; align-items:center; gap:14px;
}
.stat b{ font-size:18px; line-height:1; }
.stat span{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; color:var(--ink-muted); }

/* Footer */
.site-footer{ background:var(--ink); color:#fff; }
.footer-link{ color:rgba(255,255,255,0.72); font-size:13px; font-weight:600; transition:color .2s; }
.footer-link:hover{ color:#fff; }
.footer-title{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; font-weight:900; color:#94A3B8; margin-bottom:16px; }

/* Policy page */
.policy-wrap{ display:grid; grid-template-columns:1fr; gap:22px; }
@media(min-width:980px){ .policy-wrap{ grid-template-columns:260px 1fr; } }
.toc{
  position:sticky; top:92px; align-self:start;
  background:#fff; border:1px solid var(--line); border-radius:1rem; padding:16px;
}
.toc a{ display:block; padding:10px 12px; border-radius:999px; font-size:13px; font-weight:700; color:var(--ink-muted); }
.toc a:hover{ background:var(--paper); color:var(--ink); }
.policy-card{ background:#fff; border:1px solid var(--line); border-radius:1.25rem; padding:28px; }
@media(min-width:768px){ .policy-card{ padding:36px; } }

/* Simple divider */
.divider{ height:1px; background:var(--line); }

/* Hide scroll */
.hide-scroll::-webkit-scrollbar{ display:none; }
.hide-scroll{ scrollbar-width:none; -ms-overflow-style:none; }

/* Modal */
.modal-bg{
  position:fixed; inset:0; background:rgba(15,23,42,0.68); backdrop-filter:blur(6px);
  z-index:90; display:none; align-items:center; justify-content:center; padding:16px;
}
.modal-bg.open{ display:flex; }
.modal-card{
  background:#fff; border:1px solid var(--line); border-radius:1.5rem;
  width:min(520px, 100%); padding:28px; box-shadow:var(--shadow-float);
}