{"id":2130,"date":"2026-07-07T21:01:10","date_gmt":"2026-07-07T21:01:10","guid":{"rendered":"https:\/\/bitedrink.com\/?page_id=2130"},"modified":"2026-08-20T07:19:30","modified_gmt":"2026-08-20T07:19:30","slug":"drink-calculator","status":"publish","type":"page","link":"https:\/\/bitedrink.com\/de\/drink-calculator\/","title":{"rendered":"Drink Calculator"},"content":{"rendered":"\n<style>\n\/* CSS Reset for the calculator wrapper to isolate from WordPress theme *\/\n.bite-calc-wrapper {\n  all: initial;\n  display: block;\n  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  color: #fff;\n  background: #000;\n  line-height: 1.5;\n  box-sizing: border-box;\n}\n.bite-calc-wrapper *, .bite-calc-wrapper *::before, .bite-calc-wrapper *::after {\n  box-sizing: border-box;\n}\n.bite-calc-wrapper {\n  margin: 0;\n  padding: 0;\n  width: 100%;\n}\n\n\/* Original calculator styles *\/\n\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n  :root {\n    --black: #000;\n    --white: #fff;\n    --border: rgba(255,255,255,0.12);\n    --grey-light: rgba(255,255,255,0.06);\n    --grey-text: rgba(255,255,255,0.75);\n    --grey-label: rgba(255,255,255,0.65);\n  }\n  html { background: #000; }\n  body {\n    font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n    background: #000;\n    color: #fff;\n    min-height: 100vh;\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    padding: 20px 20px 60px;\n    -webkit-font-smoothing: antialiased;\n  }\n  .calculator { width: 100%; max-width: 760px; }\n\n  \/* Header *\/\n  .header { text-align: center; margin-bottom: 28px; animation: fadeUp 0.7s ease both; }\n  .logo-wrap { width: 360px; margin: 0 auto 10px; }\n  .logo-wrap img { width: 100%; height: auto; display: block; }\n  .header-sub {\n    font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.8);\n    line-height: 1.6; max-width: 400px; margin: 0 auto;\n  }\n\n  \/* Tab switcher *\/\n  .tab-switcher {\n    display: flex;\n    gap: 2px;\n    margin-bottom: 2px;\n    animation: fadeUp 0.6s ease 0.05s both;\n  }\n  .tab-btn {\n    flex: 1;\n    padding: 16px 20px;\n    background: transparent;\n    border: 1px solid var(--border);\n    color: rgba(255,255,255,0.8);\n    font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n    font-size: 11px;\n    font-weight: 500;\n    letter-spacing: 0.2em;\n    text-transform: uppercase;\n    cursor: pointer;\n    transition: all 0.2s ease;\n  }\n  .tab-btn:hover { background: var(--grey-light); color: #fff; }\n  .tab-btn.active { background: #fff; color: #000; border-color: #fff; }\n\n  \/* Sections *\/\n  .calc-panel { display: none; }\n  .calc-panel.active { display: block; }\n\n  .section { margin-bottom: 2px; animation: fadeUp 0.5s ease both; }\n  .section-inner { border: 1px solid var(--border); padding: 24px 28px 20px; }\n  @media (max-width: 520px) { .section-inner { padding: 16px 16px; } }\n  .section-step {\n    font-size: 9px; font-weight: 500; letter-spacing: 0.3em;\n    text-transform: uppercase; color: var(--grey-label); margin-bottom: 6px;\n  }\n  .section-title { font-size: 17px; font-weight: 500; color: #fff; margin-bottom: 18px; letter-spacing: -0.01em; }\n\n  \/* Product grid *\/\n  \n  \n  \n  \n  \n  \n  \n\n  \/* Inputs *\/\n  .input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }\n  @media (max-width: 500px) { .input-grid { grid-template-columns: 1fr; }  }\n  .input-group { display: flex; flex-direction: column; gap: 8px; }\n  .input-group label { font-size: 9px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--grey-label); }\n  .input-wrap { position: relative; display: flex; align-items: center; }\n  .input-wrap input {\n    width: 100%; padding: 13px 92px 13px 14px;\n    background: transparent; border: 1px solid var(--border);\n    font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n    font-size: 20px; font-weight: 300; color: #fff;\n    outline: none; transition: border-color 0.2s ease;\n    -moz-appearance: textfield; letter-spacing: -0.01em;\n  }\n  .input-wrap input::-webkit-outer-spin-button,\n  .input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; }\n  .input-wrap input:focus { border-color: rgba(255,255,255,0.72); }\n  .input-unit { position: absolute; right: 14px; font-size: 11px; color: var(--grey-text); pointer-events: none; letter-spacing: 0.05em; }\n  .helper { font-size: 10px; color: var(--grey-label); font-weight: 300; }\n  .helper-strong { font-size: 12px; color: rgba(255,255,255,0.85); font-weight: 400; line-height: 1.4; margin-top: 4px; display: block; }\n\n  \/* Serve banner *\/\n  .serve-banner {\n    display: flex; align-items: center; gap: 16px;\n    background: var(--grey-light); border: 1px solid var(--border);\n    padding: 14px 18px; margin-top: 20px;\n  }\n  .serve-banner .sb-text { font-size: 12px; color: rgba(255,255,255,0.8); font-weight: 300; line-height: 1.5; }\n  .serve-banner .sb-text strong { color: rgba(255,255,255,0.75); font-weight: 500; }\n\n  \/* &#9472;&#9472; COCKTAIL: Ingredient rows &#9472;&#9472; *\/\n  .ingredients-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }\n\n  .ingredient-row {\n    display: grid;\n    grid-template-columns: 2fr 1.2fr 1fr 1fr 36px;\n    gap: 2px;\n    align-items: end;\n    animation: fadeUp 0.3s ease both;\n  }\n  .ingredient-header {\n    display: grid;\n    grid-template-columns: 2fr 1.2fr 1fr 1fr 36px;\n    gap: 2px;\n    margin-top: 16px;\n    margin-bottom: 8px;\n    padding: 0 0 8px 0;\n    border-bottom: 1px solid var(--border);\n  }\n  .ingredient-header span {\n    font-size: 9px;\n    font-weight: 500;\n    letter-spacing: 0.2em;\n    text-transform: uppercase;\n    color: rgba(255,255,255,0.75);\n    padding: 0 2px;\n  }\n  @media (max-width: 600px) {\n    .ingredient-row { grid-template-columns: 1fr 1fr; gap: 8px; }\n    .ingredient-row .remove-btn { grid-column: 1 \/ -1; justify-self: end; }\n    .ingredient-header { display: none; }\n  }\n\n  .ingredient-row .ig-label {\n    font-size: 9px; font-weight: 500; letter-spacing: 0.2em;\n    text-transform: uppercase; color: var(--grey-label);\n    margin-bottom: 6px; display: block;\n  }\n\n  .ig-input {\n    width: 100%; padding: 11px 12px;\n    background: transparent; border: 1px solid var(--border);\n    font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n    font-size: 14px; font-weight: 300; color: #fff;\n    outline: none; transition: border-color 0.2s;\n    -moz-appearance: textfield;\n  }\n  .ig-input::-webkit-outer-spin-button,\n  .ig-input::-webkit-inner-spin-button { -webkit-appearance: none; }\n  .ig-input:focus { border-color: rgba(255,255,255,0.7); }\n  .ig-input::placeholder { color: rgba(255,255,255,0.55); }\n\n  .remove-btn {\n    width: 36px; height: 38px; background: transparent;\n    border: 1px solid var(--border); color: rgba(255,255,255,0.6);\n    cursor: pointer; font-size: 16px; display: flex;\n    align-items: center; justify-content: center;\n    transition: all 0.15s ease; align-self: end;\n  }\n  .remove-btn:hover { background: rgba(255,60,60,0.15); border-color: rgba(255,60,60,0.3); color: #ff6060; }\n\n  .add-btn {\n    display: flex; align-items: center; gap: 10px;\n    background: transparent; border: 1px dashed rgba(255,255,255,0.3);\n    color: rgba(255,255,255,0.8); font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n    font-size: 11px; font-weight: 400; letter-spacing: 0.15em;\n    text-transform: uppercase; padding: 13px 18px;\n    cursor: pointer; width: 100%; transition: all 0.2s ease;\n  }\n  .add-btn:hover { border-color: rgba(255,255,255,0.7); color: #fff; background: var(--grey-light); }\n  .add-btn .plus { font-size: 18px; font-weight: 300; line-height: 1; }\n\n  .bite-fixed-row {\n    background: rgba(255,255,255,0.04);\n    border: 1px solid var(--border);\n    padding: 16px 16px 14px;\n    margin-bottom: 2px;\n  }\n  .bite-fixed-label {\n    font-size: 9px; font-weight: 500; letter-spacing: 0.25em;\n    text-transform: uppercase; color: rgba(255,255,255,0.75);\n    margin-bottom: 12px; display: flex; align-items: center; gap: 8px;\n  }\n  .bite-fixed-label span.tag {\n    background: #fff; color: #000; font-size: 8px;\n    padding: 2px 7px; letter-spacing: 0.15em;\n  }\n  .bite-fixed-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }\n  .bite-fixed-inputs .input-group label { min-height: 28px; display: flex; align-items: flex-start; }\n  @media (max-width: 500px) { .bite-fixed-inputs { grid-template-columns: 1fr; } }\n\n  \/* Results (shared) *\/\n  .results-section { background: #fff; padding: 24px 28px 20px; animation: fadeUp 0.6s ease 0.35s both; }\n  @media (max-width: 520px) { .results-section { padding: 16px 16px; } }\n  .results-eyebrow { font-size: 9px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(0,0,0,0.35); margin-bottom: 24px; }\n  .empty-state { text-align: center; padding: 40px 20px; color: rgba(0,0,0,0.25); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }\n  .drinks-count { display: flex; align-items: baseline; gap: 8px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(0,0,0,0.08); }\n  .dc-number { font-size: 64px; font-weight: 700; color: #000; line-height: 1; letter-spacing: -0.04em; transition: all 0.3s ease; }\n  .dc-label { font-size: 13px; font-weight: 300; color: rgba(0,0,0,0.5); line-height: 1.4; }\n  .dc-label strong { display: block; font-size: 15px; font-weight: 500; color: #000; }\n  .result-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 2px; }\n  @media (max-width: 500px) { .result-rows { grid-template-columns: 1fr; } }\n  .result-box { background: #f5f5f5; padding: 14px 16px 12px; }\n  .result-box.dark { background: #000; }\n  .result-box.profit-hero { padding: 22px 22px 20px; background: #000; position: relative; }\n  .result-box.profit-hero::before {\n    content: \"\\2605\";\n    position: absolute;\n    top: 14px;\n    right: 16px;\n    font-size: 11px;\n    color: rgba(255,255,255,0.35);\n    letter-spacing: 0.1em;\n  }\n  .rb-value-hero { font-size: 42px !important; font-weight: 800 !important; letter-spacing: -0.04em !important; line-height: 1 !important; margin-top: 2px; }\n  @media (max-width: 500px) { .rb-value-hero { font-size: 36px !important; } }\n  .result-box.profit-hero .rb-label { color: rgba(255,255,255,0.6); font-size: 10px; letter-spacing: 0.22em; margin-bottom: 10px; }\n  .result-box.profit-hero .rb-sub { color: rgba(255,255,255,0.55); font-size: 12px; margin-top: 10px; }\n  .rb-label { font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0,0,0,0.35); margin-bottom: 8px; }\n  .result-box.dark .rb-label { color: rgba(255,255,255,0.8); }\n  .rb-value { font-size: 30px; font-weight: 700; color: #000; letter-spacing: -0.03em; line-height: 1; transition: all 0.3s ease; }\n  .result-box.dark .rb-value { color: #fff; }\n  .rb-sub { font-size: 13px; color: rgba(0,0,0,0.6); font-weight: 300; margin-top: 5px; }\n  .rb-vat { display: block; font-size: 10px; color: rgba(0,0,0,0.3); font-weight: 300; margin-top: 2px; }\n  .result-box.dark .rb-vat { color: rgba(255,255,255,0.7); }\n  .result-box.dark .rb-sub { color: rgba(255,255,255,0.8); }\n  .margin-box { background: #f5f5f5; padding: 14px 16px 12px; }\n  .margin-top-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }\n  .margin-top-row .rb-label { margin: 0; }\n  .margin-pct { font-size: 28px; font-weight: 700; color: #000; letter-spacing: -0.03em; transition: all 0.3s ease; }\n  .margin-track { width: 100%; height: 2px; background: rgba(0,0,0,0.1); overflow: hidden; }\n  .margin-fill { height: 100%; background: #000; width: 0%; transition: width 0.5s cubic-bezier(0.4,0,0.2,1); }\n  .margin-meta { margin-top: 10px; font-size: 10px; color: rgba(0,0,0,0.3); font-weight: 300; letter-spacing: 0.05em; }\n\n  \/* Cost breakdown (cocktail only) *\/\n  .cost-breakdown { margin-top: 2px; background: #f5f5f5; padding: 20px 20px 18px; }\n  .cb-title { font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0,0,0,0.35); margin-bottom: 14px; }\n  .cb-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }\n  .cb-row:last-child { border-bottom: none; }\n  .cb-name { font-size: 12px; color: rgba(0,0,0,0.6); font-weight: 300; flex: 1; }\n  .cb-val { font-size: 13px; color: #000; font-weight: 500; text-align: right; white-space: nowrap; min-width: 120px; }\n  .cb-val .rb-vat { text-align: right; color: rgba(0,0,0,0.3); }\n\n  \/* CTA *\/\n  .cta-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; margin-top: 28px; padding: 24px; background: #000; }\n  @media (max-width: 500px) { .cta-row { grid-template-columns: 1fr; } }\n  .cta-copy { font-size: 12px; color: rgba(255,255,255,0.8); font-weight: 300; max-width: 280px; line-height: 1.5; }\n  .cta-btn { background: #fff; color: #000; font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 18px 24px; border: none; cursor: pointer; text-decoration: none; display: block; text-align: center; transition: all 0.2s ease; white-space: nowrap; box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }\n  .cta-btn:hover { background: #e0e0e0; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.3); }\n\n  .footer-note { text-align: center; margin-top: 24px; font-size: 10px; color: rgba(255,255,255,0.7); font-weight: 300; letter-spacing: 0.08em; animation: fadeUp 0.6s ease 0.5s both; }\n\n  @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }\n  .pulse { animation: pulse 0.25s ease; }\n  @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }\n\n  \/* &#9472;&#9472; Lead capture form &#9472;&#9472; *\/\n  .lead-form-overlay {\n    position: fixed;\n    inset: 0;\n    background: rgba(0,0,0,0.85);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n    padding: 20px;\n    animation: fadeIn 0.3s ease;\n  }\n  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\n\n  .lead-form-box {\n    background: #111;\n    border: 1px solid rgba(255,255,255,0.15);\n    padding: 40px;\n    width: 100%;\n    max-width: 480px;\n    max-height: calc(100vh - 40px);\n    overflow-y: auto;\n    -webkit-overflow-scrolling: touch;\n    animation: slideUp 0.35s ease;\n  }\n  @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\n\n  .lead-form-logo {\n    width: 280px;\n    margin: 0 auto 4px;\n    display: block;\n  }\n\n  .lead-form-title {\n    font-size: 22px;\n    font-weight: 700;\n    color: #fff;\n    letter-spacing: -0.02em;\n    margin-bottom: 8px;\n    text-align: center;\n  }\n\n  .lead-form-sub {\n    font-size: 13px;\n    color: rgba(255,255,255,0.72);\n    font-weight: 300;\n    text-align: center;\n    margin-bottom: 28px;\n    line-height: 1.5;\n  }\n\n  .lead-field {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    margin-bottom: 12px;\n  }\n\n  .lead-field label {\n    font-size: 9px;\n    font-weight: 500;\n    letter-spacing: 0.25em;\n    text-transform: uppercase;\n    color: rgba(255,255,255,0.7);\n  }\n\n  .lead-field input {\n    width: 100%;\n    padding: 13px 14px;\n    background: transparent;\n    border: 1px solid rgba(255,255,255,0.15);\n    font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n    font-size: 15px;\n    font-weight: 300;\n    color: #fff;\n    outline: none;\n    transition: border-color 0.2s ease;\n  }\n\n  .lead-field input:focus {\n    border-color: rgba(255,255,255,0.72);\n  }\n\n  .lead-field input::placeholder {\n    color: rgba(255,255,255,0.45);\n  }\n\n  .lead-submit-btn {\n    width: 100%;\n    background: #fff;\n    color: #000;\n    font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.2em;\n    text-transform: uppercase;\n    padding: 16px;\n    border: none;\n    cursor: pointer;\n    margin-top: 8px;\n    transition: all 0.2s ease;\n  }\n\n  .lead-submit-btn:hover { background: #e0e0e0; }\n  .lead-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n\n  .lead-skip {\n    text-align: center;\n    margin-top: 16px;\n    font-size: 11px;\n    color: rgba(255,255,255,0.55);\n    cursor: pointer;\n    letter-spacing: 0.05em;\n    transition: color 0.2s;\n  }\n  .lead-skip:hover { color: rgba(255,255,255,0.6); }\n\n  .lead-success {\n    text-align: center;\n    padding: 20px 0;\n  }\n  .lead-success-icon { font-size: 40px; margin-bottom: 16px; }\n  .lead-success-title { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 8px; }\n  .lead-success-sub { font-size: 13px; color: rgba(255,255,255,0.72); font-weight: 300; line-height: 1.5; }\n\n  .lead-error {\n    font-size: 11px;\n    color: #ff6060;\n    margin-top: 8px;\n    text-align: center;\n    display: none;\n  }\n\n  \n\n\n  \/* &#9472;&#9472; Currency selector &#9472;&#9472; *\/\n  .currency-selector {\n    display: flex;\n    gap: 2px;\n    margin-bottom: 2px;\n    animation: fadeUp 0.5s ease both;\n  }\n  .currency-btn {\n    flex: 1;\n    padding: 14px 20px;\n    background: transparent;\n    border: 1px solid var(--border);\n    color: rgba(255,255,255,0.6);\n    font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n    font-size: 13px;\n    font-weight: 500;\n    letter-spacing: 0.1em;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n  }\n  .currency-btn:hover { background: var(--grey-light); color: #fff; }\n  .currency-btn.active { background: #fff; color: #000; border-color: #fff; }\n  .currency-label {\n    font-size: 9px;\n    font-weight: 500;\n    letter-spacing: 0.3em;\n    text-transform: uppercase;\n    color: rgba(255,255,255,0.72);\n    text-align: center;\n    padding: 10px 0 6px;\n    animation: fadeUp 0.5s ease both;\n  }\n\n\n  \/* &#9472;&#9472; Product dropdown &#9472;&#9472; *\/\n  .select-wrap {\n    position: relative;\n    display: flex;\n    align-items: center;\n  }\n  .select-wrap select {\n    width: 100%;\n    padding: 14px 44px 14px 16px;\n    background: transparent;\n    border: 1px solid var(--border);\n    color: #fff;\n    font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n    font-size: 15px;\n    font-weight: 300;\n    outline: none;\n    appearance: none;\n    -webkit-appearance: none;\n    cursor: pointer;\n    transition: border-color 0.2s ease;\n  }\n  .select-wrap select:focus { border-color: rgba(255,255,255,0.72); }\n  .select-wrap select option { background: #111; color: #fff; }\n  .select-arrow {\n    position: absolute;\n    right: 16px;\n    color: rgba(255,255,255,0.72);\n    pointer-events: none;\n    font-size: 12px;\n  }\n  .product-price-tag {\n    margin-top: 8px;\n    font-size: 11px;\n    font-weight: 400;\n    color: rgba(255,255,255,0.72);\n    letter-spacing: 0.1em;\n  }\n\n  \/* &#9472;&#9472; Margin slider &#9472;&#9472; *\/\n  .margin-slider-wrap {\n    margin-top: 14px;\n    padding-top: 12px;\n    border-top: 1px solid rgba(255,255,255,0.08);\n  }\n  .margin-slider-row {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    margin-bottom: 6px;\n  }\n  .margin-slider-label {\n    font-size: 9px;\n    font-weight: 500;\n    letter-spacing: 0.25em;\n    text-transform: uppercase;\n    color: var(--grey-label);\n    flex-shrink: 0;\n  }\n  .margin-slider-value {\n    font-size: 14px;\n    font-weight: 700;\n    color: #fff;\n    letter-spacing: -0.01em;\n    min-width: 50px;\n    text-align: right;\n  }\n  input[type=\"range\"].margin-slider {\n    flex: 1;\n    -webkit-appearance: none;\n    appearance: none;\n    height: 4px;\n    background: rgba(255,255,255,0.15);\n    outline: none;\n    border-radius: 2px;\n    cursor: pointer;\n  }\n  input[type=\"range\"].margin-slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 18px;\n    height: 18px;\n    background: #fff;\n    border-radius: 50%;\n    cursor: pointer;\n    transition: transform 0.1s ease, box-shadow 0.15s ease;\n    box-shadow: 0 0 0 0 rgba(255,255,255,0);\n  }\n  input[type=\"range\"].margin-slider::-webkit-slider-thumb:hover {\n    transform: scale(1.1);\n    box-shadow: 0 0 0 6px rgba(255,255,255,0.12);\n  }\n  input[type=\"range\"].margin-slider::-moz-range-thumb {\n    width: 18px;\n    height: 18px;\n    background: #fff;\n    border-radius: 50%;\n    cursor: pointer;\n    border: none;\n  }\n  .margin-slider-ticks {\n    display: flex;\n    justify-content: space-between;\n    font-size: 9px;\n    color: rgba(255,255,255,0.4);\n    margin-top: 4px;\n    padding: 0 2px;\n  }\n\n  \/* &#9472;&#9472; Editable selling price &#9472;&#9472; *\/\n  .sell-price-input {\n    font-size: 26px;\n    font-weight: 700;\n    color: #fff;\n    letter-spacing: -0.03em;\n    background: rgba(255,255,255,0.04);\n    border: 1px solid rgba(255,255,255,0.18);\n    border-radius: 2px;\n    outline: none;\n    width: 140px;\n    padding: 8px 12px;\n    font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n    transition: all 0.15s ease;\n    cursor: text;\n  }\n  .sell-price-input:hover {\n    background: rgba(255,255,255,0.1);\n    border-color: rgba(255,255,255,0.4);\n    box-shadow: 0 0 0 3px rgba(255,255,255,0.06);\n  }\n  .sell-price-input:focus {\n    background: rgba(255,255,255,0.12);\n    border-color: #fff;\n    box-shadow: 0 0 0 3px rgba(255,255,255,0.15);\n  }\n  .sell-price-label-edit {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    background: rgba(255,255,255,0.1);\n    padding: 2px 6px;\n    border-radius: 2px;\n    margin-left: 6px;\n    text-transform: none;\n    letter-spacing: 0.04em;\n    font-weight: 500;\n  }\n\n  \/* &#9472;&#9472; Custom flavour picker &#9472;&#9472; *\/\n  .bite-picker {\n    position: relative;\n    width: 100%;\n  }\n  .bite-picker-trigger {\n    width: 100%;\n    background: transparent;\n    border: 1px solid var(--border);\n    color: #fff;\n    font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n    font-size: 15px;\n    font-weight: 300;\n    padding: 8px 44px 8px 10px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    transition: border-color 0.15s ease, background 0.15s ease;\n    text-align: left;\n    position: relative;\n    min-height: 100px;\n  }\n  .bite-picker-compact .bite-picker-trigger { min-height: 80px; padding: 6px 44px 6px 10px; font-size: 14px; }\n  .bite-picker-trigger:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.03); }\n  .bite-picker.open .bite-picker-trigger { border-color: rgba(255,255,255,0.5); }\n  .bite-picker-current { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }\n  .bp-thumb, .bp-thumb-placeholder {\n    width: 80px;\n    height: 80px;\n    border-radius: 2px;\n    flex-shrink: 0;\n    object-fit: contain;\n    background: rgba(255,255,255,0.05);\n  }\n  .bite-picker-compact .bp-thumb, .bite-picker-compact .bp-thumb-placeholder { width: 48px; height: 48px; }\n  .bp-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }\n  .bp-arrow {\n    position: absolute;\n    right: 16px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: rgba(255,255,255,0.5);\n    font-size: 12px;\n    pointer-events: none;\n    transition: transform 0.2s ease;\n  }\n  .bite-picker.open .bp-arrow { transform: translateY(-50%) rotate(180deg); }\n  .bite-picker-list {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    right: 0;\n    min-width: 260px;\n    background: #0a0a0a;\n    border: 1px solid rgba(255,255,255,0.25);\n    max-height: 420px;\n    overflow-y: auto;\n    z-index: 9999;\n    display: none;\n    box-shadow: 0 12px 32px rgba(0,0,0,0.85);\n  }\n  .bite-picker.open .bite-picker-list { display: block; }\n  .bite-picker-item {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 10px 14px;\n    cursor: pointer;\n    transition: background 0.12s ease;\n    color: #fff;\n    font-size: 14px;\n    font-weight: 300;\n    border-bottom: 1px solid rgba(255,255,255,0.05);\n    background: #0a0a0a;\n  }\n  .bite-picker-item:last-child { border-bottom: none; }\n  .bite-picker-item:hover { background: rgba(255,255,255,0.1); }\n  .bite-picker-item img {\n    width: 56px;\n    height: 56px;\n    object-fit: contain;\n    border-radius: 2px;\n    background: rgba(255,255,255,0.04);\n    flex-shrink: 0;\n  }\n\n<\/style>\n\n<div class=\"bite-calc-wrapper\">\n\n<div class=\"calculator\">\n\n  <!-- Hero Header -->\n  <div style=\"position:relative;width:100%;height:420px;margin-bottom:16px;overflow:hidden;border-radius:2px;\">\n    <div style=\"position:absolute;inset:0;background-image:url(&#039;https:\/\/e27tjd3byxa.exactdn.com\/wp-content\/uploads\/2026\/06\/hero.jpg?strip=all&amp;w=1920&#039;);background-size:cover;background-position:center 40%;\"><\/div>\n    <div style=\"position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.8) 100%);\"><\/div>\n    <div style=\"position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px 40px;text-align:center;\">\n      <img id=\"headerLogo\" alt=\"BITE Organic Mixers\" style=\"width:360px;max-width:75%;margin-bottom:18px;filter:drop-shadow(0 2px 20px rgba(0,0,0,0.5));\">\n      <p style=\"margin:0;font-size:19px;font-weight:500;color:#ffffff;letter-spacing:0.1em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,0.9);\">Calculate your profits with BITE<\/p>\n    <\/div>\n  <\/div>\n\n  <!-- Tab switcher -->\n  <div class=\"tab-switcher\">\n    <button class=\"tab-btn active\" onclick=\"switchTab('soft')\">Softdrinks &#038; Lemonades<\/button>\n    <button class=\"tab-btn\" onclick=\"switchTab('cocktail')\">Cocktails &#038; Alcohol Free<\/button>\n  <\/div>\n\n  <!-- Currency selector -->\n  <div style=\"margin-top: 20px;\">\n    <div class=\"currency-label\">Select currency<\/div>\n    <div class=\"currency-selector\">\n      <button class=\"currency-btn active\" onclick=\"setCurrency('DKK', this)\">&#x1F1E9;&#x1F1F0; DKK<\/button>\n      <button class=\"currency-btn\" onclick=\"setCurrency('EUR', this)\">&#x1F1EA;&#x1F1FA; EUR<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; -->\n  <!-- SOFT DRINK CALCULATOR                  -->\n  <!-- &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; -->\n  <div class=\"calc-panel active\" id=\"panel-soft\">\n\n    <div class=\"section\" style=\"animation-delay:0.1s\">\n      <div class=\"section-inner\">\n        <div class=\"section-step\">Step 01<\/div>\n        <div class=\"section-title\">Select BITE product<\/div>\n        <div class=\"bite-picker bite-picker-compact\" id=\"softPicker\" style=\"max-width:340px;\">\n          <button type=\"button\" class=\"bite-picker-trigger\" onclick=\"togglePicker('softPicker', event)\">\n            <span class=\"bite-picker-current\">\n              <span class=\"bp-thumb-placeholder\"><\/span>\n              <span class=\"bp-label\">Choose a flavour<\/span>\n            <\/span>\n            <span class=\"bp-arrow\">&darr;<\/span>\n          <\/button>\n          <div class=\"bite-picker-list\" id=\"softPickerList\"><\/div>\n        <\/div>\n        <div id=\"softProductPrice\" class=\"product-price-tag\" style=\"display:none;\"><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"section\" style=\"animation-delay:0.2s\">\n      <div class=\"section-inner\">\n        <div class=\"section-step\">Step 02<\/div>\n        <div class=\"section-title\">Build your drink<\/div>\n        <div class=\"input-group\" style=\"margin-bottom:18px;\">\n          <label>BITE box price (5L)<\/label>\n          <div class=\"input-wrap\">\n            <input type=\"number\" id=\"s-costPrice\" value=\"0\" placeholder=\"0\" min=\"0\" step=\"1\" oninput=\"this.dataset.auto=0;calcSoft()\">\n            <span class=\"input-unit\"><span class=\"cur\">DKK<\/span> <span style=\"opacity:0.6;font-size:9px;\">EX. VAT<\/span><\/span>\n          <\/div>\n          <span class=\"helper-strong\">Auto-filled from selected flavour. Edit if your purchase price differs<\/span>\n        <\/div>\n        <div class=\"input-grid\">\n          <div class=\"input-group\">\n            <label>BITE ml per serve<\/label>\n            <div class=\"input-wrap\">\n              <input type=\"number\" id=\"s-mlPerDrink\" value=\"35\" min=\"10\" max=\"500\" step=\"5\" oninput=\"calcSoft()\">\n              <span class=\"input-unit\">ml<\/span>\n            <\/div>\n            <span class=\"helper-strong\">Default is 35 ml. Adjust to suit your taste<\/span>\n          <\/div>\n          <div class=\"input-group\">\n            <label>Other ingredients cost per drink<\/label>\n            <div class=\"input-wrap\">\n              <input type=\"number\" id=\"s-otherCost\" value=\"0\" min=\"0\" step=\"0.5\" placeholder=\"0\" oninput=\"calcSoft()\">\n              <span class=\"input-unit\"><span class=\"cur\">DKK<\/span> <span style=\"opacity:0.6;font-size:9px;\">EX. VAT<\/span><\/span>\n            <\/div>\n            <span class=\"helper-strong\">Garnish, ice, sparkling water, etc.<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"serve-banner\">\n          <div class=\"sb-text\" id=\"s-serveBanner\"><strong>Standard serve ratio: 1+6<\/strong> 35 ml BITE + 210 ml sparkling water = 245 ml per drink + ice<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"section\" style=\"animation-delay:0.25s\">\n      <div class=\"section-inner\">\n        <div class=\"section-step\">Step 03<\/div>\n        <div class=\"section-title\">Selling price<\/div>\n        <div id=\"s-suggestedPriceRow\" style=\"display:none;background:rgba(255,255,255,0.05);border:1px solid var(--border);padding:16px 18px;margin-bottom:16px;\">\n          <div style=\"display:grid;grid-template-columns:1fr 1px 1.4fr;gap:16px;align-items:center;\">\n            <div>\n              <div style=\"font-size:9px;font-weight:500;letter-spacing:0.25em;text-transform:uppercase;color:var(--grey-label);margin-bottom:6px;\">Cost per drink<\/div>\n              <div id=\"s-costPerDrinkDisplay\" style=\"font-size:24px;font-weight:500;color:#fff;letter-spacing:-0.02em;\"><\/div>\n            <\/div>\n            <div style=\"background:rgba(255,255,255,0.12);height:60px;width:1px;\"><\/div>\n            <div>\n              <div style=\"font-size:9px;font-weight:500;letter-spacing:0.25em;text-transform:uppercase;color:var(--grey-label);margin-bottom:8px;\">Suggested selling price<\/div>\n              <div style=\"display:flex;align-items:center;gap:10px;flex-wrap:wrap\">\n                <input type=\"number\" id=\"s-sellPrice\" min=\"0\" step=\"1\" oninput=\"this.dataset.manual=1;calcSoft()\" class=\"sell-price-input\">\n                <span style=\"font-size:14px;color:#fff;font-weight:500;\"><span class=\"cur\">DKK<\/span><\/span>\n                <span style=\"font-size:11px;font-weight:600;color:#fff;letter-spacing:0.05em;\">EX. VAT<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"margin-slider-wrap\">\n            <div style=\"display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;\">\n              <span class=\"margin-slider-label\">Gross margin<\/span>\n              <span class=\"margin-slider-value\" id=\"s-marginValue\">80%<\/span>\n            <\/div>\n            <input type=\"range\" class=\"margin-slider\" id=\"s-marginSlider\" min=\"60\" max=\"90\" value=\"80\" step=\"1\" oninput=\"updateSoftFromSlider(this.value)\" style=\"width:100%;display:block;\">\n            <div class=\"margin-slider-ticks\">\n              <span>60%<\/span>\n              <span>75%<\/span>\n              <span>90%<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"results-section\" id=\"soft-results\">\n      <div class=\"results-eyebrow\">&#8627; Your results<\/div>\n      <div id=\"soft-results-content\">\n        <div class=\"empty-state\">Select a product and enter your prices above<\/div>\n      <\/div>\n    <\/div>\n\n  <\/div><!-- \/panel-soft -->\n\n\n  <!-- &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; -->\n  <!-- COCKTAIL CALCULATOR                     -->\n  <!-- &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; -->\n  <div class=\"calc-panel\" id=\"panel-cocktail\">\n\n    <div class=\"section\" style=\"animation-delay:0.1s\">\n      <div class=\"section-inner\">\n        <div class=\"section-step\">Step 01<\/div>\n        <div class=\"section-title\">Build your cocktail<\/div>\n\n        <!-- BITE purchase price &mdash; visible & editable, driven by product selection -->\n        <div id=\"cocktailProductPrice\" class=\"product-price-tag\" style=\"display:none;\"><\/div>\n\n        <!-- BITE preset row with inline dropdown, ml, and box price -->\n        <div style=\"background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);padding:14px 16px;margin-bottom:18px;display:grid;grid-template-columns:minmax(0,1fr) 130px 110px;gap:12px;align-items:center;\">\n          <div style=\"display:flex;flex-direction:column;gap:6px;min-width:0;position:relative;\">\n            <span style=\"font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.5);\">BITE ORGANIC MIXER<\/span>\n            <div class=\"bite-picker bite-picker-compact\" id=\"cocktailPicker\" style=\"width:100%;min-width:0;\">\n              <button type=\"button\" class=\"bite-picker-trigger\" onclick=\"togglePicker('cocktailPicker', event)\" style=\"overflow:hidden;\">\n                <span class=\"bite-picker-current\" style=\"min-width:0;overflow:hidden;\">\n                  <span class=\"bp-thumb-placeholder\"><\/span>\n                  <span class=\"bp-label\" style=\"overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;\">Choose a flavour<\/span>\n                <\/span>\n                <span class=\"bp-arrow\">&darr;<\/span>\n              <\/button>\n              <div class=\"bite-picker-list\" id=\"cocktailPickerList\"><\/div>\n            <\/div>\n          <\/div>\n          <div style=\"display:flex;flex-direction:column;gap:6px;align-items:flex-end;min-width:0;\">\n            <span style=\"font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.5);\">Box price (5L)<\/span>\n            <div style=\"position:relative;display:flex;align-items:center;width:100%;\">\n              <input class=\"ig-input no-spin\" type=\"number\" id=\"c-biteCost\" value=\"0\" min=\"0\" step=\"1\" style=\"padding:22px 50px 22px 12px;text-align:right;font-size:18px;font-weight:500;min-height:80px;width:100%;\" oninput=\"this.dataset.auto=0;calcCocktail()\">\n              <span style=\"position:absolute;right:12px;font-size:11px;color:var(--grey-text);pointer-events:none\" class=\"cur\">DKK<\/span>\n            <\/div>\n          <\/div>\n          <div style=\"display:flex;flex-direction:column;gap:6px;align-items:flex-end;min-width:0;\">\n            <span style=\"font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.5);\">ml per drink<\/span>\n            <div style=\"position:relative;display:flex;align-items:center;width:100%;\">\n              <input class=\"ig-input no-spin\" type=\"number\" id=\"c-biteMl\" value=\"35\" min=\"5\" max=\"500\" step=\"5\" style=\"padding:22px 34px 22px 12px;text-align:right;font-size:18px;font-weight:500;min-height:80px;width:100%;\" oninput=\"calcCocktail()\">\n              <span style=\"position:absolute;right:12px;font-size:13px;color:var(--grey-text);pointer-events:none\">ml<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Hidden element for backwards compat with selectCocktailProduct -->\n        <span id=\"c-biteName\" style=\"display:none;\"><\/span>\n\n        <!-- Ingredient table for additional ingredients -->\n        <div class=\"ingredient-header\">\n          <span>Ingredient<\/span>\n          <span>Price per bottle<\/span>\n          <span>Bottle size<\/span>\n          <span>ml per drink<\/span>\n          <span><\/span>\n        <\/div>\n\n        <!-- Dynamic ingredient rows -->\n        <div class=\"ingredients-list\" id=\"ingredientsList\"><\/div>\n\n        <button class=\"add-btn\" onclick=\"addIngredient()\">\n          <span class=\"plus\">+<\/span> Add ingredient\n        <\/button>\n\n        <!-- Additional cost -->\n        <div style=\"margin-top:2px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.03);padding:10px 0;display:grid;grid-template-columns:2fr 1.2fr 1fr 1fr 36px;gap:2px;align-items:center;\">\n          <div style=\"padding:0 2px\">\n            <input class=\"ig-input\" type=\"text\" value=\"Garnish, ice, etc.\" oninput=\"calcCocktail()\" style=\"color:#ffffff;font-style:italic;border-color:transparent;background:transparent\">\n          <\/div>\n          <div style=\"position:relative;display:flex;align-items:center\">\n            <input class=\"ig-input\" type=\"number\" id=\"c-additionalCost\" value=\"1\" min=\"0\" step=\"0.5\" style=\"padding-right:44px;text-align:right;border-color:rgba(255,255,255,0.08)\" oninput=\"calcCocktail()\">\n            <span style=\"position:absolute;right:10px;font-size:11px;color:var(--grey-text);pointer-events:none\" class=\"input-unit\"><span class=\"cur\">DKK<\/span><\/span>\n          <\/div>\n          <div><\/div>\n          <div><\/div>\n          <div><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"section\" style=\"animation-delay:0.2s\">\n      <div class=\"section-inner\">\n        <div class=\"section-step\">Step 02<\/div>\n        <div class=\"section-title\">Selling price<\/div>\n        <div class=\"input-grid\" style=\"margin-bottom:20px\">\n          <div class=\"input-group\">\n            <label>Cocktail name (optional)<\/label>\n            <div class=\"input-wrap\" style=\"position:relative\">\n              <input type=\"text\" id=\"c-cocktailName\" placeholder=\"e.g. BITE Spritz\" oninput=\"calcCocktail()\" style=\"width:100%;padding:13px 14px;background:transparent;border:1px solid var(--border);font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:16px;font-weight:300;color:#fff;outline:none;letter-spacing:-0.01em;\">\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"suggested-price-row\" id=\"suggestedPriceRow\" style=\"display:none;background:rgba(255,255,255,0.05);border:1px solid var(--border);padding:16px 18px;margin-bottom:16px;\">\n          <div style=\"display:grid;grid-template-columns:1fr 1px 1.4fr;gap:16px;align-items:center;\">\n            <div>\n              <div style=\"font-size:9px;font-weight:500;letter-spacing:0.25em;text-transform:uppercase;color:var(--grey-label);margin-bottom:6px;\">Cost per cocktail<\/div>\n              <div id=\"costPerDrinkDisplay\" style=\"font-size:24px;font-weight:500;color:#fff;letter-spacing:-0.02em;\"><\/div>\n            <\/div>\n            <div style=\"background:rgba(255,255,255,0.12);height:60px;width:1px;\"><\/div>\n            <div>\n              <div style=\"font-size:9px;font-weight:500;letter-spacing:0.25em;text-transform:uppercase;color:var(--grey-label);margin-bottom:8px;\">Suggested selling price<\/div>\n              <div style=\"display:flex;align-items:center;gap:10px;flex-wrap:wrap\">\n                <input type=\"number\" id=\"c-sellPrice\" min=\"0\" step=\"1\" oninput=\"this.dataset.manual=1;calcCocktail()\" class=\"sell-price-input\">\n                <span style=\"font-size:14px;color:#fff;font-weight:500;\"><span class=\"cur\">DKK<\/span><\/span>\n                <span style=\"font-size:11px;font-weight:600;color:#fff;letter-spacing:0.05em;\">EX. VAT<\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"margin-slider-wrap\">\n            <div style=\"display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;\">\n              <span class=\"margin-slider-label\">Gross margin<\/span>\n              <span class=\"margin-slider-value\" id=\"c-marginValue\">83%<\/span>\n            <\/div>\n            <input type=\"range\" class=\"margin-slider\" id=\"c-marginSlider\" min=\"60\" max=\"90\" value=\"83\" step=\"1\" oninput=\"updateCocktailFromSlider(this.value)\" style=\"width:100%;display:block;\">\n            <div class=\"margin-slider-ticks\">\n              <span>60%<\/span>\n              <span>75%<\/span>\n              <span>90%<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"results-section\" id=\"cocktail-results\">\n      <div class=\"results-eyebrow\">&#8627; Your results<\/div>\n      <div id=\"cocktail-results-content\">\n        <div class=\"empty-state\">Select a product, add ingredients and enter your selling price<\/div>\n      <\/div>\n    <\/div>\n\n  <\/div><!-- \/panel-cocktail -->\n\n  <p class=\"footer-note\">All prices <span style=\"color:#fff;font-weight:600;\">EX. VAT<\/span> &middot; Calculator is for guidance only &middot; bitedrink.com<\/p>\n\n  <!-- Lead capture overlay -->\n  <div class=\"lead-form-overlay\" id=\"leadOverlay\" style=\"display:none;\">\n    <div class=\"lead-form-box\">\n      <img decoding=\"async\" class=\"lead-form-logo\" id=\"popupLogo\" src=\"\" alt=\"BITE Organic Mixers\">\n      <div id=\"leadFormContent\">\n        <div class=\"lead-form-title\">Email the results<\/div>\n        <div class=\"lead-form-sub\">Save your results and learn how BITE works for venues like yours.<\/div>\n        <div class=\"lead-field\">\n          <label>Full name<\/label>\n          <input type=\"text\" id=\"lf-name\" placeholder=\"Your name\">\n        <\/div>\n        <div class=\"lead-field\">\n          <label>Title<\/label>\n          <input type=\"text\" id=\"lf-title\" placeholder=\"Your job title\">\n        <\/div>\n        <div class=\"lead-field\">\n          <label>Venue \/ Company<\/label>\n          <input type=\"text\" id=\"lf-company\" placeholder=\"Your venue or company\">\n        <\/div>\n        <div class=\"lead-field\">\n          <label>Email address<\/label>\n          <input type=\"email\" id=\"lf-email\" placeholder=\"Your email address\">\n        <\/div>\n        <div class=\"lead-field\">\n          <label>Phone<\/label>\n          <input type=\"tel\" id=\"lf-phone\" placeholder=\"Your phone number\" required>\n        <\/div>\n        <!-- Honeypot field &mdash; hidden from real users, bots will fill it -->\n        <div aria-hidden=\"true\" style=\"position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;\">\n          <label>Website<\/label>\n          <input type=\"text\" id=\"lf-website\" name=\"website\" tabindex=\"-1\" autocomplete=\"off\">\n        <\/div>\n        <div class=\"lead-error\" id=\"leadError\">Please fill in name, company and email.<\/div>\n        <button class=\"lead-submit-btn\" id=\"leadSubmitBtn\" onclick=\"submitLead()\">Send me my results &rarr;<\/button>\n        <div class=\"lead-skip\" onclick=\"closeLead()\">Skip and just show me the results<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<script>\nconst BITE_LOGO = \"https:\/\/bitedrink.com\/wp-content\/uploads\/2026\/06\/bite-logo.png\";\n\/\/ &#9472;&#9472; Currency &#9472;&#9472;\nlet CURRENCY = 'DKK';\nlet CURRENCY_SYMBOL = 'DKK';\nconst EUR_RATE = 0.134; \/\/ 1 DKK = 0.134 EUR\n\n\/\/ Convert a DKK value to display currency\nfunction toCurrency(dkk) {\n  return CURRENCY === 'EUR' ? dkk * EUR_RATE : dkk;\n}\n\n\/\/ Convert a display-currency value back to DKK\nfunction fromCurrency(val) {\n  return CURRENCY === 'EUR' ? val \/ EUR_RATE : val;\n}\n\nfunction setCurrency(currency, btn) {\n  const prevCurrency = CURRENCY;\n  CURRENCY = currency;\n  CURRENCY_SYMBOL = currency;\n  document.querySelectorAll('.currency-btn').forEach(b => b.classList.remove('active'));\n  btn.classList.add('active');\n\n  \/\/ Convert existing field values from old currency to new\n  const fieldsToConvert = ['s-costPrice', 's-otherCost', 'c-biteCost', 'c-additionalCost'];\n  fieldsToConvert.forEach(id => {\n    const el = document.getElementById(id);\n    if (el && el.value) {\n      const dkk = prevCurrency === 'EUR' ? parseFloat(el.value) \/ EUR_RATE : parseFloat(el.value);\n      el.value = CURRENCY === 'EUR' ? (dkk * EUR_RATE).toFixed(2) : Math.round(dkk);\n    }\n  });\n\n  \/\/ Convert ingredient row prices\n  document.querySelectorAll('#ingredientsList .ingredient-row').forEach(row => {\n    const priceInput = row.querySelectorAll('input')[1];\n    if (priceInput && priceInput.value) {\n      const dkk = prevCurrency === 'EUR' ? parseFloat(priceInput.value) \/ EUR_RATE : parseFloat(priceInput.value);\n      priceInput.value = CURRENCY === 'EUR' ? (dkk * EUR_RATE).toFixed(2) : Math.round(dkk);\n    }\n  });\n\n  \/\/ Update step on selling price inputs (1 for DKK, 0.1 for EUR)\n  const stepVal_cur = CURRENCY === 'EUR' ? '0.1' : '1';\n  const sSellStep = document.getElementById(\"s-sellPrice\"); if (sSellStep) sSellStep.step = stepVal_cur;\n  const cSellStep = document.getElementById(\"c-sellPrice\"); if (cSellStep) cSellStep.step = stepVal_cur;\n\n  \/\/ Refresh dropdown options with new currency\n  updateDropdownOptions();\n  \/\/ Update price tags\n  [\"softProductPrice\", \"cocktailProductPrice\"].forEach(id => {\n    const tag = document.getElementById(id);\n    if (tag && tag.style.display !== \"none\") {\n      const pidx = id.includes(\"soft\") ? softSelectedIdx : cocktailSelectedIdx;\n      if (pidx !== null) {\n        const p = products[pidx];\n        tag.textContent = (CURRENCY === \"EUR\" ? (p.eurPrice !== undefined ? p.eurPrice : p.price * EUR_RATE).toFixed(2) : p.price) + \" \" + CURRENCY_SYMBOL + \" ex. VAT \/ 5L box\";\n      }\n    }\n  });\n\n  \/\/ Update ALL currency unit labels everywhere\n  document.querySelectorAll('.input-unit').forEach(el => {\n    const curSpan = el.querySelector('.cur');\n    if (curSpan) {\n      curSpan.textContent = CURRENCY_SYMBOL;\n    } else {\n      const t = el.textContent.trim();\n      if (t === 'DKK' || t === 'EUR') el.textContent = CURRENCY_SYMBOL;\n    }\n  });\n  \/\/ Update any standalone .cur spans (e.g. in inline selling price box)\n  document.querySelectorAll('.cur').forEach(el => {\n    el.textContent = CURRENCY_SYMBOL;\n  });\n  \/\/ Force update all ingredient currency spans\n  document.querySelectorAll('.ing-currency').forEach(el => {\n    el.textContent = CURRENCY_SYMBOL;\n  });\n\n  \/\/ Reset sell prices so they recalculate\n  const sSell = document.getElementById('s-sellPrice');\n  const cSell = document.getElementById('c-sellPrice');\n  if (sSell) { sSell.dataset.manual = '0'; sSell.value = ''; }\n  if (cSell) { cSell.dataset.manual = '0'; cSell.value = ''; }\n\n  calcSoft();\n  calcCocktail();\n}\n\nfunction toDisplay(dkk) {\n  if (CURRENCY === 'EUR') return (dkk * EUR_RATE).toFixed(2).replace('.', ',') + ' EUR';\n  return dkk.toFixed(2).replace('.', ',') + ' DKK';\n}\n\nfunction toDisplayInt(dkk) {\n  if (CURRENCY === 'EUR') return (dkk * EUR_RATE).toFixed(2).replace('.', ',') + ' EUR';\n  return Math.round(dkk) + ' DKK';\n}\n\nfunction toDisplayVAT(dkk) {\n  const vat = CURRENCY === 'EUR' ? (dkk * EUR_RATE * 1.25).toFixed(2).replace('.', ',') + ' EUR' : Math.round(dkk * 1.25) + ' DKK';\n  return vat;\n}\n\nconst products = [\n  { name: \"Passionfruit & Milky Oolong\",     price: 642, eurPrice: 85.88 , thumb: \"https:\/\/bitedrink.com\/wp-content\/uploads\/2026\/06\/thumb-passionfruit_milky_oolong.png\" },\n  { name: \"Rhubarb & Pink Pepper\",            price: 642, eurPrice: 85.88 , thumb: \"https:\/\/bitedrink.com\/wp-content\/uploads\/2026\/06\/thumb-rhubarb_pink_pepper.png\" },\n  { name: \"Thyme & Lemon\",                    price: 642, eurPrice: 85.88 , thumb: \"https:\/\/bitedrink.com\/wp-content\/uploads\/2026\/06\/thumb-thyme_lemon.png\" },\n  { name: \"Raspberry w\/ Strawberry & Buchu\",  price: 642, eurPrice: 85.88 , thumb: \"https:\/\/bitedrink.com\/wp-content\/uploads\/2026\/06\/thumb-raspberry_w_strawberry_buchu.png\" },\n  { name: \"Elderflower & Jasmine\",            price: 642, eurPrice: 85.88 , thumb: \"https:\/\/bitedrink.com\/wp-content\/uploads\/2026\/06\/thumb-elderflower_jasmine.png\" },\n  { name: \"Ginger w\/ Lemon & Lime\",           price: 642, eurPrice: 85.88 , thumb: \"https:\/\/bitedrink.com\/wp-content\/uploads\/2026\/06\/thumb-ginger_w_lemon_lime.png\" },\n  { name: \"Basil & Timur Berry Pepper\",       price: 642, eurPrice: 85.88 , thumb: \"https:\/\/bitedrink.com\/wp-content\/uploads\/2026\/06\/thumb-basil_timur_berry_pepper.png\" },\n  { name: \"Cucumber & Lime\",                  price: 642, eurPrice: 85.88 , thumb: \"https:\/\/bitedrink.com\/wp-content\/uploads\/2026\/06\/thumb-cucumber_lime.png\" },\n  { name: \"Blackberry & Haskap Berry\",        price: 642, eurPrice: 85.88 , thumb: \"https:\/\/bitedrink.com\/wp-content\/uploads\/2026\/06\/thumb-blackberry_haskap_berry.png\" },\n  { name: \"Grapefruit & Mint\",               price: 642, eurPrice: 85.88 , thumb: \"https:\/\/bitedrink.com\/wp-content\/uploads\/2026\/06\/thumb-grapefruit_mint.png\" },\n  { name: \"Vanilla Bean\",                     price: 642, eurPrice: 85.88 , thumb: \"https:\/\/bitedrink.com\/wp-content\/uploads\/2026\/06\/thumb-vanilla_bean.png\" },\n  { name: \"Coffee\",                           price: 642, eurPrice: 85.88 , thumb: \"https:\/\/bitedrink.com\/wp-content\/uploads\/2026\/06\/thumb-coffee.png\" },\n  { name: \"Mango & Miso\",                     price: 642, eurPrice: 85.88 , thumb: \"https:\/\/bitedrink.com\/wp-content\/uploads\/2026\/06\/thumb-mango_miso.png\" },\n  { name: \"Mojito, Citrus & Mint (Pre-Mix)\",  price: 642, eurPrice: 85.88 , thumb: \"https:\/\/bitedrink.com\/wp-content\/uploads\/2026\/06\/thumb-mojito_citrus_mint_pre_mix.png\" },\n  { name: \"Anaperitivo\",                      price: 802, eurPrice: 107.00, ratio: \"1+4\", ratioWater: 160, defaultMl: 40 , thumb: \"https:\/\/bitedrink.com\/wp-content\/uploads\/2026\/06\/thumb-anaperitivo.png\" },\n];\n\nconst VOL_ML = 5000;\nlet softSelectedIdx = null;\nlet cocktailSelectedIdx = null;\nlet ingredientCount = 0;\n\n\/\/ Build custom flavour pickers\nfunction populatePicker(pickerId, onPick) {\n  const listEl = document.getElementById(pickerId + \"List\");\n  if (!listEl) { console.warn(\"List not found:\", pickerId + \"List\"); return; }\n  listEl.innerHTML = \"\";\n  \/\/ Force solid background via inline style (bypass any CSS conflicts)\n  listEl.style.cssText = \"position:absolute;top:calc(100% + 4px);left:0;right:0;background:#0a0a0a;border:1px solid rgba(255,255,255,0.25);max-height:420px;overflow-y:auto;z-index:99999;display:none;box-shadow:0 12px 32px rgba(0,0,0,0.85);\";\n  products.forEach((p, i) => {\n    const item = document.createElement(\"div\");\n    item.style.cssText = \"display:flex;align-items:center;gap:14px;padding:10px 14px;cursor:pointer;color:#fff;font-size:14px;font-weight:300;border-bottom:1px solid rgba(255,255,255,0.05);background:#0a0a0a;pointer-events:auto;user-select:none;\";\n    item.innerHTML =\n      (p.thumb ? '<img decoding=\"async\" src=\"' + p.thumb + '\" alt=\"\" style=\"width:80px;height:80px;object-fit:contain;border-radius:2px;background:rgba(255,255,255,0.04);flex-shrink:0;\">' : '<span style=\"width:80px;height:80px;background:rgba(255,255,255,0.05);border-radius:2px;flex-shrink:0;\"><\/span>') +\n      '<span>' + p.name + ', 5L<\/span>';\n    item.addEventListener(\"mouseenter\", () => item.style.background = \"rgba(255,255,255,0.1)\");\n    item.addEventListener(\"mouseleave\", () => item.style.background = \"#0a0a0a\");\n    item.addEventListener(\"click\", (e) => {\n      e.stopPropagation();\n      onPick(i);\n      closeAllPickers();\n    });\n    listEl.appendChild(item);\n  });\n}\n\nfunction togglePicker(pickerId, ev) {\n  if (ev) ev.stopPropagation();\n  const el = document.getElementById(pickerId);\n  if (!el) { console.warn(\"Picker not found:\", pickerId); return; }\n  const listEl = document.getElementById(pickerId + \"List\");\n  const wasOpen = el.classList.contains(\"open\");\n  closeAllPickers();\n  if (!wasOpen) {\n    el.classList.add(\"open\");\n    if (listEl) {\n      \/\/ Move list to body to escape stacking context\n      const trigger = el.querySelector(\".bite-picker-trigger\");\n      const rect = trigger.getBoundingClientRect();\n      listEl.style.cssText =\n        \"position:fixed;\" +\n        \"top:\" + (rect.bottom + 4) + \"px;\" +\n        \"left:\" + rect.left + \"px;\" +\n        \"width:\" + rect.width + \"px;\" +\n        \"background:#0a0a0a;border:1px solid rgba(255,255,255,0.25);\" +\n        \"max-height:420px;overflow-y:auto;z-index:999999;\" +\n        \"display:block;box-shadow:0 12px 32px rgba(0,0,0,0.85);\";\n      document.body.appendChild(listEl);\n    }\n  }\n}\n\nfunction closeAllPickers() {\n  document.querySelectorAll(\".bite-picker.open\").forEach(el => {\n    el.classList.remove(\"open\");\n  });\n  \/\/ Hide any picker lists wherever they are\n  document.querySelectorAll(\".bite-picker-list\").forEach(listEl => {\n    listEl.style.display = \"none\";\n  });\n}\n\n\/\/ Close pickers when clicking outside\ndocument.addEventListener(\"mousedown\", (e) => {\n  if (!e.target.closest(\".bite-picker\") && !e.target.closest(\".bite-picker-list\")) closeAllPickers();\n});\n\nfunction updatePickerTrigger(pickerId, product) {\n  const trigger = document.querySelector(\"#\" + pickerId + \" .bite-picker-current\");\n  if (!trigger) return;\n  trigger.innerHTML =\n    (product.thumb ? '<img decoding=\"async\" class=\"bp-thumb\" src=\"' + product.thumb + '\" alt=\"\">' : '<span class=\"bp-thumb-placeholder\"><\/span>') +\n    '<span class=\"bp-label\">' + product.name + '<\/span>';\n}\n\n\/\/ Keep these as harmless no-ops in case other code references them\nfunction populateDropdown() {}\nfunction updateDropdownOptions() {}\n\nfunction selectSoftProduct(idx) {\n  if (idx === \"\") return;\n  softSelectedIdx = parseInt(idx);\n  const p = products[softSelectedIdx];\n  const cp = document.getElementById(\"s-costPrice\");\n  cp.value = CURRENCY === \"EUR\" ? (p.eurPrice !== undefined ? p.eurPrice : p.price * EUR_RATE).toFixed(2) : p.price;\n  cp.dataset.auto = \"1\";\n  cp.dataset.basePrice = p.price;\n  const tag = document.getElementById(\"softProductPrice\");\n  if (tag) { tag.style.display = \"none\"; }\n  \/\/ Update serve banner ratio\n  const banner = document.getElementById(\"s-serveBanner\");\n  if (banner) {\n    if (p.ratio) {\n      const ml = p.defaultMl || 35;\n      banner.innerHTML = \"<strong>Serve ratio \" + p.ratio + \" for \" + p.name + \".<\/strong> \" + ml + \" ml BITE + \" + p.ratioWater + \" ml sparkling water = \" + (ml + p.ratioWater) + \" ml per drink + ice\";\n    } else {\n      banner.innerHTML = \"<strong>Standard serve ratio: 1+6.<\/strong> 35 ml BITE + 210 ml sparkling water = 245 ml per drink + ice\";\n    }\n  }\n  \/\/ Preset BITE ml per serve to product's defaultMl (or 35)\n  const mlField = document.getElementById(\"s-mlPerDrink\");\n  if (mlField) mlField.value = p.defaultMl || 35;\n  updatePickerTrigger(\"softPicker\", p);\n  const sp = document.getElementById(\"s-sellPrice\");\n  sp.value = \"\"; sp.dataset.manual = \"0\";\n  calcSoft();\n}\n\nfunction selectCocktailProduct(idx) {\n  if (idx === \"\") return;\n  cocktailSelectedIdx = parseInt(idx);\n  const p = products[cocktailSelectedIdx];\n  const cp = document.getElementById(\"c-biteCost\");\n  cp.value = CURRENCY === \"EUR\" ? (p.eurPrice !== undefined ? p.eurPrice : p.price * EUR_RATE).toFixed(2) : p.price;\n  cp.dataset.auto = \"1\";\n  cp.dataset.basePrice = p.price;\n  const tag = document.getElementById(\"cocktailProductPrice\");\n  if (tag) { tag.style.display = \"none\"; }\n  \/\/ Update preset row flavour name\n  const biteName = document.getElementById(\"c-biteName\");\n  if (biteName) biteName.textContent = p.name;\n  \/\/ Preset BITE ml per drink to product's defaultMl (or 35)\n  const biteMlField = document.getElementById(\"c-biteMl\");\n  if (biteMlField) biteMlField.value = p.defaultMl || 35;\n  updatePickerTrigger(\"cocktailPicker\", p);\n  \/\/ Update ratio hint\n  const ratioHint = document.getElementById(\"c-ratioHint\");\n  if (ratioHint) {\n    if (p.ratio) {\n      ratioHint.innerHTML = \"Suggested ratio \" + p.ratio + \" for \" + p.name + \". 35 ml BITE + \" + p.ratioWater + \" ml sparkling water\";\n    } else {\n      ratioHint.innerHTML = \"Standard ratio 1:6. Use 35 ml BITE + 210 ml sparkling water\";\n    }\n  }\n  calcCocktail();\n}\n\n\/\/ Tab switching\nfunction switchTab(tab) {\n  document.querySelectorAll(\".tab-btn\").forEach((b, i) => b.classList.toggle(\"active\", (i === 0 && tab===\"soft\") || (i === 1 && tab===\"cocktail\")));\n  document.getElementById(\"panel-soft\").classList.toggle(\"active\", tab === \"soft\");\n  document.getElementById(\"panel-cocktail\").classList.toggle(\"active\", tab === \"cocktail\");\n}\n\n\/\/ Add ingredient row\nfunction addIngredient() {\n  ingredientCount++;\n  const id = ingredientCount;\n  const list = document.getElementById(\"ingredientsList\");\n  const row = document.createElement(\"div\");\n  row.className = \"ingredient-row\";\n  row.id = \"ing-\" + id;\n  row.innerHTML = `\n    <div class=\"input-group\">\n      <input class=\"ig-input\" type=\"text\" placeholder=\"e.g. Vodka\" oninput=\"calcCocktail()\">\n    <\/div>\n    <div class=\"input-group\">\n      <div style=\"position:relative;display:flex;align-items:center\">\n        <input class=\"ig-input\" type=\"number\" placeholder=\"0\" min=\"0\" step=\"1\" style=\"padding-right:44px\" oninput=\"calcCocktail()\">\n        <span class=\"input-unit ing-currency\" style=\"position:absolute;right:10px;font-size:11px;color:var(--grey-text);pointer-events:none\">${CURRENCY_SYMBOL}<\/span>\n      <\/div>\n    <\/div>\n    <div class=\"input-group\">\n      <div style=\"position:relative;display:flex;align-items:center\">\n        <input class=\"ig-input\" type=\"number\" placeholder=\"700\" min=\"1\" step=\"1\" style=\"padding-right:32px\" oninput=\"calcCocktail()\">\n        <span style=\"position:absolute;right:10px;font-size:11px;color:var(--grey-text);pointer-events:none\">ml<\/span>\n      <\/div>\n    <\/div>\n    <div class=\"input-group\">\n      <div style=\"position:relative;display:flex;align-items:center\">\n        <input class=\"ig-input\" type=\"number\" placeholder=\"40\" min=\"1\" step=\"5\" style=\"padding-right:32px\" oninput=\"calcCocktail()\">\n        <span style=\"position:absolute;right:10px;font-size:11px;color:var(--grey-text);pointer-events:none\">ml<\/span>\n      <\/div>\n    <\/div>\n    <button class=\"remove-btn\" onclick=\"removeIngredient('ing-${id}')\" title=\"Remove\">&times;<\/button>\n  `;\n  list.appendChild(row);\n  calcCocktail();\n}\n\nfunction removeIngredient(rowId) {\n  const el = document.getElementById(rowId);\n  if (el) { el.remove(); calcCocktail(); }\n}\n\n\/\/ Formatting\nfunction fmt(val, dec=2) {\n  if (isNaN(val) || !isFinite(val)) return \"&mdash;\";\n  const converted = toCurrency(val);\n  return converted.toFixed(dec).replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, \".\");\n}\n\n\/\/ Round suggested price to nearest whole DKK or nearest 0.10 EUR\nfunction roundSuggested(dkk) {\n  const display = toCurrency(dkk);\n  if (CURRENCY === 'EUR') {\n    return Math.round(display * 10) \/ 10; \/\/ nearest 0.10\n  } else {\n    return Math.round(display); \/\/ nearest 1 DKK\n  }\n}\n\nfunction fmtUnit() { return CURRENCY_SYMBOL; }\n\nfunction animateEl(id) {\n  const el = document.getElementById(id);\n  if (!el) return;\n  el.classList.remove(\"pulse\"); void el.offsetWidth; el.classList.add(\"pulse\");\n}\n\nfunction escapeHtml(str) {\n  if (str === null || str === undefined) return \"\";\n  return String(str)\n    .replace(\/&\/g, \"&amp;\")\n    .replace(\/<\/g, \"&lt;\")\n    .replace(\/>\/g, \"&gt;\")\n    .replace(\/\"\/g, \"&quot;\")\n    .replace(\/'\/g, \"&#039;\");\n}\n\nfunction renderResults(containerId, data) {\n  const { drinks, productName, costPerDrink, sellPrice, profitPerDrink, profitPerBox, marginPct, markupPct, costSharePct, breakdown, cocktailName, mlPerDrink } = data;\n  const cappedMargin = Math.min(Math.max(marginPct, 0), 100);\n  const title = escapeHtml(cocktailName || productName);\n  const vatSub = n => ``;\n\n  document.getElementById(containerId).innerHTML = `\n    <div style=\"margin-bottom:18px;\">\n      <div style=\"font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:rgba(0,0,0,0.5);margin-bottom:4px;\">${title} &middot; 5L box<\/div>\n    <\/div>\n    <div class=\"result-rows\">\n      <div class=\"result-box dark profit-hero\">\n        <div class=\"rb-label\">Profit per drink<\/div>\n        <div class=\"rb-value rb-value-hero\" id=\"rv1-${containerId}\">${fmt(profitPerDrink)} ${fmtUnit()} <span style=\"font-size:13px;font-weight:600;letter-spacing:0.05em;vertical-align:middle;color:rgba(255,255,255,0.85);margin-left:4px;\">EX. VAT<\/span><\/div>\n        <div class=\"rb-sub\">at selling price ${fmt(sellPrice,0)} ${fmtUnit()} ${vatSub(sellPrice)}<\/div>\n      <\/div>\n      <div class=\"result-box dark profit-hero\">\n        <div class=\"rb-label\">Profit per box<\/div>\n        <div class=\"rb-value rb-value-hero\" id=\"rv2-${containerId}\">${fmt(profitPerBox,0)} ${fmtUnit()} <span style=\"font-size:13px;font-weight:600;letter-spacing:0.05em;vertical-align:middle;color:rgba(255,255,255,0.85);margin-left:4px;\">EX. VAT<\/span><\/div>\n        <div class=\"rb-sub\">${drinks} drinks &times; ${fmt(profitPerDrink)} ${fmtUnit()} ${vatSub(profitPerBox)}<\/div>\n      <\/div>\n      <div class=\"result-box\">\n        <div class=\"rb-label\">Total cost per drink<\/div>\n        <div class=\"rb-value\" id=\"rv3-${containerId}\">${fmt(costPerDrink)} ${fmtUnit()} <span style=\"font-size:11px;font-weight:600;letter-spacing:0.05em;vertical-align:middle;color:rgba(0,0,0,0.7);margin-left:4px;\">EX. VAT<\/span><\/div>\n        <div class=\"rb-sub\">all ingredients combined ${vatSub(costPerDrink)}<\/div>\n      <\/div>\n      <div class=\"result-box\">\n        <div class=\"rb-label\">Serves per box<\/div>\n        <div class=\"rb-value\" id=\"rv4-${containerId}\">${drinks}<\/div>\n        <div class=\"rb-sub\">at ${mlPerDrink} ml BITE per drink<\/div>\n      <\/div>\n    <\/div>\n\n    ${breakdown ? `\n    <div class=\"cost-breakdown\">\n      <div class=\"cb-title\">Cost breakdown per drink<\/div>\n      ${breakdown.map(b => `<div class=\"cb-row\"><span class=\"cb-name\">${escapeHtml(b.name)}<\/span><span class=\"cb-val\">${fmt(b.cost)} ${fmtUnit()} ${vatSub(b.cost)}<\/span><\/div>`).join(\"\")}\n    <\/div>` : \"\"}\n    <div class=\"cta-row\">\n      <p class=\"cta-copy\" style=\"margin:0;font-size:15px;line-height:1.4;\">Curious about BITE? Order a free sample box and taste it for yourself.<\/p>\n      <div style=\"display:flex;flex-direction:column;gap:8px;width:240px;\">\n        <a href=\"https:\/\/bitedrink.com\/sample-box\/\" target=\"_blank\" class=\"cta-btn\">Order free sample box &rarr;<\/a>\n        <a onclick=\"openLeadForm()\" class=\"cta-btn\" style=\"cursor:pointer;\">Email me the results &rarr;<\/a>\n      <\/div>\n    <\/div>\n  `;\n\n\n}\n\n\/\/ Margin slider handlers &mdash; when user moves slider, reset manual flag so price re-suggests\nfunction updateSoftFromSlider(val) {\n  document.getElementById(\"s-marginValue\").textContent = val + \"%\";\n  const sellInput = document.getElementById(\"s-sellPrice\");\n  if (sellInput) sellInput.dataset.manual = \"0\";\n  calcSoft();\n}\nfunction updateCocktailFromSlider(val) {\n  document.getElementById(\"c-marginValue\").textContent = val + \"%\";\n  const sellInput = document.getElementById(\"c-sellPrice\");\n  if (sellInput) sellInput.dataset.manual = \"0\";\n  calcCocktail();\n}\n\n\/\/ &#9472;&#9472; Soft drink calc &#9472;&#9472;\nfunction calcSoft() {\n  const content = document.getElementById(\"soft-results-content\");\n  const costPrice  = parseFloat(document.getElementById(\"s-costPrice\").value) || 0;\n  const mlPerDrink = parseFloat(document.getElementById(\"s-mlPerDrink\").value) || 35;\n  const otherCost  = parseFloat(document.getElementById(\"s-otherCost\").value) || 0;\n\n  \/\/ Need at least a product selected and a purchase price\n  if (softSelectedIdx === null || costPrice === 0) {\n    content.innerHTML = \"<div class='empty-state'>Select a product and enter your numbers above<\/div>\";\n    document.getElementById(\"s-suggestedPriceRow\").style.display = \"none\";\n    return;\n  }\n\n  const drinks       = Math.floor(5000 \/ mlPerDrink);\n  \/\/ Convert display-currency inputs to DKK for calculation\n  const costPriceDKK  = fromCurrency(costPrice);\n  const otherCostDKK  = fromCurrency(otherCost);\n  const biteCost      = costPriceDKK \/ drinks;\n  const costPerDrink  = biteCost + otherCostDKK; \/\/ always DKK\n\n  \/\/ Read margin from slider\n  const marginPctSlider = parseInt(document.getElementById(\"s-marginSlider\").value) || 80;\n  document.getElementById(\"s-marginValue\").textContent = marginPctSlider + \"%\";\n\n  \/\/ Suggested sell price in DKK based on slider margin\n  const suggestedDKK   = costPerDrink \/ (1 - marginPctSlider \/ 100);\n  const suggestedDisp  = roundSuggested(suggestedDKK); \/\/ rounded display currency\n\n  \/\/ Cost per drink display\n  document.getElementById(\"s-costPerDrinkDisplay\").innerHTML = toCurrency(costPerDrink).toFixed(2) + \" \" + CURRENCY_SYMBOL + '<span style=\"font-size:11px;font-weight:300;opacity:0.55;margin-left:6px;letter-spacing:0.05em;vertical-align:middle;\"><span style=\"color:#fff;font-weight:600;\">EX. VAT<\/span><\/span>';\n\n  \/\/ Show suggested price box\n  const suggestedRow = document.getElementById(\"s-suggestedPriceRow\");\n  suggestedRow.style.display = \"block\";\n\n  \/\/ Auto-fill sell price in display currency\n  const sellInput = document.getElementById(\"s-sellPrice\");\n  if (!sellInput.dataset.manual || sellInput.dataset.manual === \"0\") {\n    sellInput.value = suggestedDisp.toFixed(CURRENCY === \"EUR\" ? 2 : 0);\n  }\n  \/\/ Convert sell price from display currency back to DKK\n  const sellPrice = fromCurrency(parseFloat(sellInput.value) || suggestedDisp);\n\n  const profitPerDrink = sellPrice - costPerDrink;\n  const profitPerBox   = profitPerDrink * drinks;\n  const marginPct      = (profitPerDrink \/ sellPrice) * 100;\n  const markupPct      = ((sellPrice - costPerDrink) \/ costPerDrink) * 100;\n  const costSharePct   = (costPerDrink \/ sellPrice) * 100;\n\n  \/\/ If user manually changed price, sync slider to actual margin (clamped to 60-90)\n  if (sellInput.dataset.manual === \"1\") {\n    const clamped = Math.max(60, Math.min(90, Math.round(marginPct)));\n    const slider = document.getElementById(\"s-marginSlider\");\n    if (slider) slider.value = clamped;\n    document.getElementById(\"s-marginValue\").textContent = clamped + \"%\";\n  }\n\n  \/\/ Build ingredient breakdown for soft drinks (BITE + other costs)\n  const softBreakdown = [\n    { name: products[softSelectedIdx].name + \" (BITE)\", cost: biteCost }\n  ];\n  if (otherCostDKK > 0) {\n    softBreakdown.push({ name: \"Other ingredients\", cost: otherCostDKK });\n  }\n\n  const softData = {\n    productName: products[softSelectedIdx].name,\n    costPerDrink, sellPrice, profitPerDrink, profitPerBox, marginPct,\n    breakdown: softBreakdown,\n    mlPerDrink,\n    drinks\n  };\n  renderResults(\"soft-results-content\", {\n    drinks, productName: softData.productName,\n    costPerDrink, sellPrice, profitPerDrink, profitPerBox,\n    marginPct, markupPct, costSharePct, breakdown: null, cocktailName: null,\n    mlPerDrink\n  });\n  maybeShowLeadForm(\"Soft Drink\", softData);\n}\n\n\/\/ &#9472;&#9472; Cocktail calc &#9472;&#9472;\nfunction calcCocktail() {\n  const content = document.getElementById(\"cocktail-results-content\");\n\n  const biteCost   = parseFloat(document.getElementById(\"c-biteCost\").value)  || 0;\n  const biteMl     = parseFloat(document.getElementById(\"c-biteMl\").value)    || 35;\n  const additionalCost = parseFloat(document.getElementById(\"c-additionalCost\").value) || 0;\n  const cocktailName = document.getElementById(\"c-cocktailName\").value.trim();\n  const sellPriceInput = document.getElementById(\"c-sellPrice\");\n\n  if (cocktailSelectedIdx === null || biteCost === 0) {\n    content.innerHTML = \"<div class='empty-state'>Select a product, add ingredients and enter your selling price<\/div>\";\n    const sr = document.getElementById(\"suggestedPriceRow\"); if (sr) sr.style.display = \"none\";\n    return;\n  }\n\n  \/\/ Convert display-currency inputs to DKK\n  const biteCostDKK    = fromCurrency(biteCost);\n  const biteServings   = Math.floor(5000 \/ biteMl);\n  const biteCostPerDrink = biteCostDKK \/ biteServings;\n\n  \/\/ Ingredient rows\n  const rows = document.querySelectorAll(\"#ingredientsList .ingredient-row\");\n  let totalIngredientCost = 0;\n  const breakdown = [{ name: products[cocktailSelectedIdx].name + \" (BITE)\", cost: biteCostPerDrink }];\n\n  rows.forEach(row => {\n    const inputs = row.querySelectorAll(\"input\");\n    const name       = inputs[0].value.trim() || \"Ingredient\";\n    const bottlePrice = parseFloat(inputs[1].value) || 0;\n    const bottleMl   = parseFloat(inputs[2].value) || 0;\n    const drinkMl    = parseFloat(inputs[3].value) || 0;\n    if (bottlePrice > 0 && bottleMl > 0 && drinkMl > 0) {\n      const priceDKK = fromCurrency(bottlePrice);\n      const cost = (priceDKK \/ bottleMl) * drinkMl;\n      totalIngredientCost += cost;\n      breakdown.push({ name, cost });\n    }\n  });\n\n  const additionalCostDKK = fromCurrency(additionalCost);\n  if (additionalCostDKK > 0) breakdown.push({ name: \"Additional (garnish, ice, etc.)\", cost: additionalCostDKK });\n  const costPerDrink = biteCostPerDrink + totalIngredientCost + additionalCostDKK;\n\n  \/\/ Read margin from slider\n  const marginPctSlider_c = parseInt(document.getElementById(\"c-marginSlider\").value) || 83;\n  document.getElementById(\"c-marginValue\").textContent = marginPctSlider_c + \"%\";\n\n  \/\/ Suggested sell price based on slider margin\n  const suggestedDKK_c  = costPerDrink \/ (1 - marginPctSlider_c \/ 100);\n  const suggestedDisp_c = roundSuggested(suggestedDKK_c);\n  const suggestedRow = document.getElementById(\"suggestedPriceRow\");\n  if (suggestedRow) {\n    suggestedRow.style.display = \"block\";\n    document.getElementById(\"costPerDrinkDisplay\").innerHTML = toCurrency(costPerDrink).toFixed(2) + \" \" + CURRENCY_SYMBOL + '<span style=\"font-size:11px;font-weight:300;opacity:0.55;margin-left:6px;letter-spacing:0.05em;vertical-align:middle;\"><span style=\"color:#fff;font-weight:600;\">EX. VAT<\/span><\/span>';\n  }\n  if (!sellPriceInput.dataset.manual || sellPriceInput.dataset.manual === \"0\") {\n    sellPriceInput.value = suggestedDisp_c.toFixed(CURRENCY === \"EUR\" ? 2 : 0);\n  }\n\n  const sellPrice = fromCurrency(parseFloat(sellPriceInput.value) || suggestedDisp_c);\n  if (sellPrice === 0) {\n    content.innerHTML = \"<div class='empty-state'>Enter your selling price above<\/div>\";\n    return;\n  }\n\n  const profitPerDrink = sellPrice - costPerDrink;\n  const profitPerBox   = profitPerDrink * biteServings;\n  const marginPct      = (profitPerDrink \/ sellPrice) * 100;\n  const markupPct      = ((sellPrice - costPerDrink) \/ costPerDrink) * 100;\n  const costSharePct   = (costPerDrink \/ sellPrice) * 100;\n\n  \/\/ If user manually changed price, sync slider to actual margin (clamped 60-90)\n  if (sellPriceInput.dataset.manual === \"1\") {\n    const clamped = Math.max(60, Math.min(90, Math.round(marginPct)));\n    const slider = document.getElementById(\"c-marginSlider\");\n    if (slider) slider.value = clamped;\n    document.getElementById(\"c-marginValue\").textContent = clamped + \"%\";\n  }\n\n  const cocktailData = {\n    productName: products[cocktailSelectedIdx].name,\n    costPerDrink, sellPrice, profitPerDrink, profitPerBox, marginPct,\n    breakdown,\n    mlPerDrink: biteMl,\n    drinks: biteServings,\n    cocktailName\n  };\n  renderResults(\"cocktail-results-content\", {\n    drinks: biteServings,\n    productName: products[cocktailSelectedIdx].name,\n    costPerDrink, sellPrice, profitPerDrink, profitPerBox,\n    marginPct, markupPct, costSharePct, breakdown, cocktailName,\n    mlPerDrink: biteMl\n  });\n  maybeShowLeadForm(\"Cocktail\", cocktailData);\n}\n\n\/\/ Add 2 default ingredient rows for cocktail to get started\naddIngredient();\naddIngredient();\n\n\/\/ &#9472;&#9472; Lead form &#9472;&#9472;\nlet leadCalcData = null;\nlet leadShown = false;\n\nfunction showLeadForm(calcData) {\n  leadCalcData = calcData;\n  document.getElementById(\"leadOverlay\").style.display = \"flex\";\n  document.body.style.overflow = \"hidden\";\n}\n\nfunction closeLead() {\n  document.getElementById(\"leadOverlay\").style.display = \"none\";\n  document.body.style.overflow = \"\";\n  leadShown = true;\n}\n\nfunction submitLead() {\n  \/\/ Honeypot check &mdash; if this hidden field is filled, it's a bot\n  const honeypot = document.getElementById(\"lf-website\").value.trim();\n  if (honeypot !== \"\") {\n    \/\/ Pretend success &mdash; don't tip off the bot\n    const name = document.getElementById(\"lf-name\").value.trim() || \"there\";\n    showLeadSuccess(name);\n    return;\n  }\n\n  const name    = document.getElementById(\"lf-name\").value.trim();\n  const title   = document.getElementById(\"lf-title\").value.trim();\n  const company = document.getElementById(\"lf-company\").value.trim();\n  const email   = document.getElementById(\"lf-email\").value.trim();\n  const phone   = document.getElementById(\"lf-phone\").value.trim();\n  const errEl   = document.getElementById(\"leadError\");\n\n  if (!name || !title || !company || !email || !phone) {\n    errEl.style.display = \"block\";\n    errEl.textContent = \"Please fill in all fields.\";\n    return;\n  }\n  errEl.style.display = \"none\";\n\n  const btn = document.getElementById(\"leadSubmitBtn\");\n  btn.disabled = true;\n  btn.textContent = \"Sending...\";\n\n  \/\/ Build payload with calc data\n  \/\/ Format ingredient breakdown as HTML table rows (Gmail can render this directly)\n  let breakdownHtml = \"\";\n  let breakdownText = \"\";\n  if (leadCalcData?.breakdown && Array.isArray(leadCalcData.breakdown)) {\n    breakdownHtml = leadCalcData.breakdown.map((b, i) => {\n      const bg = i % 2 === 0 ? \"#f5f5f5\" : \"#ffffff\";\n      const displayCost = (CURRENCY === \"EUR\" ? b.cost * EUR_RATE : b.cost).toFixed(2);\n      return `<tr><td style=\"padding:12px 16px;background:${bg};border-bottom:1px solid #eee;font-size:14px;\">${b.name}<\/td><td style=\"padding:12px 16px;background:${bg};border-bottom:1px solid #eee;text-align:right;font-size:14px;\">${displayCost} ${CURRENCY}<\/td><\/tr>`;\n    }).join(\"\");\n    breakdownText = leadCalcData.breakdown.map(b => {\n      const displayCost = (CURRENCY === \"EUR\" ? b.cost * EUR_RATE : b.cost).toFixed(2);\n      return `${b.name}: ${displayCost} ${CURRENCY}`;\n    }).join(\"\\n\");\n  }\n\n  \/\/ Compute drink title and subtitle for clean email rendering across both flows\n  const isCocktail = leadCalcData?.type === \"Cocktail\";\n  const biteProduct = leadCalcData?.product || \"\";\n  const userCocktailName = leadCalcData?.cocktailName || \"\";\n\n  let drinkTitle, drinkSubtitle;\n  if (isCocktail) {\n    \/\/ Cocktail: title = user's cocktail name OR fallback to BITE flavour\n    drinkTitle = userCocktailName || biteProduct;\n    drinkSubtitle = userCocktailName\n      ? `Cocktail with ${biteProduct} &middot; 5L box`\n      : `Cocktail &middot; 5L box`;\n  } else {\n    \/\/ Soft drink: title = BITE flavour\n    drinkTitle = biteProduct;\n    drinkSubtitle = `Soft drink &middot; 5L box`;\n  }\n\n  \/\/ Helper: format value in current display currency (DKK = rounded, EUR = 2 decimals)\n  const formatPrice = (dkkVal) => {\n    if (typeof dkkVal !== \"number\" || isNaN(dkkVal)) return \"\";\n    const displayVal = CURRENCY === \"EUR\" ? dkkVal * EUR_RATE : dkkVal;\n    return CURRENCY === \"EUR\" ? displayVal.toFixed(2) : Math.round(displayVal).toString();\n  };\n\n  const payload = {\n    name, title, company, email, phone,\n    calculator_type: leadCalcData?.type || \"unknown\",\n    product: biteProduct,\n    cocktail_name: userCocktailName,\n    drink_title: drinkTitle,\n    drink_subtitle: drinkSubtitle,\n    currency: CURRENCY,\n    cost_per_drink: formatPrice(leadCalcData?.costPerDrink),\n    sell_price: formatPrice(leadCalcData?.sellPrice),\n    profit_per_drink: formatPrice(leadCalcData?.profitPerDrink),\n    profit_per_box: formatPrice(leadCalcData?.profitPerBox),\n    gross_margin: typeof leadCalcData?.marginPct === \"number\" ? leadCalcData.marginPct.toFixed(1) : \"\",\n    ml_per_drink: leadCalcData?.mlPerDrink || \"\",\n    serves_per_box: leadCalcData?.drinks || \"\",\n    ingredient_breakdown: breakdownText,\n    ingredient_breakdown_html: breakdownHtml,\n    source: \"BITE Drink Calculator\"\n  };\n\n  \/\/ Send to Zapier webhook\n  const WEBHOOK_URL = \"https:\/\/hooks.zapier.com\/hooks\/catch\/26390117\/43j83rq\/\";\n\n  fetch(WEBHOOK_URL, {\n    method: \"POST\",\n    body: JSON.stringify(payload)\n  })\n  .then(() => showLeadSuccess(name))\n  .catch(() => {\n    \/\/ Show success even on error &mdash; don't block user\n    showLeadSuccess(name);\n  });\n}\n\nfunction showLeadSuccess(name) {\n  document.getElementById(\"leadFormContent\").innerHTML = `\n    <div class=\"lead-success\">\n      <div class=\"lead-success-icon\">&check;<\/div>\n      <div class=\"lead-success-title\">Thanks, ${escapeHtml(name)}!<\/div>\n      <div class=\"lead-success-sub\">Thanks for reaching out. We'll get back to you soon.<br>Your results are ready below.<\/div>\n    <\/div>\n    <button class=\"lead-submit-btn\" style=\"margin-top:24px\" onclick=\"closeLead()\">View my results &rarr;<\/button>\n  `;\n}\n\n\/\/ Store latest calc data so the button can trigger the form\nfunction maybeShowLeadForm(type, data) {\n  leadCalcData = {\n    type,\n    product: data.productName,\n    cocktailName: data.cocktailName || null,\n    costPerDrink: data.costPerDrink,\n    sellPrice: data.sellPrice,\n    profitPerDrink: data.profitPerDrink,\n    profitPerBox: data.profitPerBox,\n    marginPct: data.marginPct,\n    breakdown: data.breakdown || null,\n    mlPerDrink: data.mlPerDrink || null,\n    drinks: data.drinks || null\n  };\n  \/\/ Show the save button once results are ready\n  \/\/ results ready\n}\n\nfunction openLeadForm() {\n  if (leadCalcData) showLeadForm(leadCalcData);\n}\n\n\n\nwindow.addEventListener(\"DOMContentLoaded\", function() {\n  const hLogo = document.getElementById(\"headerLogo\"); if(hLogo) hLogo.src = BITE_LOGO;\n  document.getElementById(\"popupLogo\").src = BITE_LOGO;\n  populatePicker(\"softPicker\", (i) => selectSoftProduct(String(i)));\n  populatePicker(\"cocktailPicker\", (i) => selectCocktailProduct(String(i)));\n});\n\n<\/script>\n\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Calculate your profits with BITE Softdrinks &#038; Lemonades Cocktails &#038; Alcohol Free Select currency &#x1F1E9;&#x1F1F0; DKK &#x1F1EA;&#x1F1FA; EUR Step 01 Select BITE product Choose a flavour &darr; Step 02 Build your drink BITE box price (5L) DKK EX. VAT Auto-filled from selected flavour. Edit if your purchase price differs BITE ml per serve ml Default [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/blocks.php","meta":{"_acf_changed":false,"inline_featured_image":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"class_list":["post-2130","page","type-page","status-publish","entry"],"acf":[],"featured_image_src":null,"featured_image_src_square":null,"_links":{"self":[{"href":"https:\/\/bitedrink.com\/de\/wp-json\/wp\/v2\/pages\/2130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bitedrink.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bitedrink.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bitedrink.com\/de\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/bitedrink.com\/de\/wp-json\/wp\/v2\/comments?post=2130"}],"version-history":[{"count":6,"href":"https:\/\/bitedrink.com\/de\/wp-json\/wp\/v2\/pages\/2130\/revisions"}],"predecessor-version":[{"id":2350,"href":"https:\/\/bitedrink.com\/de\/wp-json\/wp\/v2\/pages\/2130\/revisions\/2350"}],"wp:attachment":[{"href":"https:\/\/bitedrink.com\/de\/wp-json\/wp\/v2\/media?parent=2130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}