/* Alpine & Oak Outfitters — a warm, editorial e-commerce identity. Nothing
   Sarcio-branded here on purpose: the widget is the only Sarcio element. */
:root {
  --bg: #faf6f0;
  --panel: #ffffff;
  --line: #e8e0d4;
  --ink: #2b2620;
  --ink-2: #7d7365;
  --terracotta: #c05b3c;
  --forest: #3e5c48;
  --gold: #b98a2e;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.65 Georgia, 'Times New Roman', serif;
}
.wrap { max-width: 820px; margin: 0 auto; padding: 0 20px 96px; }
header.site {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 26px 0 18px; border-bottom: 3px double var(--line); margin-bottom: 42px;
}
.logo { font-size: 24px; letter-spacing: 0.02em; }
.logo a { color: var(--ink); text-decoration: none; }
.logo .amp { color: var(--terracotta); font-style: italic; }
.crumb { font: 12px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.crumb a { color: var(--ink-2); text-decoration: none; }
.kicker {
  color: var(--terracotta); font: 700 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 12px;
}
h1 { font-size: 40px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; margin: 0 0 12px; }
.lede { color: var(--ink-2); max-width: 60ch; margin: 0 0 36px; }
.lede code, .panel code {
  font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #f1e9dd; border-radius: 4px; padding: 1px 6px; color: var(--ink);
}
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 28px; margin-bottom: 24px; box-shadow: 0 1px 0 var(--line);
}
.panel h2 { margin: 0 0 4px; font-size: 21px; font-weight: 500; }
.panel .sub { color: var(--ink-2); font-size: 13.5px; margin: 0 0 18px; }
label {
  display: block; font: 700 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin: 14px 0 8px;
}
input {
  width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 3px;
  background: #fffdf9; color: var(--ink); font: 15px Georgia, serif;
}
input:focus { outline: 2px solid var(--forest); outline-offset: 1px; }
.cart-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 16px;
  align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.cart-row:last-child { border-bottom: 0; }
.cart-name { font-size: 16px; }
.cart-qty { display: flex; align-items: center; gap: 10px; font: 14px ui-sans-serif, system-ui, sans-serif; }
.cart-qty button {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--ink); cursor: pointer; font-size: 14px;
}
.cart-qty button:hover { border-color: var(--terracotta); color: var(--terracotta); }
.cart-price { font-size: 16px; }
.cart-sub span, .cart-coupon span { color: var(--ink-2); }
.cart-coupon span:last-child { color: var(--forest); }
.cart-total { border-top: 2px solid var(--ink); margin-top: 4px; }
.cart-total b { font-size: 22px; }
.status-line { color: var(--ink-2); font: 13px ui-sans-serif, system-ui, sans-serif; }
.status-line b.on { color: var(--forest); }
footer.site {
  margin-top: 48px; color: var(--ink-2); font-size: 13px;
  border-top: 3px double var(--line); padding-top: 18px; font-style: italic;
}