/*
 * WTS tallow soap calculator 1.4.3
 * The tool is scoped under .wts-calc, so it keeps its look inside v3 pages and nothing leaks into the
 * theme. The .wts-offer-* and .wts-compare blocks at the end style the calculator page's own sections.
 * Print rules apply only while html.wc-printing is set by Print.
 * Status colors: green = on target, amber = leans or watch, red = fix before making it.
 */
.wts-calc {
  --wc-ink: #211f1b; --wc-ink-soft: #3a3731; --wc-muted: #646159; --wc-stone: #6d6a62;
  --wc-forest: #304036; --wc-forest-deep: #243129; --wc-brass: #9a7846; --wc-brass-ink: #7d5f33;
  --wc-bone: #f1eee7; --wc-cream: #f7f5ef; --wc-white: #fbfaf7; --wc-paper: #fff;
  --wc-line: #d4d0c7; --wc-line-soft: #e5e1d8; --wc-track: #ebe7de;
  --wc-ok: #304036; --wc-ok-ink: #243129; --wc-ok-bg: #eaeee8; --wc-ok-line: #b9c4b8; --wc-ok-band: rgba(48, 64, 54, 0.16);
  --wc-watch: #d4911c; --wc-watch-ink: #7a4f00; --wc-watch-bg: #fdf4e3; --wc-watch-line: #ecc77a;
  --wc-fix: #cc3d2b; --wc-fix-ink: #99261b; --wc-fix-bg: #fcebe8; --wc-fix-line: #eeaa9f;
  --wc-build: #8a867c; --wc-build-bg: #f3f1ec;
  --wc-font: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wc-r: 14px; --wc-r-sm: 10px;
  --wc-shadow: 0 1px 2px rgba(33, 31, 27, 0.05), 0 12px 28px -18px rgba(33, 31, 27, 0.28);
  --wc-top-offset: calc(var(--wt-header-h, 68px) + 20px);
  font-family: var(--wc-font); color: var(--wc-ink); font-size: 16px; line-height: 1.5; text-align: left;
}
.wts-calc *, .wts-calc *::before, .wts-calc *::after { box-sizing: border-box; }
.wts-calc [hidden] { display: none !important; }
.wts-calc :where(h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; }
.wts-calc :where(ul, ol) { padding: 0; list-style: none; }
.wts-calc .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wts-calc :focus-visible { outline: 2px solid var(--wc-brass); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .wts-calc *, .wts-calc *::before, .wts-calc *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Buttons ---------- */
.wts-calc .wc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--wc-ink); font: 600 15px/1.2 var(--wc-font); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.wts-calc .wc-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.wts-calc .wc-btn--sm { min-height: 38px; padding: 7px 14px; font-size: 14px; }
.wts-calc .wc-btn--xs { min-height: 32px; padding: 5px 12px; font-size: 13px; }
.wts-calc .wc-btn--primary { background: var(--wc-forest); color: var(--wc-bone); }
.wts-calc .wc-btn--primary:hover { background: var(--wc-forest-deep); color: var(--wc-bone); }
.wts-calc .wc-btn--outline { border-color: var(--wc-forest); color: var(--wc-forest-deep); background: var(--wc-paper); }
.wts-calc .wc-btn--outline:hover { background: var(--wc-bone); }
.wts-calc .wc-btn--ghost { border-color: var(--wc-line); color: var(--wc-ink-soft); background: var(--wc-paper); }
.wts-calc .wc-btn--ghost:hover:not(:disabled) { border-color: var(--wc-stone); color: var(--wc-ink); }
.wts-calc .wc-btn--danger { color: var(--wc-fix-ink); }
.wts-calc .wc-btn--danger:hover { border-color: var(--wc-fix); color: var(--wc-fix-ink); }
.wts-calc .wc-btn--danger-solid { background: var(--wc-fix-ink); color: #fff; }
.wts-calc .wc-btn--danger-solid:hover { background: #7f1f15; color: #fff; }
.wts-calc .wc-link { background: none; border: 0; padding: 0; font: 600 14px/1.4 var(--wc-font); color: var(--wc-forest); text-decoration: underline; text-decoration-color: rgba(48, 64, 54, 0.35); text-underline-offset: 3px; cursor: pointer; }
.wts-calc .wc-link:hover { color: var(--wc-forest-deep); text-decoration-color: currentColor; }

/* ---------- Shell ---------- */
.wts-calc .wc { background: var(--wc-paper); border: 1px solid var(--wc-line); border-radius: 20px; box-shadow: var(--wc-shadow); }
.wts-calc .wc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 16px; border-bottom: 1px solid var(--wc-line-soft); }
.wts-calc .wc-top__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wts-calc .wc-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1 1 460px; max-width: 620px; }
.wts-calc .wc-mode__opt { position: relative; cursor: pointer; }
.wts-calc .wc-mode__opt input { position: absolute; opacity: 0; pointer-events: none; }
.wts-calc .wc-mode__opt span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px 12px 40px; border: 1.5px solid var(--wc-line); border-radius: var(--wc-r); background: var(--wc-paper); transition: border-color 0.2s, background-color 0.2s; }
.wts-calc .wc-mode__opt span::before { content: ""; position: absolute; left: 14px; top: 15px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--wc-line); background: var(--wc-paper); }
.wts-calc .wc-mode__opt b { font-size: 15px; font-weight: 600; color: var(--wc-ink); }
.wts-calc .wc-mode__opt small { font-size: 13px; color: var(--wc-muted); line-height: 1.35; }
.wts-calc .wc-mode__opt input:checked + span { border-color: var(--wc-forest); background: var(--wc-cream); }
.wts-calc .wc-mode__opt input:checked + span::before { border-color: var(--wc-forest); background: var(--wc-forest); box-shadow: inset 0 0 0 3px var(--wc-paper); }
.wts-calc .wc-mode__opt input:focus-visible + span { outline: 2px solid var(--wc-brass); outline-offset: 2px; }
@media (max-width: 479px) {
  .wts-calc .wc-mode__opt span { padding: 10px 10px 10px 34px; }
  .wts-calc .wc-mode__opt span::before { left: 11px; top: 13px; width: 14px; height: 14px; }
  .wts-calc .wc-mode__opt b { font-size: 14px; }
  .wts-calc .wc-mode__opt small { font-size: 12px; }
  .wts-calc .wc-top__actions { width: 100%; }
  .wts-calc .wc-top__actions .wc-btn { flex: 1 1 0; padding-inline: 8px; }
}
.wts-calc .wc-draft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 16px 0; padding: 10px 14px; border: 1px solid var(--wc-line); border-radius: var(--wc-r-sm); background: var(--wc-cream); font-size: 14px; }
.wts-calc .wc-draft__actions { display: flex; gap: 8px; }

.wts-calc .wc-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.wts-calc .wc-inputs { padding: 18px 16px 0; min-width: 0; container-type: inline-size; }
.wts-calc .wc-results { padding: 18px 16px 20px; background: var(--wc-bone); border-top: 1px solid var(--wc-line-soft); border-radius: 0 0 20px 20px; min-width: 0; scroll-margin-top: var(--wc-top-offset); outline: none; }
@media (min-width: 1024px) {
  .wts-calc .wc-body { grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr); }
  .wts-calc .wc-inputs { padding: 22px 24px 24px; border-right: 1px solid var(--wc-line-soft); }
  .wts-calc .wc-results { padding: 22px 22px 24px; border-top: 0; border-radius: 0 0 20px 0; }
  .wts-calc .wc-panel { position: sticky; top: var(--wc-top-offset); max-height: calc(100vh - var(--wt-header-h, 68px) - 40px); overflow-y: auto; overscroll-behavior: contain; margin-right: -8px; padding-right: 8px; scrollbar-width: thin; }
}
@media (min-width: 700px) {
  .wts-calc .wc-top, .wts-calc .wc-inputs { padding-left: 24px; padding-right: 24px; }
}

/* ---------- Input groups ---------- */
.wts-calc .wc-group { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--wc-line-soft); }
.wts-calc .wc-group:last-of-type { border-bottom: 0; }
.wts-calc .wc-group__title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 17px; font-weight: 600; letter-spacing: -0.005em; color: var(--wc-ink); }
.wts-calc .wc-group__title small { font-size: 13px; font-weight: 500; color: var(--wc-muted); }
.wts-calc .wc-num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--wc-forest); color: var(--wc-bone); font-size: 13px; font-weight: 600; }
.wts-calc .wc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 14px; }
.wts-calc .wc-grid--batch { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 520px) { .wts-calc .wc-grid--batch { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.wts-calc .wc-field { min-width: 0; }
.wts-calc .wc-field--wide { grid-column: 1 / -1; }
.wts-calc .wc-field label, .wts-calc .wc-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--wc-ink-soft); }
.wts-calc .wc-hint { margin: 6px 0 0; font-size: 13px; color: var(--wc-muted); line-height: 1.45; }
.wts-calc input[type="text"], .wts-calc input[type="number"], .wts-calc input[type="search"], .wts-calc select, .wts-calc .wc-input {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--wc-line); border-radius: var(--wc-r-sm); background: var(--wc-paper); color: var(--wc-ink); font: 500 16px/1.3 var(--wc-font); box-shadow: none; transition: border-color 0.15s, box-shadow 0.15s; }
.wts-calc input:focus, .wts-calc select:focus { outline: none; border-color: var(--wc-forest); box-shadow: 0 0 0 3px rgba(48, 64, 54, 0.14); }
.wts-calc input[type="number"] { -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; }
.wts-calc input[type="number"]::-webkit-outer-spin-button, .wts-calc input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wts-calc select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--wc-stone) 50%), linear-gradient(-45deg, transparent 50%, var(--wc-stone) 50%); background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.wts-calc .wc-suffix { position: relative; display: flex; align-items: stretch; }
.wts-calc .wc-suffix input { padding-right: 44px; }
.wts-calc .wc-suffix > span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 600; color: var(--wc-stone); pointer-events: none; }

/* Segmented controls */
.wts-calc .wc-seg { display: flex; flex-wrap: nowrap; gap: 4px; padding: 4px; border: 1px solid var(--wc-line); border-radius: 999px; background: var(--wc-cream); }
.wts-calc .wc-seg label { flex: 1 1 0; min-width: 0; position: relative; cursor: pointer; margin: 0; }
.wts-calc .wc-seg input { position: absolute; opacity: 0; pointer-events: none; }
.wts-calc .wc-seg span { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 8px; white-space: nowrap; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--wc-stone); text-align: center; transition: background-color 0.2s, color 0.2s; }
.wts-calc .wc-seg input:checked + span { background: var(--wc-forest); color: var(--wc-bone); }
.wts-calc .wc-seg input:focus-visible + span { outline: 2px solid var(--wc-brass); outline-offset: 1px; }
.wts-calc .wc-seg--water { flex-wrap: wrap; margin-bottom: 12px; border-radius: 14px; }
.wts-calc .wc-seg--water label { flex: 1 1 auto; }
.wts-calc .wc-seg--water span { border-radius: 10px; }

/* Superfat status line */
.wts-calc .wc-status { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--wc-muted); }
.wts-calc .wc-status:empty { display: none; }
.wts-calc .wc-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wc-build); }
.wts-calc .wc-status[data-state="ok"] { color: var(--wc-ok-ink); }
.wts-calc .wc-status[data-state="ok"]::before { background: var(--wc-ok); }
.wts-calc .wc-status[data-state="watch"] { color: var(--wc-watch-ink); }
.wts-calc .wc-status[data-state="watch"]::before { background: var(--wc-watch); }
.wts-calc .wc-status[data-state="fix"] { color: var(--wc-fix-ink); }
.wts-calc .wc-status[data-state="fix"]::before { background: var(--wc-fix); }

/* ---------- Oil rows ---------- */
.wts-calc .wc-oils { border: 1px solid var(--wc-line); border-radius: var(--wc-r); background: var(--wc-paper); }
.wts-calc .wc-oils__head { display: none; }
.wts-calc .wc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; grid-template-areas: "pick pick pick" "amt share x"; gap: 8px 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--wc-line-soft); border-left: 0; transition: border-color 0.2s, background-color 0.2s; }
.wts-calc .wc-row:first-child { border-radius: var(--wc-r) var(--wc-r) 0 0; }
.wts-calc .wc-pick { grid-area: pick; position: relative; }
.wts-calc .wc-amt-wrap { grid-area: amt; }
.wts-calc .wc-share { grid-area: share; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; }
.wts-calc .wc-row > .wc-x { grid-area: x; }
@container (min-width: 600px) {
  .wts-calc .wc-oils__head { display: grid; grid-template-columns: minmax(0, 1fr) 128px 108px 40px; gap: 10px; padding: 9px 12px 7px 15px; border-bottom: 1px solid var(--wc-line-soft); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wc-stone); }
  .wts-calc .wc-oils__head span:nth-child(3) { text-align: right; }
  .wts-calc .wc-row { grid-template-columns: minmax(0, 1fr) 128px 108px 40px; grid-template-areas: "pick amt share x"; }
  .wts-calc .wc-row:first-child { border-radius: 0; }
}
.wts-calc .wc-pct { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--wc-ink-soft); }
.wts-calc .wc-flag { display: inline-block; max-width: 100%; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--wc-watch-bg); color: var(--wc-watch-ink); border: 1px solid var(--wc-watch-line); cursor: help; }
.wts-calc .wc-flag[data-level="note"] { background: var(--wc-build-bg); color: var(--wc-muted); border-color: var(--wc-line); }
.wts-calc .wc-row[data-flag="watch"] { background: #fffaf0; }
.wts-calc .wc-row.is-unpicked .wc-pick__input { border-color: var(--wc-fix-line); background: var(--wc-fix-bg); }
.wts-calc .wc-x { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--wc-line); border-radius: 50%; background: var(--wc-paper); color: var(--wc-stone); font: 400 20px/1 var(--wc-font); cursor: pointer; }
.wts-calc .wc-x:hover { border-color: var(--wc-fix); color: var(--wc-fix-ink); }
.wts-calc .wc-oils__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 11px 14px; background: var(--wc-cream); border-radius: 0 0 var(--wc-r) var(--wc-r); font-size: 14px; color: var(--wc-muted); }
.wts-calc .wc-total b { color: var(--wc-ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.wts-calc .wc-fill { display: flex; align-items: center; gap: 10px; flex: 1 1 180px; max-width: 280px; }
.wts-calc .wc-fill__bar { flex: 1; height: 8px; border-radius: 999px; background: var(--wc-track); overflow: hidden; }
.wts-calc .wc-fill__bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--wc-build); transition: width 0.25s, background-color 0.25s; }
.wts-calc .wc-fill b { min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; color: var(--wc-ink); }
.wts-calc .wc-fill[data-state="ok"] .wc-fill__bar span { background: var(--wc-ok); }
.wts-calc .wc-fill[data-state="ok"] b { color: var(--wc-ok-ink); }
.wts-calc .wc-fill[data-state="fix"] .wc-fill__bar span { background: var(--wc-fix); }
.wts-calc .wc-fill[data-state="fix"] b { color: var(--wc-fix-ink); }
.wts-calc .wc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }

/* Ingredient picker */
.wts-calc .wc-pick__input { padding-right: 40px !important; text-overflow: ellipsis; }
.wts-calc .wc-pick__btn { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 34px; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.wts-calc .wc-pick__btn::before { content: ""; position: absolute; left: 50%; top: 50%; margin: -2px 0 0 -5px; border: 5px solid transparent; border-top-color: var(--wc-stone); }
.wts-calc .wc-list { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px); min-width: 260px; max-height: min(340px, 55vh); overflow-y: auto; overscroll-behavior: contain; padding: 4px 0; background: var(--wc-paper); border: 1px solid var(--wc-line); border-radius: 12px; box-shadow: 0 18px 40px -16px rgba(33, 31, 27, 0.35); }
.wts-calc .wc-list__group { position: sticky; top: -4px; z-index: 1; padding: 8px 12px 4px; background: #faf8f3; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wc-brass-ink); }
.wts-calc .wc-list__opt { padding: 9px 12px; font-size: 15px; cursor: pointer; }
.wts-calc .wc-list__opt small { font-size: 12px; color: var(--wc-muted); }
.wts-calc .wc-list__tag { float: right; margin-left: 10px; font-size: 11.5px; color: var(--wc-muted); line-height: 22px; }
@media (max-width: 380px) { .wts-calc .wc-list__tag { display: none; } }
.wts-calc .wc-list__opt:hover, .wts-calc .wc-list__opt.is-active { background: var(--wc-bone); }
.wts-calc .wc-list__opt.is-active { background: var(--wc-ok-bg); }
.wts-calc .wc-list__empty { padding: 12px; font-size: 14px; color: var(--wc-muted); }

/* ---------- Water ---------- */
.wts-calc .wc-water { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wts-calc .wc-wcard { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--wc-line); border-radius: 12px; background: var(--wc-paper); min-width: 0; }
.wts-calc .wc-wcard__label { font-size: 12.5px; font-weight: 600; color: var(--wc-stone); line-height: 1.3; }
.wts-calc .wc-wcard__value { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--wc-ink-soft); }
.wts-calc .wc-wcard.is-active { border-color: var(--wc-forest); box-shadow: 0 0 0 1px var(--wc-forest); }
.wts-calc .wc-wcard.is-active .wc-wcard__label { color: var(--wc-forest); }
.wts-calc .wc-wcard[data-method="lyeConc"][data-state="ok"] { background: var(--wc-ok-bg); }
.wts-calc .wc-wcard[data-method="lyeConc"][data-state="watch"] { background: var(--wc-watch-bg); }
.wts-calc .wc-wcard[data-method="lyeConc"][data-state="fix"] { background: var(--wc-fix-bg); }
@media (max-width: 479px) {
  .wts-calc .wc-water { grid-template-columns: 1fr; }
  .wts-calc .wc-wcard { flex-direction: row; align-items: center; justify-content: space-between; }
  .wts-calc .wc-wcard .wc-suffix { width: 130px; }
}
.wts-calc .wc-readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wts-calc .wc-readout { padding: 10px 12px; border: 1px solid var(--wc-line); border-radius: 12px; background: var(--wc-paper); }
.wts-calc .wc-readout span { display: block; font-size: 12.5px; font-weight: 600; color: var(--wc-stone); }
.wts-calc .wc-readout b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wts-calc .wc-readout[data-state="ok"] { background: var(--wc-ok-bg); border-color: var(--wc-ok-line); }
.wts-calc .wc-readout[data-state="ok"] b { color: var(--wc-ok-ink); }
.wts-calc .wc-readout[data-state="watch"] { background: var(--wc-watch-bg); border-color: var(--wc-watch-line); }
.wts-calc .wc-readout[data-state="watch"] b { color: var(--wc-watch-ink); }
.wts-calc .wc-readout[data-state="fix"] { background: var(--wc-fix-bg); border-color: var(--wc-fix-line); }
.wts-calc .wc-readout[data-state="fix"] b { color: var(--wc-fix-ink); }

/* ---------- Scent and additives ---------- */
.wts-calc .wc-xrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; grid-template-areas: "type type x" "name name name" "amt unit unit" "w w w"; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--wc-line-soft); }
.wts-calc .wc-xtype { grid-area: type; }
.wts-calc .wc-xname { grid-area: name; }
.wts-calc .wc-xamt { grid-area: amt; }
.wts-calc .wc-xunit { grid-area: unit; }
.wts-calc .wc-xw { grid-area: w; font-size: 13px; color: var(--wc-muted); font-variant-numeric: tabular-nums; }
.wts-calc .wc-xw:empty { display: none; }
.wts-calc .wc-xrow > .wc-x { grid-area: x; }
@container (min-width: 620px) {
  .wts-calc .wc-xrow { grid-template-columns: 150px minmax(0, 1fr) 90px 108px 40px; grid-template-areas: "type name amt unit x" ". . w w ."; }
  .wts-calc .wc-xw { text-align: right; }
}
.wts-calc .wc-scent-total { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--wc-ok-bg); color: var(--wc-ok-ink); }
.wts-calc .wc-scent-total[data-state="watch"] { background: var(--wc-watch-bg); color: var(--wc-watch-ink); }

/* ---------- Phone dock ---------- */
.wts-calc .wc-dock { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 10px; margin: 0 -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--wc-line); box-shadow: 0 -10px 24px -18px rgba(33, 31, 27, 0.4); transition: opacity 0.2s, transform 0.2s; }
.wts-calc .wc-dock.is-away { opacity: 0; transform: translateY(100%); pointer-events: none; }
.wts-calc .wc-dock__dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--wc-build); }
.wts-calc .wc-dock__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wts-calc .wc-dock__text b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wts-calc .wc-dock__text small { font-size: 12.5px; color: var(--wc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.wts-calc .wc-dock[data-level="good"] .wc-dock__dot { background: var(--wc-ok); }
.wts-calc .wc-dock[data-level="watch"] .wc-dock__dot { background: var(--wc-watch); }
.wts-calc .wc-dock[data-level="fix"] .wc-dock__dot { background: var(--wc-fix); }
@media (min-width: 700px) { .wts-calc .wc-dock { margin: 0 -24px; padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .wts-calc .wc-dock { display: none; } }

/* ---------- Verdict ---------- */
.wts-calc .wc-verdict { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; padding: 16px; border: 1px solid var(--wc-line); border-radius: var(--wc-r); background: var(--wc-paper); }
.wts-calc .wc-verdict__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--wc-build-bg); color: var(--wc-build); font-size: 22px; font-weight: 700; line-height: 1; }
.wts-calc .wc-verdict__kicker { margin: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wc-stone); }
.wts-calc .wc-verdict__head { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--wc-ink); }
.wts-calc .wc-verdict__sub { margin: 4px 0 0; font-size: 14px; color: var(--wc-muted); font-variant-numeric: tabular-nums; }
.wts-calc .wc-progress { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.wts-calc .wc-progress__segs { display: flex; gap: 4px; flex: 1; }
.wts-calc .wc-progress__segs li { flex: 1; height: 8px; border-radius: 999px; background: var(--wc-track); }
.wts-calc .wc-progress__segs li[data-state="ok"] { background: var(--wc-ok); }
.wts-calc .wc-progress__segs li[data-state="off"] { background: var(--wc-watch); }
.wts-calc .wc-progress__segs li[data-state="fix"] { background: var(--wc-fix); }
.wts-calc .wc-progress__label { font-size: 13px; font-weight: 600; color: var(--wc-ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wts-calc .wc-missing { grid-column: 1 / -1; margin-top: 10px; display: grid; gap: 6px; }
.wts-calc .wc-missing li { position: relative; padding-left: 18px; font-size: 14px; color: var(--wc-ink-soft); }
.wts-calc .wc-missing li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--wc-build); }
.wts-calc .wc-verdict[data-level="empty"] .wc-verdict__icon::before { content: "\2696"; font-size: 20px; }
.wts-calc .wc-verdict[data-level="building"] .wc-verdict__icon::before { content: "\2026"; }
.wts-calc .wc-verdict[data-level="good"] { border-color: var(--wc-ok-line); background: linear-gradient(90deg, var(--wc-ok-bg), var(--wc-paper) 70%); }
.wts-calc .wc-verdict[data-level="good"] .wc-verdict__icon { background: var(--wc-ok); color: #fff; }
.wts-calc .wc-verdict[data-level="good"] .wc-verdict__icon::before { content: "\2713"; }
.wts-calc .wc-verdict[data-level="good"] .wc-verdict__kicker { color: var(--wc-ok-ink); }
.wts-calc .wc-verdict[data-level="watch"] { border-color: var(--wc-watch-line); background: linear-gradient(90deg, var(--wc-watch-bg), var(--wc-paper) 70%); }
.wts-calc .wc-verdict[data-level="watch"] .wc-verdict__icon { background: var(--wc-watch); color: #fff; }
.wts-calc .wc-verdict[data-level="watch"] .wc-verdict__icon::before { content: "!"; }
.wts-calc .wc-verdict[data-level="watch"] .wc-verdict__kicker { color: var(--wc-watch-ink); }
.wts-calc .wc-verdict[data-level="fix"] { border-color: var(--wc-fix-line); background: linear-gradient(90deg, var(--wc-fix-bg), var(--wc-paper) 70%); }
.wts-calc .wc-verdict[data-level="fix"] .wc-verdict__icon { background: var(--wc-fix); color: #fff; }
.wts-calc .wc-verdict[data-level="fix"] .wc-verdict__icon::before { content: "\2715"; font-size: 19px; }
.wts-calc .wc-verdict[data-level="fix"] .wc-verdict__kicker { color: var(--wc-fix-ink); }

/* ---------- Key numbers ---------- */
.wts-calc .wc-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.wts-calc .wc-key { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 12px 14px; border: 1px solid var(--wc-line); border-radius: 12px; background: var(--wc-paper); min-width: 0; }
.wts-calc .wc-key__label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wc-stone); }
.wts-calc .wc-key__value { font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--wc-ink); }
.wts-calc .wc-key small { font-size: 12.5px; color: var(--wc-muted); line-height: 1.35; }
.wts-calc .wc-key--lye { border-color: var(--wc-forest); box-shadow: inset 0 0 0 1px var(--wc-forest); }
.wts-calc .wc-key[data-state]:not([data-state=""])::after { content: ""; position: absolute; right: 12px; top: 13px; width: 10px; height: 10px; border-radius: 50%; }
.wts-calc .wc-key[data-state="ok"] { background: var(--wc-ok-bg); border-color: var(--wc-ok-line); }
.wts-calc .wc-key[data-state="ok"] .wc-key__value { color: var(--wc-ok-ink); }
.wts-calc .wc-key[data-state="ok"]::after { background: var(--wc-ok); }
.wts-calc .wc-key[data-state="watch"] { background: var(--wc-watch-bg); border-color: var(--wc-watch-line); }
.wts-calc .wc-key[data-state="watch"] .wc-key__value { color: var(--wc-watch-ink); }
.wts-calc .wc-key[data-state="watch"]::after { background: var(--wc-watch); }
.wts-calc .wc-key[data-state="fix"] { background: var(--wc-fix-bg); border-color: var(--wc-fix-line); }
.wts-calc .wc-key[data-state="fix"] .wc-key__value { color: var(--wc-fix-ink); }
.wts-calc .wc-key[data-state="fix"]::after { background: var(--wc-fix); }
.wts-calc .wc-keys__line { margin: 8px 2px 0; font-size: 13px; color: var(--wc-muted); font-variant-numeric: tabular-nums; }

/* ---------- Cards ---------- */
.wts-calc .wc-card { margin-top: 12px; padding: 16px; border: 1px solid var(--wc-line); border-radius: var(--wc-r); background: var(--wc-paper); }
.wts-calc .wc-card__title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--wc-ink); }
.wts-calc .wc-card__count { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--wc-watch-bg); color: var(--wc-watch-ink); }
.wts-calc .wc-card__count[data-state="ok"] { background: var(--wc-ok-bg); color: var(--wc-ok-ink); }
.wts-calc .wc-card.is-preview .wc-card__title::after { content: "Preview"; margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: 12px; background: var(--wc-build-bg); color: var(--wc-muted); }
.wts-calc .wc-fine { margin: 12px 0 0; font-size: 12.5px; color: var(--wc-muted); line-height: 1.45; }

/* Recipe checks */
.wts-calc .wc-checks { display: grid; gap: 0; }
.wts-calc .wc-check { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--wc-line-soft); }
.wts-calc .wc-check:first-child { border-top: 0; padding-top: 2px; }
.wts-calc .wc-check__icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; font-weight: 700; line-height: 1; }
.wts-calc .wc-check[data-level="good"] .wc-check__icon { background: var(--wc-ok); color: #fff; }
.wts-calc .wc-check[data-level="note"] .wc-check__icon { background: var(--wc-watch-bg); color: var(--wc-watch-ink); border: 1px solid var(--wc-watch-line); font-size: 11px; }
.wts-calc .wc-check[data-level="watch"] .wc-check__icon { background: var(--wc-watch); color: #fff; }
.wts-calc .wc-check[data-level="fix"] .wc-check__icon { background: var(--wc-fix); color: #fff; }
.wts-calc .wc-check__title { margin: 3px 0 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--wc-ink); }
.wts-calc .wc-check[data-level="fix"] .wc-check__title { color: var(--wc-fix-ink); }
.wts-calc .wc-check__detail { margin: 3px 0 0; font-size: 14px; color: var(--wc-muted); line-height: 1.45; }
.wts-calc .wc-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--wc-cream); border: 1px dashed var(--wc-line); }
.wts-calc .wc-try__label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wc-brass-ink); }
.wts-calc .wc-try__text { flex: 1 1 200px; font-size: 14px; color: var(--wc-ink-soft); }
.wts-calc .wc-try__text em { font-style: normal; color: var(--wc-ok-ink); font-weight: 600; }
.wts-calc .wc-try--ref { display: block; background: none; border: 0; padding: 0; font-size: 13px; color: var(--wc-muted); font-style: italic; }
.wts-calc .wc-btn--try { min-height: 34px; padding: 5px 14px; font-size: 13.5px; background: var(--wc-forest); color: var(--wc-bone); }
.wts-calc .wc-btn--try:hover { background: var(--wc-forest-deep); color: var(--wc-bone); }

/* Bar quality meters */
.wts-calc .wc-meters { display: grid; gap: 12px; }
.wts-calc .wc-meter__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.wts-calc .wc-meter__label { font-size: 14px; font-weight: 600; color: var(--wc-ink-soft); cursor: help; }
.wts-calc .wc-meter__val { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.wts-calc .wc-meter__val b { font-size: 16px; font-weight: 600; }
.wts-calc .wc-meter__val i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: var(--wc-ok); }
.wts-calc .wc-meter__track { position: relative; height: 10px; border-radius: 999px; background: var(--wc-track); }
.wts-calc .wc-meter__band { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--wc-ok-band); box-shadow: inset 0 0 0 1px rgba(48, 64, 54, 0.3); }
.wts-calc .wc-meter__mark { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--wc-ok); border: 3px solid var(--wc-paper); box-shadow: 0 1px 4px rgba(33, 31, 27, 0.35); transition: left 0.3s var(--wt-ease, ease), background-color 0.2s; }
.wts-calc .wc-meter__range { margin-top: 4px; font-size: 12px; color: var(--wc-muted); }
.wts-calc .wc-meter[data-state="ok"] .wc-meter__val b { color: var(--wc-ok-ink); }
.wts-calc .wc-meter[data-state="low"] .wc-meter__val b, .wts-calc .wc-meter[data-state="high"] .wc-meter__val b { color: var(--wc-watch-ink); }
.wts-calc .wc-meter[data-state="low"] .wc-meter__val i, .wts-calc .wc-meter[data-state="high"] .wc-meter__val i,
.wts-calc .wc-meter[data-state="low"] .wc-meter__mark, .wts-calc .wc-meter[data-state="high"] .wc-meter__mark { background: var(--wc-watch); }
.wts-calc .is-preview .wc-meter__mark, .wts-calc .is-preview .wc-meter__val i { opacity: 0.75; }

/* Tables */
.wts-calc .wc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wts-calc .wc-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.wts-calc .wc-table th, .wts-calc .wc-table td { padding: 7px 6px; border-bottom: 1px solid var(--wc-line-soft); text-align: left; vertical-align: top; }
.wts-calc .wc-table thead th { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wc-stone); }
.wts-calc .wc-table .num { text-align: right; white-space: nowrap; }
.wts-calc .wc-table tfoot td { font-weight: 600; border-bottom: 0; }
.wts-calc .wc-table small { color: var(--wc-muted); font-size: 12px; }
.wts-calc .wc-table--fa th { font-weight: 500; color: var(--wc-ink-soft); }
.wts-calc .wc-table__sum th, .wts-calc .wc-table__sum td { font-weight: 600; border-bottom: 0; }
.wts-calc .wc-more { margin-top: 12px; }
.wts-calc .wc-more summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--wc-forest); list-style: none; }
.wts-calc .wc-more summary::-webkit-details-marker { display: none; }
.wts-calc .wc-more summary::before { content: "+"; display: inline-block; width: 16px; color: var(--wc-brass); font-weight: 700; }
.wts-calc .wc-more[open] summary::before { content: "\2212"; }
.wts-calc .wc-more[open] > :not(summary) { margin-top: 8px; }
.wts-calc .wc-more--boxed { padding: 12px 16px; border: 1px solid var(--wc-line); border-radius: var(--wc-r); background: var(--wc-paper); }
.wts-calc .wc-more--boxed p { font-size: 13px; color: var(--wc-muted); margin-top: 8px; }
.wts-calc .wc-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 13px; }
.wts-calc .wc-kv dt { color: var(--wc-stone); font-weight: 600; }
.wts-calc .wc-kv dd { color: var(--wc-ink-soft); }

/* Actions, versions, bridge */
.wts-calc .wc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wts-calc .wc-versions { margin-top: 14px; }
.wts-calc .wc-versions li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--wc-line); border-radius: 10px; background: var(--wc-paper); font-size: 14px; }
.wts-calc .wc-versions li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wts-calc .wc-versions small { color: var(--wc-muted); }
.wts-calc .wc-versions .wc-x { width: 32px; height: 32px; font-size: 17px; }
.wts-calc .wc-btn--light { background: var(--wc-bone); color: var(--wc-forest-deep); }
.wts-calc .wc-btn--light:hover { background: #fff; color: var(--wc-forest-deep); }
.wts-calc .wc-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; padding: 14px 16px; border-radius: var(--wc-r); background: var(--wc-forest-deep); color: rgba(241, 238, 231, 0.86); }
.wts-calc .wc-offer__text { flex: 1 1 220px; min-width: 0; }
.wts-calc .wc-offer__kicker { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #d6bd91; }
.wts-calc .wc-offer__head { margin: 2px 0 0; font-size: 16px; font-weight: 600; color: #fff; }
.wts-calc .wc-offer__sub { margin: 2px 0 0; font-size: 13.5px; }
.wts-calc .wc-offer__sub:empty { display: none; }

/* Start from a proven recipe */
.wts-calc .wc-start { margin: 0 0 22px; padding: 14px 16px; border: 1px solid #e6dcc7; border-radius: var(--wc-r); background: linear-gradient(135deg, #f6f0e4 0%, #f1e9d8 100%); }
.wts-calc .wc-start__title { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--wc-ink); }
.wts-calc .wc-start__groups { display: grid; gap: 8px; }
.wts-calc .wc-start__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wts-calc .wc-start__label { flex: 0 0 100%; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wc-brass-ink); }
.wts-calc .wc-chip { min-height: 36px; padding: 6px 14px; border: 1px solid #d8ccb2; border-radius: 999px; background: rgba(255, 255, 255, 0.8); color: var(--wc-forest-deep); font: 600 13.5px/1.2 var(--wc-font); cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.wts-calc .wc-chip:hover { background: #fff; border-color: var(--wc-forest); }
.wts-calc .wc-chip.is-on { background: var(--wc-forest); border-color: var(--wc-forest); color: var(--wc-bone); }

/* Adjust: More / Less on each quality */
.wts-calc .wc-adjust { margin-left: auto; min-height: 30px; padding: 4px 12px; border: 1px solid var(--wc-line); border-radius: 999px; background: var(--wc-paper); color: var(--wc-forest-deep); font: 600 12.5px/1.2 var(--wc-font); cursor: pointer; }
.wts-calc .wc-adjust[aria-pressed="true"] { background: var(--wc-forest); border-color: var(--wc-forest); color: var(--wc-bone); }
.wts-calc .wc-adjust__hint { margin: -4px 0 12px; font-size: 12.5px; color: var(--wc-muted); line-height: 1.45; }
.wts-calc .wc-meter__range { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wts-calc .wc-nudge { display: inline-flex; gap: 6px; }
.wts-calc .wc-nudge button { min-height: 30px; padding: 3px 12px; border: 1px solid var(--wc-line); border-radius: 999px; background: var(--wc-paper); color: var(--wc-forest-deep); font: 600 12.5px/1.2 var(--wc-font); cursor: pointer; }
.wts-calc .wc-nudge button:hover { border-color: var(--wc-forest); }

/* ---------- Dialogs and toast ---------- */
html.wc-modal-open { overflow: hidden; }
.wts-calc .wc-modal { position: fixed; inset: 0; z-index: 1010; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 12px; background: rgba(26, 36, 30, 0.55); overflow-y: auto; }
.wts-calc .wc-modal__box { width: 100%; max-width: 480px; background: var(--wc-paper); border-radius: 18px; box-shadow: 0 30px 70px -30px rgba(26, 36, 30, 0.6); }
.wts-calc .wc-modal__box--wide { max-width: 760px; }
.wts-calc .wc-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--wc-line-soft); }
.wts-calc .wc-modal__head h3 { margin: 0; font-size: 18px; font-weight: 600; }
.wts-calc .wc-modal__x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; font-size: 24px; line-height: 1; color: var(--wc-stone); cursor: pointer; }
.wts-calc .wc-modal__x:hover { background: var(--wc-bone); }
.wts-calc .wc-modal__body { padding: 16px 18px; font-size: 15px; }
.wts-calc .wc-modal__lead { margin-bottom: 12px; font-size: 14px; color: var(--wc-muted); }
.wts-calc .wc-modal__lead a { color: var(--wc-forest); font-weight: 600; }
.wts-calc .wc-modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--wc-line-soft); }
.wts-calc .wc-table-wrap--scroll { max-height: 52vh; overflow-y: auto; margin-top: 10px; border: 1px solid var(--wc-line-soft); border-radius: 10px; }
.wts-calc .wc-table--data thead th { position: sticky; top: 0; background: var(--wc-paper); z-index: 1; }
.wts-calc .wc-toast { position: fixed; left: 50%; bottom: 24px; z-index: 1020; width: max-content; max-width: min(440px, calc(100vw - 32px)); padding: 14px 18px; border-radius: 12px; background: var(--wc-forest-deep); color: var(--wc-bone); font-size: 14.5px; font-weight: 500; line-height: 1.45; text-align: left; box-shadow: 0 14px 32px -14px rgba(26, 36, 30, 0.6); opacity: 0; transform: translate(-50%, 16px); pointer-events: none; cursor: pointer; transition: opacity 0.2s, transform 0.2s; }
.wts-calc .wc-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
@media (max-width: 1023px) { .wts-calc .wc-toast { bottom: 88px; } }

/* ---------- Calculator page sections (outside the tool) ---------- */
/* Top-of-page bulk tallow offer */
.wts-offer-strip { display: grid; gap: 16px; align-items: center; margin: 0 0 clamp(28px, 4vw, 44px); padding: 16px; border-radius: 22px; background: linear-gradient(135deg, #f3ecdf 0%, #efe6d4 100%); border: 1px solid #e6dcc7; }
.wts-offer-strip__img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 14px; }
.wts-offer-strip .wt-kicker { margin: 0 0 6px; }
.wts-offer-strip__title { margin: 0; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: #211f1b; }
.wts-offer-strip__lead { margin: 6px 0 0; color: #3a3731; font-size: 1rem; }
.wts-offer-strip__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 900px) {
  .wts-offer-strip { grid-template-columns: 220px minmax(0, 1fr) auto; gap: 28px; padding: 18px 28px 18px 18px; }
  .wts-offer-strip__img { height: 150px; }
  .wts-offer-strip__actions { flex-direction: column; }
}
.wts-offer-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.wts-offer-chips li { margin: 0; }
.wts-offer-chips a { display: flex; flex-direction: column; gap: 1px; padding: 8px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.72); border: 1px solid #e0d4bb; color: #211f1b; text-decoration: none; transition: border-color 0.2s, background-color 0.2s; }
.wts-offer-chips a:hover { background: #fff; border-color: #9a7846; color: #211f1b; }
.wts-offer-chips__name { font-size: 0.86rem; font-weight: 600; }
.wts-offer-chips__sizes { font-size: 0.86rem; color: #3a3731; font-variant-numeric: tabular-nums; }
.wts-offer-chips__sizes b { color: #243129; }
.wts-offer-chips__sizes i { font-style: normal; color: #9a7846; padding: 0 2px; }

/* Why ours: feature comparison */
.wt-table.wts-compare { width: 100%; }
/* The theme top-aligns table cells and pads the last column wider; center every icon both ways. */
.wt-table.wts-compare th, .wt-table.wts-compare td { vertical-align: middle; }
.wt-table.wts-compare th[scope="col"]:not(:first-child), .wt-table.wts-compare th[scope="col"]:last-child,
.wt-table.wts-compare td, .wt-table.wts-compare td:last-child { width: 22%; padding-left: 12px; padding-right: 12px; text-align: center; }
.wt-table.wts-compare tbody th { text-align: left; font-weight: 600; }
.wt-table.wts-compare tbody th small { display: block; margin-top: 2px; font-weight: 400; color: #646159; font-size: 0.86rem; }
.wts-yes, .wts-no { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0 auto; border-radius: 50%; font-size: 14px; font-weight: 700; line-height: 1; }
.wts-yes { background: #304036; color: #fff; }
.wts-no { background: #ebe7de; color: #8a867c; }
.wt-table.wts-compare .wts-col-ours { background: rgba(48, 64, 54, 0.06); }
.wt-table.wts-compare thead .wts-col-ours { color: #243129; }
@media (max-width: 560px) {
  .wt-table.wts-compare th, .wt-table.wts-compare td { padding-top: 10px; padding-bottom: 10px; }
  .wt-table.wts-compare tbody th, .wt-table.wts-compare thead th:first-child { padding-left: 14px; padding-right: 8px; }
  .wt-table.wts-compare th[scope="col"]:not(:first-child), .wt-table.wts-compare th[scope="col"]:last-child,
  .wt-table.wts-compare td, .wt-table.wts-compare td:last-child { width: 20%; padding-left: 4px; padding-right: 4px; }
}

.wts-gap-top { margin-top: clamp(28px, 4vw, 44px); }

/* Example links in page copy */
.wts-example-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.wts-example-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid #d4d0c7; background: #fff; color: #243129; font-size: 0.94rem; font-weight: 600; text-decoration: none; }
.wts-example-links a:hover { border-color: #304036; color: #243129; }
.wts-example-links svg { width: 16px; height: 16px; }

/* ---------- Batch record (print preview and paper) ---------- */
.wts-calc .wc-print { color: #211f1b; font-size: 13px; line-height: 1.4; }
.wts-calc .wc-print h3 { margin: 6px 0 2px; font-size: 21px; font-weight: 600; }
.wts-calc .wc-print h4 { margin: 12px 0 5px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #304036; }
.wts-calc .wc-print table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wts-calc .wc-print th, .wts-calc .wc-print td { padding: 5px 6px; border: 1px solid #d4d0c7; text-align: left; vertical-align: top; }
.wts-calc .wc-print th { background: #f1eee7; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.wts-calc .wc-print .num { text-align: right; white-space: nowrap; }
.wts-calc .wc-print small { color: #646159; font-size: 11px; }
.wts-calc .wc-print ul { margin: 0; padding-left: 16px; list-style: disc; }
.wts-calc .wc-print li { margin: 2px 0; }
.wts-calc .wc-print__brand { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 2px solid #304036; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.wts-calc .wc-print__meta { margin: 0 0 10px; font-size: 11.5px; color: #646159; }
.wts-calc .wc-print__verdict { margin: 0 0 10px; padding: 8px 10px; border: 1px solid #8a867c; border-radius: 6px; background: #f7f5ef; }
.wts-calc .wc-print__verdict[data-level="good"] { border-color: #b9c4b8; background: #eaeee8; }
.wts-calc .wc-print__verdict[data-level="watch"] { border-color: #ecc77a; background: #fdf4e3; }
.wts-calc .wc-print__verdict[data-level="fix"] { border-color: #eeaa9f; background: #fcebe8; }
.wts-calc .wc-print__sum td { font-size: 15px; font-weight: 600; }
.wts-calc .wc-print__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wts-calc .wc-print__tot td { font-weight: 700; }
.wts-calc .wc-print__warn { margin: 12px 0 0; padding: 8px 10px; border: 1px solid #d4d0c7; font-size: 11.5px; }
.wts-calc .wc-print__foot { margin: 8px 0 0; font-size: 10.5px; color: #646159; }
@media (max-width: 560px) { .wts-calc .wc-print__cols { grid-template-columns: 1fr; } }
#wc-print-root { display: none; }
@media print {
  html.wc-printing, html.wc-printing body { height: auto !important; min-height: 0 !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; background: #fff !important; }
  html.wc-printing body > *:not(#wc-print-root) { display: none !important; }
  html.wc-printing #wc-print-root { display: block !important; position: static !important; width: auto; margin: 0; padding: 0; background: #fff; }
  html.wc-printing .wts-calc .wc-print { font-size: 12.5px; }
  html.wc-printing .wts-calc .wc-print__cols { display: block; }
  html.wc-printing .wts-calc .wc-print__cols > div + div { margin-top: 4px; }
  html.wc-printing .wts-calc .wc-print tr, html.wc-printing .wts-calc .wc-print__sum, html.wc-printing .wts-calc .wc-print__verdict, html.wc-printing .wts-calc .wc-print__warn { break-inside: avoid; page-break-inside: avoid; }
  html.wc-printing .wts-calc .wc-print h4 { break-after: avoid; page-break-after: avoid; }
  html.wc-printing .wts-calc .wc-print * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { margin: 12mm; }
}

/* Changes log: newest first, the top entry is what Undo reverses */
.wts-calc .wc-log { margin: 12px 0 14px; padding: 10px 12px; border: 1px solid var(--wc-line); border-radius: 10px; background: var(--wc-paper, #fff); font-size: 12.5px; line-height: 1.4; }
.wts-calc .wc-log[hidden] { display: none; }
.wts-calc .wc-log__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.wts-calc .wc-log__title { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wc-muted); }
.wts-calc .wc-log__count { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--wc-ok-bg); color: var(--wc-ok-ink); font-size: 11px; letter-spacing: 0; text-align: center; }
.wts-calc .wc-log__undo { appearance: none; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 10px; border: 1px solid var(--wc-line); border-radius: 8px; background: #fff; color: var(--wc-ok-ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.wts-calc .wc-log__undo:hover { border-color: var(--wc-ok); background: var(--wc-ok-bg); }
.wts-calc .wc-log__undo:focus-visible { outline: 2px solid var(--wc-ok); outline-offset: 2px; }
.wts-calc .wc-log__list { margin: 0; padding: 0; list-style: none; }
.wts-calc .wc-log__list li { position: relative; padding: 3px 0 3px 14px; color: var(--wc-muted); overflow-wrap: anywhere; }
.wts-calc .wc-log__list li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--wc-line); }
.wts-calc .wc-log__list li.is-next { color: var(--wc-ink, #211f1b); font-weight: 500; }
.wts-calc .wc-log__list li.is-next::before { background: var(--wc-ok); }
.wts-calc .wc-log.is-open .wc-log__list { max-height: 280px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.wts-calc .wc-log__toggle { appearance: none; margin: 4px 0 0 14px; padding: 2px 0; border: 0; background: none; color: var(--wc-ok-ink); font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.wts-calc .wc-log__toggle[hidden] { display: none; }
.wts-calc .wc-log__toggle:focus-visible { outline: 2px solid var(--wc-ok); outline-offset: 2px; border-radius: 3px; }
.wts-calc .wc-log--inline { margin: 0 0 14px; background: var(--wc-cream); }

/* Lye and water weights in step 3; the full recipe table */
.wts-calc .wc-readouts--weights { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.wts-calc .wc-readout small { display: block; margin-top: 2px; font-size: 12px; color: var(--wc-stone); font-variant-numeric: tabular-nums; }
.wts-calc .wc-table--recipe td small { display: block; font-size: 11.5px; color: var(--wc-stone); font-weight: 400; }
@media (max-width: 560px) {
  .wts-calc .wc-table--recipe .wc-wide { display: none; }
  .wts-calc .wc-table--recipe th, .wts-calc .wc-table--recipe td { padding-left: 5px; padding-right: 5px; font-size: 13.5px; }
  .wts-calc .wc-table--recipe th:first-child, .wts-calc .wc-table--recipe td:first-child { padding-left: 0; }
  .wts-calc .wc-table--recipe th:last-child, .wts-calc .wc-table--recipe td:last-child { padding-right: 0; }
}
.wts-calc .wc-table--recipe .wc-table__sub td { font-weight: 600; border-top: 1px solid var(--wc-line); background: var(--wc-cream); }
.wts-calc .wc-table--recipe .wc-row--lye td, .wts-calc .wc-table--recipe .wc-row--water td { font-weight: 600; }
.wts-calc .wc-table--recipe tfoot td { border-top: 2px solid var(--wc-ink-soft); }
.wts-calc .wc-versions__sum { display: block; font-variant-numeric: tabular-nums; }
.wts-calc .wc-print__sub td { font-weight: 600; border-top: 1px solid #999; }

/* Recipe status pill: the top verdict, repeated on the Full recipe card */
.wts-calc .wc-pill { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 4px 11px 4px 5px; border: 1px solid var(--wc-line); border-radius: 14px; background: var(--wc-cream); color: var(--wc-ink-soft); font-size: 13px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.wts-calc .wc-pill__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--wc-stone); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.wts-calc .wc-pill__icon::before { content: "\2026"; }
.wts-calc .wc-pill[data-level="good"] { background: var(--wc-ok-bg); border-color: var(--wc-ok-line); color: var(--wc-ok-ink); }
.wts-calc .wc-pill[data-level="good"] .wc-pill__icon { background: var(--wc-ok); }
.wts-calc .wc-pill[data-level="good"] .wc-pill__icon::before { content: "\2713"; }
.wts-calc .wc-pill[data-level="watch"], .wts-calc .wc-pill[data-level="note"] { background: var(--wc-watch-bg); border-color: var(--wc-watch-line); color: var(--wc-watch-ink); }
.wts-calc .wc-pill[data-level="watch"] .wc-pill__icon, .wts-calc .wc-pill[data-level="note"] .wc-pill__icon { background: var(--wc-watch); }
.wts-calc .wc-pill[data-level="watch"] .wc-pill__icon::before, .wts-calc .wc-pill[data-level="note"] .wc-pill__icon::before { content: "!"; }
.wts-calc .wc-pill[data-level="fix"] { background: var(--wc-fix-bg); border-color: var(--wc-fix-line); color: var(--wc-fix-ink); }
.wts-calc .wc-pill[data-level="fix"] .wc-pill__icon { background: var(--wc-fix); }
.wts-calc .wc-pill[data-level="fix"] .wc-pill__icon::before { content: "\2715"; font-size: 11px; }
.wts-calc .wc-pill__count { white-space: nowrap; font-weight: 500; }

/* 1.5.0: soap type switch (bar NaOH, liquid KOH, dual lye) */
.wts-calc .wc-seg--lye { margin-bottom: 6px; }
.wts-calc .wc-seg--lye + .wc-hint { margin: 6px 0 16px; }
.wts-calc .wc-seg--lye span small { margin-left: 5px; font-size: 12px; font-weight: 500; opacity: 0.72; }
.wts-calc .wc-seg--lye input:checked + span small { opacity: 0.85; }
@media (max-width: 420px) { .wts-calc .wc-seg--lye span small { display: none; } }
.wts-calc[data-lye-type="koh"] .wc-card__count:empty { display: none; }