/*
 * MIXIT 4.27 · EDITORIAL DESIGN SYSTEM
 * An original, photo-led hospitality product language: open, calm, tactile.
 * Visual layer only: 4.26 data / AI / auth / community / payment flows untouched.
 */
:root {
  --bg:#ffffff;
  --paper:#ffffff;
  --card:#ffffff;
  --paper2:#f7f7f6;
  --line:#e8e8e6;
  --text:#222321;
  --muted:#70736f;
  --gold:#db654f;
  --gold2:#ce5845;
  --peach:#f9e9e2;
  --radius:18px;
  --shadow:0 12px 42px rgba(25,30,25,.09);
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --serif:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --accent:#df6b54;
  --accent-dark:#a83b2c;
  --ink:#222321;
  --soft:#f7f7f6;
  --border:#e8e8e6;
  --green:#1e8166;
  color-scheme:light;
}
html { scroll-behavior:smooth; background:#fff; }
body { background:#fff; color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.5; }
button,input,textarea,select { font-family:inherit; }
a { color:#b44130; }
h1,h2,h3,h4 { color:var(--ink); }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
a:focus-visible,[tabindex]:focus-visible {outline:3px solid #e87b63; outline-offset:3px; }
::selection {background:#ffded2; color:#442a25;}

/* ━━━━━━ PRODUCT NAVIGATION ━━━━━━ */
.app-shell {min-width:0; background:#fff;}
.site-header {
  position:sticky; top:0; z-index:80; isolation:isolate;
  max-width:none; width:100%; height:76px;
  margin:0; padding:0 max(27px, calc((100vw - 1352px) / 2));
  display:flex; align-items:center; gap:26px;
  border-bottom:1px solid #ededeb;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(15px);
}
.wordmark { display:inline-flex; align-items:center; gap:9px; font-family:var(--sans);font-size:29px;font-weight:800;letter-spacing:-1.6px;line-height:1; color:#252622;}
.brand-icon {color:var(--accent); font-family:var(--sans); font-size:29px; font-weight:700; margin:0; vertical-align:0; transform:none;}
.brand-dot {color:var(--accent);}
.desktop-nav {display:flex; gap:6px; margin:auto; align-self:stretch; align-items:center;}
.desktop-nav button {position:relative; min-height:44px; padding:10px 16px; border:0; border-radius:999px; color:#595b58; font-size:13px;font-weight:650; background:transparent;}
.desktop-nav button.active {background:#f4f4f3;color:#222321;}
.desktop-nav button.active:after{content:''; position:absolute; left:23px;right:23px;bottom:-16px;height:2px;border-radius:2px;background:var(--accent);}
.desktop-nav button:hover {background:#f5f5f3;color:#252622;}
.site-header-actions {display:flex;align-items:center;gap:10px; flex:none;}
.account-button {margin:0; min-height:40px; border-radius:999px; border:1px solid var(--border); background:#fff; color:#252622; padding:9px 17px; font-size:13px; font-weight:700; box-shadow:0 1px 3px #2221;}
.account-button:hover {background:#f7f7f6;}
.account-dot {background:#989a95;}
.account-dot.online {background:var(--green);box-shadow:0 0 0 3px #1e81661d;}
.header-help {height:39px;width:39px;border-radius:50%;border:1px solid var(--border);background:#fff;color:#676a65;font:700 15px var(--sans);margin:0; flex:none;}
.header-help:hover {background:#f7f7f6;}
.mixit-premium-nav {border:1px solid #f4d5c8;background:#fff3ee;color:#9f442f;border-radius:999px; min-height:40px; padding:9px 15px;font-weight:700;font-size:12px;}
.mixit-premium-nav:hover {background:#ffe7df;}
.mobile-nav {display:none;}
#app {width:100%;max-width:1342px;margin:0 auto;padding:32px 28px 110px;min-height:calc(100dvh - 76px);}

/* ━━━━━━ LANDING HERO: QUIET, EDITORIAL, PHOTO-LED ━━━━━━ */
.hero {display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch; min-height:368px; overflow:hidden; isolation:auto; border-radius:25px; margin:2px 0 35px; background:#f6f4f0;}
.hero:after,.hero-bg {display:none;content:none;}
.hero-content {padding:clamp(32px,4vw,62px); max-width:none; display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;}
.eyebrow {color:#a44f3c; letter-spacing:.055em; font-weight:750;text-transform:uppercase;font-size:11px;margin-bottom:14px;}
.hero h1 {color:#222321;max-width:650px;line-height:1.08;font:800 clamp(35px,3.75vw,56px)/1.08 var(--sans);letter-spacing:-2.35px;}
.hero p {color:#555a55;max-width:440px;line-height:1.65;font-size:15px;margin:17px 0 25px;}
.hero-note {font-size:11px;color:#777b75;margin-top:17px;font-weight:500;}
.hero-visual {position:relative;min-height:330px;overflow:hidden;background:#e6d8c7;}
.hero-visual>img {width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center 44%;}
.hero-photo-label {position:absolute;right:22px;bottom:22px;display:grid;gap:3px;max-width:205px;background:#ffffffed;backdrop-filter:blur(5px);border-radius:13px;padding:13px 16px;color:#252522;box-shadow:0 8px 25px #24242418;}
.hero-photo-label strong {font-size:12px;font-weight:800;}
.hero-photo-label span {font-size:11px;color:#6b6d68;}

/* ━━━━━━ TYPOGRAPHY / SHARED CONTROLS ━━━━━━ */
.serif,.section-head h2,.editor-section-heading h3,.community-card-body h3,.modal-content h2,.account-sheet h2,.mixit-premium-sheet h2 {font-family:var(--sans);letter-spacing:-.7px;font-weight:750;}
.section-head {margin:31px 0 21px;align-items:center;}
.section-head h2 {font-size:clamp(24px,2.4vw,32px);line-height:1.2;color:#242522;}
.section-head p {font-size:13px;margin-top:7px;color:#737672;line-height:1.5;}
.large-heading,.wizard h1 {font:800 clamp(27px,3vw,38px)/1.16 var(--sans);letter-spacing:-1.2px;}
.lead {font-size:14px;line-height:1.7;color:#70736f;max-width:790px;}
.muted,.small-gray,.micro,.subtle-note {color:#767974;}
.btn {background:#fff;border:1px solid #d9dbd8;min-height:44px; padding:11px 17px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:13px;font-weight:750;color:#242521;box-shadow:none;transition:background .16s,border-color .16s,transform .16s;}
.btn:hover {background:#f7f7f6;border-color:#aeb3ae;}
.btn.gold,.account-submit {background:var(--accent);border:1px solid var(--accent);color:#fff;box-shadow:none;}
.btn.gold:hover,.account-submit:hover {background:#c85944;border-color:#c85944;}
.btn.ghost {background:transparent;border-color:#e2e2e0;color:#333633;}
.btn.small {min-height:38px;font-size:12px;padding:9px 15px;}
.btn.full{width:100%;}
.link-btn {color:#b64a35;font-size:13px;font-weight:750;}
.link-btn:hover {color:#933a2b;}
.inline-arrow{font-size:19px;}
.search {display:flex;align-items:center; gap:10px; min-height:51px; padding:0 17px;border:1px solid #dadcda;border-radius:999px; background:#fff; color:#727672; box-shadow:0 2px 8px #25252508;}
.search:focus-within {border-color:#969b97;box-shadow:0 0 0 3px #e76e5121;}
.search>span{font-size:24px;line-height:1;display:block;transform:translateY(-1px)}
.search input {border:0;outline:none!important;box-shadow:none!important;background:transparent;color:#242521; font-size:14px; min-height:47px; min-width:0; flex:1;}
.search input::placeholder,.input::placeholder {color:#9a9c98;}
.input,textarea.input,.discover-alcohol-select {background:#fff;color:#242521;border:1px solid #d7d9d6;border-radius:11px;min-height:43px;padding:11px 13px;box-shadow:none;}
select.input option,.discover-alcohol-select option,.discover-alcohol-select optgroup{background:#fff;color:#242521;}
.input:focus,.discover-alcohol-select:focus {border-color:#e47860;outline:2px solid #e478602a;}
.chips {gap:9px;}
.chip {flex:none;min-height:38px;padding:9px 16px;border-radius:999px;background:#f5f5f4;border:1px solid transparent;color:#4b504b;font-size:12px;font-weight:650;}
.chip:hover {background:#eceeed;border-color:transparent;color:#20221f;}
.chip.active {background:#272925;color:#fff;border-color:#272925;box-shadow:none;}
.chip.active:hover{background:#383a36;color:#fff;}

/* ━━━━━━ CATALOGUE / SEARCH ━━━━━━ */
.discover-tools {display:flex;flex-direction:column;gap:15px;align-items:stretch;margin-bottom:20px;}
.discover-searchline {display:flex;align-items:stretch;gap:10px;width:100%;max-width:820px;}
.discover-searchline>.search {flex:1;min-width:0;max-width:none;}
.discover-filter-trigger {min-height:51px;border:1px solid #d6d8d5;border-radius:999px;background:#fff;color:#2f3430;padding:11px 19px;gap:9px;font-size:13px;box-shadow:0 1px 4px #2222220a;}
.discover-filter-trigger:hover {border-color:#949b94;background:#f8f9f7;}
.discover-filter-trigger.open,.discover-filter-trigger.has-active {border-color:#da6d53;background:#fff4f0;color:#a84531;}
.discover-filter-count {background:var(--accent);color:#fff;min-width:20px;height:20px;font-weight:750;}
.discover-sources {display:flex;gap:9px;flex-wrap:wrap;padding:2px 0 0;overflow:visible;}
.discover-sources .chip {padding:10px 17px;font-size:12px;white-space:nowrap;}
.discover-filter-panel {background:#fff;border:1px solid #e5e6e4;border-radius:19px;padding:22px;box-shadow:0 14px 35px #2222220a;gap:15px;}
.discover-filter-panel[hidden]{display:none!important;}
.discover-filter-heading {font-size:15px;color:#30332f;font-weight:750;}
.discover-filter-actions button {color:#b64a35;font-size:12px;font-weight:650;}
.discover-filter-actions .discover-filter-close{color:#6c716c;}
.discover-select-label {font-size:12px;color:#404540;font-weight:700;gap:7px;}
.discover-alcohol-select {border-color:#d9dcda;color:#2b302d;max-width:440px; min-height:48px;}
.discover-taste-heading {font-size:13px;color:#383c38;margin:0;font-weight:750;}
.discover-active-filters button {border:1px solid #e6c5b9;background:#fff1ec;color:#9d4030;border-radius:99px;font-weight:650;}
.discover-results-status {font-size:12px;color:#7b7e79;margin-top:1px;}
.search-fuzzy,.editor-fuzzy-note{border:1px solid #efded6;background:#fff8f5;color:#6d493c;border-radius:12px;padding:12px 14px;font-size:12px;}
.search-fuzzy strong,.editor-fuzzy-note strong {color:#a54634;}

/* ━━━━━━ COCKTAIL PHOTO GRID ━━━━━━ */
.cards,.results-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:19px;row-gap:28px;}
.drink-card {border:none;border-radius:0;overflow:visible;background:transparent;min-width:0;color:#222321;transform:none;box-shadow:none;transition:none;}
.drink-card:hover {transform:none;border:none;background:transparent;box-shadow:none;}
.drink-image,.results-grid .drink-image {position:relative;width:100%;height:auto;aspect-ratio:1.11/1;border-radius:16px;overflow:hidden;background:#f0efeb;}
.drink-image img,.results-grid .drink-image img {width:100%;height:100%;object-fit:cover;display:block;transition:transform .32s ease;}
.drink-card:hover .drink-image img {transform:scale(1.035);}
.drink-image:after{display:none;}
.drink-info {padding:11px 2px 0;}
.drink-info h3 {font:750 15px/1.35 var(--sans);letter-spacing:-.25px;color:#292b28;overflow-wrap:anywhere;margin:0 0 4px;}
.drink-info p {font:400 12px/1.52 var(--sans);color:#767974;min-height:0;margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.drink-foot {display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:#747872;font-size:11px;margin-top:8px;line-height:1.3;}
.drink-foot .dot{height:6px;width:6px;border-radius:50%;background:#2c9975;display:inline-block;}
.recipe-origin {top:11px;left:11px;border:0;border-radius:999px;padding:5px 10px;background:#fffffff2;color:#333834;font:750 10px/1.3 var(--sans);letter-spacing:0;box-shadow:0 1px 5px #0000000c;}
.recipe-origin.classic,.recipe-origin.own,.recipe-origin.community-origin {border:0;background:#fffffff2;color:#30342f;}
.recipe-origin.community-origin{color:#6c5271;}
.heart {position:absolute;right:11px;top:11px;z-index:4;width:36px;height:36px;border:0;border-radius:50%;background:#fffefef2;color:#282c27;font-size:20px;box-shadow:0 1px 5px #00000014;display:flex;align-items:center;justify-content:center;}
.heart:hover{background:#fff;}
.heart.selected {color:#d9514e;background:#fff;}
.flavor-match {background:#f7f7f5;border:0;border-radius:9px;color:#455146;padding:8px 9px;margin-top:9px;font-size:11px;line-height:1.45;}
.flavor-match.complete {background:#eff8f2;border:0;}
.flavor-match.partial {background:#fff5ea;border:0;}
.flavor-match.none {background:#f4f5f3;border:0;color:#787c76;}
.flavor-match .match-count{font-weight:750;color:#374337;}
.flavor-match .match-details{color:#44614c;}
.flavor-match .match-not{color:#7c817a;}
.photo-card-action{border:0;background:#ffffffeb;color:#343c35;box-shadow:0 2px 6px #0002;backdrop-filter:blur(7px);bottom:10px;left:10px;font-size:11px;}
.photo-card-action.status {pointer-events:none;}
.community-discover-action {font-size:11px;color:#c35542;font-weight:650;}

/* ━━━━━━ HOME SECONDARY CONTENT ━━━━━━ */
.tip-card {margin:45px 0 10px;padding:24px 28px;display:flex;align-items:center;gap:16px;background:#f7f6f3;border:1px solid #efefeb;border-radius:18px;box-shadow:none;}
.tip-card .tip-symbol {display:grid;place-items:center;flex:none;width:43px;height:43px;background:#fff;border-radius:13px;border:1px solid #efefed;color:var(--accent);font-size:25px;}
.tip-card h3{font-size:15px;color:#30332f;font-weight:750;}
.tip-card p{color:#717671;font-size:12px;margin-top:4px;line-height:1.5;}
.tip-card .link-btn {margin-left:auto;flex:none;}
.empty {border:1px dashed #dcded9;border-radius:18px;background:#fafaf8;padding:37px 30px;color:#333;}
.empty h3{font:750 19px var(--sans);}
.empty p{color:#747973;font-size:13px;line-height:1.65;margin:12px 0 20px;}
.other-mixes {border:1px solid #e5e7e4;background:#fafaf9;border-radius:15px;padding:15px 19px;}
.other-mixes>summary{color:#394039;font-weight:750;}
.other-mixes>summary small{color:#777a75;}

/* ━━━━━━ MIXER FLOW / INGREDIENTS ━━━━━━ */
.wizard {width:100%;max-width:none;}
.wizard-head {display:flex;justify-content:space-between;align-items:center;}
.stage-label{font-size:12px;font-weight:750;color:#ad5846;letter-spacing:.04em;}
.stepper{gap:8px;margin:21px 0 32px;}
.step {background:#e8eae7;border-color:#e8eae7;}
.step.done {background:var(--accent);border-color:var(--accent);}
.wizard h1 {font-size:clamp(29px,3.2vw,39px);margin-bottom:10px;}
.wizard>.lead {max-width:750px;}
.wizard-main{display:grid;grid-template-columns:minmax(0,1fr) 258px;gap:23px;align-items:start;margin-top:23px;}
.wizard-pane {border:1px solid #eceeeb;background:#fff;border-radius:18px;padding:23px;box-shadow:0 2px 12px #25252506;min-width:0;}
.wizard-toolbar {display:grid;gap:15px;}
.toolbar-bar {gap:14px;}
.wizard-toolbar .search{width:100%;max-width:none;}
.family-chips,.detail-chips {display:flex;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;padding-bottom:5px;gap:7px;}
.family-chips .chip,.detail-chips .chip{white-space:nowrap;border-radius:999px;background:#f5f5f4;color:#444944;border:0;min-height:36px;}
.family-chips .chip.active,.detail-chips .chip.active {background:#2b2e2a;color:#fff;}
.ingredient-grid,.bar-panel .ingredient-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;}
.ingredient-wrap{min-width:0;}
.ingredient-wrap .ingredient, .ingredient {background:#fafaf9;border:1px solid #ecedeb;border-radius:13px;min-height:76px;padding:10px 13px;color:#363a36;font-weight:600;font-size:12px;box-shadow:none;transition:background .16s,border-color .16s;}
.ingredient:hover {background:#f5f6f4;border-color:#d8dcd7;}
.ingredient.active {background:#fff3ee;border-color:#eb9e8b;color:#873f2e;}
.ingredient-wrap .ingredient .ingredient-thumb,.ingredient-thumb{width:46px;height:54px;object-fit:cover;border:0;border-radius:8px;background:#fff;}
.ingredient-wrap .ingredient .ingredient-name {font-size:12px;color:inherit;font-weight:650;}
.ingredient-mark {color:#969b94;}
.ingredient.active .ingredient-mark {color:#b54735;font-weight:800;}
.matched-brand,.brand-hint {font-size:10px;color:#9a6e5f;line-height:1.4;}
.ingredient-perma-delete {background:#fff;border:1px solid #e8c1ba;color:#b23e2e;width:25px;height:25px;top:4px;right:4px;}
.ingredient-perma-delete:hover {background:#fff2ef;}
.aside {position:sticky;top:98px;border:1px solid #eceeeb;background:#f9f9f8;border-radius:18px;padding:22px;box-shadow:none;}
.aside-title {font-size:13px;color:#545a54;font-weight:750;}
.aside .count {color:#282d29;font-weight:800;}
.aside p{color:#747a74;font-size:12px;}
.mini {background:#fff;border:1px solid #e5e8e3;color:#4b524b;border-radius:999px;padding:6px 10px;}
.bottom-actions {display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:11px;margin:27px 0;}
.bottom-actions .btn.gold {min-height:47px;}
.feature-panel {border:1px solid #e9ebe8;background:#fff;border-radius:18px;padding:24px;margin-top:22px;}
.feature-panel h3 {font:750 17px var(--sans);color:#30332e;margin-bottom:13px;}
.choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.choice {background:#f8f8f7;border:1px solid #e9ebe8;color:#383d38;border-radius:13px;min-height:58px;text-align:left;padding:15px 17px;}
.choice:hover {border-color:#bcc2bb;background:#f4f5f3;}
.choice.active {background:#fff2eb;border:1px solid #e69b85;color:#a4412f;}
.choice b {font-size:13px;font-weight:700;}
.control-line{border-top:1px solid #efefec;color:#333a33;gap:16px;}
.control-line>span{color:#575d56;font-size:13px;font-weight:700;}
.segmented {background:#f3f4f2;border-radius:999px;padding:4px;border:1px solid #eaedeb;gap:3px;}
.segmented button{color:#5e655e;background:transparent;border-radius:999px;min-height:35px;font-size:12px;padding:8px 12px;}
.segmented button.active {background:#fff;color:#242924;box-shadow:0 1px 4px #2222221a;}
.result-title {display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin:37px 0 19px;}
.result-title h2 {font:800 23px var(--sans);color:#242722;letter-spacing:-.5px;}
.result-title p{color:#737873;font-size:12px;margin-top:5px;}

/* ━━━━━━ MY BAR / SAVED ━━━━━━ */
.bar-intro {display:flex;align-items:center;justify-content:space-between;gap:20px;}
.bar-panel {background:#fff;border:1px solid #eaebe9;border-radius:20px;padding:25px;margin-top:22px;box-shadow:0 2px 12px #25252505;}
.bar-panel h3{font-size:17px;font-weight:750;}
.bar-count{color:var(--accent-dark);font-weight:800;}
.custom-ingredient-creator {background:#fafafa;border:1px solid #e9ebe8;border-radius:15px;padding:18px;margin-top:13px;}
.icon-choices{gap:8px;}
.icon-choice {background:#fff;border:1px solid #e5e8e4;border-radius:12px;color:#414841;}
.icon-choice.active {background:#fff1eb;border-color:#e29177;box-shadow:none;color:#8f3e2c;}
.icon-choice small{font-size:10px;}
.selected-ingredients{border-color:#e5e7e3;}
.selected-ingredients h3 small{color:#767c76;}
.selected-ingredient-chip {border:1px solid #dfdfdd;background:#f7f7f6;color:#414741;border-radius:999px;}
.selected-ingredient-chip span{color:#b14f3b;}
.selected-ingredient-chip:hover{background:#f0f1ef;}
.selected-ingredients .selected-ingredient-chips{gap:7px;}
.saved-tabs {margin:23px 0;}
.page-actions {display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.page-actions .btn{flex:none;}
.divider{border-color:#e9ebe7;}

/* ━━━━━━ COMMUNITY FEED ━━━━━━ */
.community-grid{margin-top:25px;}
.community-card{background:#fff;border:0;overflow:visible;border-radius:0;box-shadow:none;}
.community-picture{height:auto;aspect-ratio:1.11/1;border-radius:16px;background:#eee;overflow:hidden;}
.community-picture img{object-fit:cover;width:100%;height:100%;transition:transform .32s;}
.community-card:hover .community-picture img{transform:scale(1.03);}
.community-card-body{padding:11px 2px 0;}
.community-card-body small{font-size:10px;text-transform:none;letter-spacing:0;color:#82645f;font-weight:700;}
.community-card-body h3{font-size:15px;font-weight:750;color:#262a26;margin:5px 0;}
.community-card-body p {font-size:12px;color:#787c78;min-height:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.community-card-actions{margin-top:10px;}
.community-card-actions span {color:#777d77;font-size:11px;}
.community-toggle input,.editor-taste input{accent-color:var(--accent);}
.community-share-editor{background:#fcfaf8;border:1px solid #f0e9e4;border-radius:13px;}

/* ━━━━━━ EDITOR / RECIPE INGREDIENT PICKER ━━━━━━ */
.form-card {border:1px solid #e9eae8;background:#fff;border-radius:20px;box-shadow:none;padding:28px;}
.field label {color:#3f453e;font-weight:750;}
.editor-section {border-color:#e8eae7;}
.editor-section-heading h3{font-size:21px;}
.editor-section-heading p{color:#757a74;}
.ingredient-row {min-width:0;}
.ingredient-row .input{min-width:0;}
.remove-row{color:#aa4f3e;background:#fff5f1;border:1px solid #f0d0c5;border-radius:10px;}
.ing-selected-preview{color:#227654;}
.ing-suggestions {border:1px solid #e3e6e1;border-radius:15px;background:#fff;box-shadow:0 14px 32px #25252518;}
.editor-cat-filter,.editor-cat-filter.family-filter,.editor-cat-filter.editor-detail-filter {background:#fff;border-color:#ebedeb;}
.editor-cat {background:#f6f7f5;border:0;border-radius:999px;color:#4e544d;min-height:35px;}
.editor-cat.on {background:#2a2e29;color:#fff;border-color:#2a2e29;}
.editor-result-group h4 {color:#6f746e;font-weight:750;}
.editor-ingredient-choice {border-bottom:1px solid #f0f0ee;background:#fff;color:#343834;}
.editor-ingredient-choice:hover,.editor-ingredient-choice:focus-visible{background:#f7f8f6;}
.editor-choice-text small{color:#b04d39;}
.prep-step-number,.method-step-number {border:0;background:#f3f4f1;color:#414741;}
.editor-taste span {background:#f7f8f6;border:1px solid #e7eae6;border-radius:999px;color:#4e554d;}
.editor-taste input:checked+span {background:#fff1ea;border-color:#e99a82;color:#a04330;}
.recipe-photo-field{background:#f9f9f7;border:1px solid #e8ebe7;border-radius:15px;}
.photo-picker>img{background:#eee;border-radius:13px;}

/* ━━━━━━ RECIPE MODALS ━━━━━━ */
.overlay {background:#101813a8;backdrop-filter:blur(6px);padding:22px;}
.modal {background:#fff;color:#2c322c;border-radius:20px;max-width:690px;box-shadow:0 23px 70px #09090928;overflow-y:auto;}
.modal-image{height:310px;background:#eeefeb;}
.modal-image:after{display:none;}
.modal-image img{height:100%;width:100%;object-fit:cover;}
.modal-close{top:15px;right:15px;background:#fff;color:#252c25;border:0;border-radius:50%;box-shadow:0 2px 8px #0002;width:38px;height:38px;font-size:23px;}
.modal-content{padding:25px 29px 31px;color:#272c27;}
.modal-content h2{font-size:30px;color:#222722;line-height:1.19;}
.modal-desc {color:#767b76;font-size:13px;line-height:1.65;}
.modal-badges{gap:7px;margin:18px 0;}
.tagpill {background:#f4f6f3;color:#515851;border:0;border-radius:999px;padding:7px 11px;font-size:11px;}
.details-title{font:750 17px var(--sans);color:#30352f;}
.detail-ingredients {border-top:1px solid #eceeeb;}
.detail-line{border-bottom:1px solid #eceeeb;color:#424842;gap:15px;}
.detail-line strong{color:#252b25;font-weight:750;}
.detail-line.absent{color:#a15f52;}
.details-actions{gap:8px;margin-top:24px;}
.details-actions .btn{flex:none;}
.portion {background:#f5f6f4;border:1px solid #e7e9e5;border-radius:999px;padding:4px;}
.portion button{background:#fff;border-radius:50%;color:#262c25;}
.modal-help{background:#f8f9f7;border-color:#e8ece7;}

/* ━━━━━━ ACCOUNT / PREMIUM / MONETIZATION ━━━━━━ */
.account-overlay,.mixit-premium-overlay {background:#151d17aa;backdrop-filter:blur(6px);padding:17px;}
.account-sheet,.mixit-premium-sheet {background:#fff;color:#272c27;border:1px solid #e5e8e3;border-radius:20px;box-shadow:0 24px 75px #0a161d28;}
.account-sheet {padding:30px 28px;}
.account-sheet h2,.mixit-premium-sheet h2 {font-size:27px;color:#2a2e29;line-height:1.22;}
.account-desc,.mixit-premium-lead{color:#6d756d;font-size:13px;}
.account-sheet label {color:#454c45;font-weight:700;}
.account-x {background:#f4f5f2;color:#535b53;border:0;border-radius:50%;}
.account-tabs{background:#f5f6f4;border-radius:999px;padding:4px;}
.account-tab{color:#555d55;border-radius:999px;}
.account-tab.active{background:#fff;color:#272d27;box-shadow:0 1px 5px #00000012;}
.account-reset{color:#b84e39;}
.account-state{border:1px solid #e8ebe6;background:#f9faf8;}
.account-state small{color:#717771;}
.account-choice{background:#fafbf9;border:1px solid #e4e8e2;color:#2e342e;border-radius:14px;}
.account-choice.primary{background:#fff2ed;border-color:#e9a894;}
.account-choice small{color:#737a73;}
.mixit-plan {border:1px solid #eee5e0;background:#fff8f4;border-radius:14px;padding:15px;color:#333;}
.mixit-plan>span,.mixit-premium-symbol{color:#d66b50;}
.mixit-plan strong {color:#30362f;}
.mixit-plan small{color:#737970;}
.mixit-premium-perks{color:#3c463d;border-color:#e8ebe7;}
.mixit-premium-status{color:#515d52;}
.mixit-premium-fine{color:#818880;}
.mixit-ad{background:#fafafa;border:1px solid #ededeb;border-radius:14px;}
.mixit-ad-label{color:#868a85;}
.toast {background:#292d29;color:#fff;border-radius:999px;border:0;box-shadow:0 9px 27px #252a2540;}
.cloud-indicator{color:var(--green);}

/* ━━━━━━ RESPONSIVE / ACCESSIBILITY ━━━━━━ */
@media(max-width:1120px) {
  .site-header{gap:16px;padding:0 25px;}
  .desktop-nav{gap:0;}
  .desktop-nav button{padding:9px 12px;}
  #app{padding:27px 25px 100px;}
  .cards,.results-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ingredient-grid,.bar-panel .ingredient-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .mixit-premium-nav {display:inline-flex;}
}
@media(max-width:850px) {
  .hero{grid-template-columns:1.08fr .92fr;min-height:316px;}
  .hero-content{padding:29px 30px;}
  .hero h1{font-size:clamp(30px,4.2vw,38px);letter-spacing:-1.5px;}
  .hero p{font-size:13px;line-height:1.55;}
  .hero-visual{min-height:310px;}
  .wizard-main{grid-template-columns:minmax(0,1fr);}
  .aside{display:none;}
  .site-header{gap:9px;}
  .desktop-nav button{padding:8px 10px;font-size:12px;}
  .mixit-premium-nav {display:none;}
}
@media(max-width:680px) {
  html {scroll-padding-top:66px;}
  .site-header{height:64px;padding:0 19px;position:sticky;top:0;gap:8px;}
  .wordmark{font-size:27px;gap:7px;}
  .brand-icon{font-size:26px;}
  .desktop-nav{display:none;}
  .site-header-actions{margin-left:auto;gap:8px;}
  .mixit-premium-nav{display:inline-flex;min-height:35px;padding:7px 11px;font-size:11px;}
  .account-button{padding:7px 12px;min-height:36px;font-size:12px;}
  .header-help{margin:0;width:33px;height:33px;font-size:13px;}
  #app{padding:19px 16px calc(112px + env(safe-area-inset-bottom));min-height:calc(100dvh - 64px);}
  .mobile-nav {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;bottom:0;left:0;right:0;position:fixed;z-index:99;padding:8px 8px calc(6px + env(safe-area-inset-bottom));min-height:71px;background:#fffffff5;border:0;border-top:1px solid #e8ebe7;border-radius:0;box-shadow:0 -4px 16px #22222209;backdrop-filter:blur(14px);}
  .mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:51px;border:0;background:transparent;border-radius:12px;font-size:10px;line-height:1.15;color:#878c86;padding:5px 1px;font-weight:650;}
  .mobile-nav .nav-icon{width:21px;height:21px;display:block;flex:none;font-size:21px;}
  .mobile-nav button.active{color:#b94732;background:#fff1eb;}
  .mobile-nav button span:last-child{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:100%;}
  .hero{grid-template-columns:1.08fr .92fr;min-height:254px;border-radius:18px;margin:1px 0 26px;}
  .hero-content{padding:20px 16px 18px 19px;}
  .hero-visual{min-height:254px;}
  .hero h1{font-size:clamp(24px,5.55vw,34px);letter-spacing:-1.1px;line-height:1.12;}
  .hero p{font-size:11px;line-height:1.52;margin:11px 0 14px;}
  .hero .eyebrow{font-size:9px;margin-bottom:9px;letter-spacing:0;}
  .hero .btn.gold{font-size:11px;padding:9px 11px;min-height:39px;text-align:center;gap:5px;}
  .hero-note{display:none;}
  .hero-photo-label{bottom:12px;right:9px;border-radius:9px;padding:8px 10px;max-width:150px;}
  .hero-photo-label strong{font-size:9px;}
  .hero-photo-label span{font-size:9px;}
  .section-head{margin:26px 0 16px;gap:12px;}
  .section-head h2{font-size:24px;letter-spacing:-.8px;}
  .section-head p{font-size:12px;}
  .discover-tools{gap:13px;margin-bottom:17px;}
  .discover-searchline{gap:8px;}
  .search{min-height:44px;padding:0 13px;}
  .search input{min-height:44px;font-size:13px;}
  .discover-filter-trigger{min-height:44px;padding:9px 13px;border-radius:999px;font-size:12px;gap:6px;}
  .discover-filter-trigger svg{width:17px;height:17px;}
  .discover-sources{flex-wrap:nowrap;overflow-x:auto;gap:7px;padding:2px 2px 9px;scrollbar-width:none;scroll-snap-type:x proximity;}
  .discover-sources::-webkit-scrollbar{display:none;}
  .discover-sources .chip{padding:9px 13px;scroll-snap-align:start;min-height:36px;}
  .discover-filter-panel{padding:16px;gap:14px;border-radius:14px;}
  .discover-results-status{font-size:11px;}
  .cards,.results-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;}
  .drink-image,.results-grid .drink-image{height:auto;aspect-ratio:1.05/1;border-radius:13px;}
  .drink-info{padding:9px 1px 0;}
  .drink-info h3{font-size:13px;line-height:1.35;}
  .drink-info p{font-size:11px;line-height:1.45;min-height:0;}
  .drink-foot{font-size:10px;gap:4px;}
  .heart{width:30px;height:30px;top:7px;right:7px;font-size:18px;}
  .recipe-origin{top:7px;left:7px;font-size:9px;padding:4px 7px;max-width:calc(100% - 48px);}
  .photo-card-action{left:7px;bottom:7px;font-size:10px;min-height:30px;padding:6px 9px;}
  .flavor-match{padding:7px;font-size:10px;}
  .flavor-match .match-count,.flavor-match .match-details{font-size:10px;}
  .tip-card{margin:30px 0 15px;padding:17px;gap:11px;border-radius:15px;flex-wrap:wrap;}
  .tip-card .tip-symbol{width:38px;height:38px;font-size:22px;}
  .tip-card h3{font-size:13px;}
  .tip-card p{font-size:11px;}
  .tip-card .link-btn{width:calc(100% - 48px);max-width:calc(100% - 48px);margin:4px 0 0 48px;text-align:left;}
  .large-heading,.wizard h1{font-size:30px;}
  .wizard-head{gap:9px;}
  .stepper{margin:16px 0 25px;}
  .wizard-pane,.bar-panel{padding:14px;border-radius:15px;}
  .wizard-main{display:block;margin-top:16px;}
  .wizard-toolbar{gap:11px;}
  .ingredient-grid,.bar-panel .ingredient-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .ingredient-wrap .ingredient{padding:9px 8px;min-height:72px;grid-template-columns:37px minmax(0,1fr) 18px;gap:7px;}
  .ingredient-wrap .ingredient .ingredient-thumb{width:36px;height:46px;}
  .ingredient-wrap .ingredient .ingredient-name{font-size:11px;}
  .feature-panel{padding:17px;margin-top:16px;}
  .choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .choice{padding:12px;min-height:50px;}
  .bottom-actions{margin:22px 0;}
  .bottom-actions .btn{flex:1;min-width:0;}
  .result-title{align-items:flex-start;gap:9px;flex-wrap:wrap;}
  .result-title h2{font-size:20px;}
  .bar-panel{margin-top:17px;}
  .bar-intro{gap:14px;}
  .bar-intro .btn{flex:none;}
  .community-picture{height:auto;aspect-ratio:1.05/1;}
  .community-card-body{padding:10px 1px;}
  .community-card-body h3{font-size:13px;}
  .community-card-actions{flex-direction:column;align-items:flex-start;gap:7px;}
  .community-card-actions .btn{min-height:32px;}
  .form-card{padding:16px;border-radius:15px;}
  .overlay{padding:8px;align-items:center;}
  .modal{width:100%;max-height:calc(100dvh - 26px);border-radius:18px;}
  .modal-image{height:230px;}
  .modal-content{padding:21px 18px 24px;}
  .modal-content h2{font-size:25px;}
  .details-actions{gap:7px;}
  .details-actions .btn{flex:1;}
  .account-sheet,.mixit-premium-sheet{padding:25px 20px;}
  .account-sheet h2,.mixit-premium-sheet h2{font-size:25px;}
  .toast{bottom:calc(78px + env(safe-area-inset-bottom));}
}
@media(max-width:390px){
  .site-header{padding:0 12px;}
  .wordmark{font-size:24px;gap:4px;}
  .brand-icon{font-size:23px;}
  .account-button{padding:7px 9px;font-size:11px;}
  .mixit-premium-nav{font-size:10px;padding:6px 7px;}
  #app{padding-left:13px;padding-right:13px;}
  .hero{grid-template-columns:1.12fr .88fr;min-height:248px;}
  .hero-content{padding:15px 10px 16px 14px;}
  .hero h1{font-size:24px;}
  .hero-visual{min-height:248px;}
  .hero-photo-label{display:none;}
  .hero .btn.gold{font-size:10px;}
  .cards,.results-grid{column-gap:9px;}
  .drink-info h3{font-size:12px;}
  .ingredient-wrap .ingredient{grid-template-columns:32px minmax(0,1fr) 16px;gap:5px;padding:8px 6px;}
  .ingredient-wrap .ingredient .ingredient-thumb{width:31px;height:42px;}
  .mobile-nav button{font-size:9px;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  .drink-card:hover .drink-image img,.community-card:hover .community-picture img{transform:none;}
}

/* Last-mile contrast and layout corrections after live-DOM viewport inspection. */
.tip-card>div:not(.tip-symbol){flex:1 1 190px;min-width:0;}
.modal-content{margin-top:0;position:relative;}
.modal-content .eyebrow{color:#a44f3c;}
.method-steps li{color:#475047;line-height:1.65;}
.portion span{color:#353e35;font-size:12px;font-weight:750;}
@media(max-width:680px){
  .tip-card>div:not(.tip-symbol){flex:1 1 0;}
  .tip-card .link-btn{flex:0 0 calc(100% - 48px);width:calc(100% - 48px);max-width:calc(100% - 48px);}
}

/* 4.28 — Konto: Datensicherung und Sicherheit. Airy, touch-first accordions. */
.account-preferences{display:grid;gap:9px;margin:21px 0;}
.account-section{background:#fff;border:1px solid #e6e9e4;border-radius:15px;overflow:hidden;}
.account-section>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;padding:16px 17px;color:#28332d;}
.account-section>summary::-webkit-details-marker{display:none;}
.account-section>summary strong{display:block;font-size:14px;font-weight:750;}
.account-section>summary small{display:block;margin-top:4px;color:#6c746f;font-size:12px;font-weight:400;}
.account-section>summary>span:last-child{font-size:21px;transition:transform .16s ease;}
.account-section[open]>summary>span:last-child{transform:rotate(180deg);}
.account-section-body{padding:3px 17px 18px;border-top:1px solid #eff0ed;}
.account-section-body .small-gray{line-height:1.55;margin:10px 0;}
.account-section-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;}
.account-section-actions>.btn{flex:1 1 135px;min-height:43px;}
.account-section-body form{display:grid;gap:8px;}
.account-section-body input{font-size:16px;}
.account-section:focus-within{border-color:#abbdae;}
@media(max-width:480px){.account-section>summary{padding:15px;}.account-section-body{padding:3px 15px 17px;}}


/* ═══ MixIt 4.29: photo-first editorial hero and meaningful visual identities ═══ */
.hero-visual{background:#261c14;}
.hero-visual>img{object-position:center center;image-rendering:auto;}
.hero-photo-label{background:rgba(255,255,255,.95);}

/* Distinct, consistent origin colors: classic green, MixIt violet, own amber, community blue. */
.drink-card.kind-classic{--kind-rgb:42,153,91;}
.drink-card.kind-mixit{--kind-rgb:144,91,206;}
.drink-card.kind-own{--kind-rgb:206,129,44;}
.drink-card.kind-community{--kind-rgb:39,125,184;}
.drink-card[class*="kind-"] .drink-image{
 border:1.5px solid rgba(var(--kind-rgb),.46);
 box-shadow:0 0 0 1px rgba(var(--kind-rgb),.08),0 0 16px rgba(var(--kind-rgb),.16);
 transition:box-shadow .2s ease,border-color .2s ease;
}
@media(hover:hover){
.drink-card[class*="kind-"]:hover .drink-image{
 border-color:rgba(var(--kind-rgb),.8);
 box-shadow:0 0 0 1px rgba(var(--kind-rgb),.23),0 0 26px rgba(var(--kind-rgb),.26);
}}
.recipe-origin{border:1px solid transparent;font-weight:800;box-shadow:0 2px 7px #0001;backdrop-filter:blur(5px);}
.recipe-origin.classic{background:#e7f8ed;color:#1b763f;border:1px solid #a7dfb8;}
.recipe-origin.mixit{background:#f0e7ff;color:#6c379f;border:1px solid #d7b9f9;}
.recipe-origin.own{background:#fff1dc;color:#96601c;border:1px solid #efcc9b;}
.recipe-origin.community-origin{background:#e7f3ff;color:#23618b;border:1px solid #b6d8f4;}
/* Origin selector chips use the same colors, making the legend immediately understandable. */
.discover-sources .chip[data-explore-origin="classic"]{background:#f0f9f2;border:1px solid #c7eacf;color:#226b3d;}
.discover-sources .chip[data-explore-origin="classic"].active{background:#267749;border-color:#267749;color:white;}
.discover-sources .chip[data-explore-origin="mixit"]{background:#f4eeff;border:1px solid #e1d1f6;color:#7446a8;}
.discover-sources .chip[data-explore-origin="mixit"].active{background:#7849af;border-color:#7849af;color:white;}
.discover-sources .chip[data-explore-origin="own"]{background:#fff6e8;border:1px solid #f0d9b2;color:#90621d;}
.discover-sources .chip[data-explore-origin="own"].active{background:#a96d22;border-color:#a96d22;color:white;}
.discover-sources .chip[data-explore-origin="community"]{background:#eef7ff;border:1px solid #cde4fa;color:#276fa3;}
.discover-sources .chip[data-explore-origin="community"].active{background:#276fa3;border-color:#276fa3;color:white;}
.discover-sources .chip[data-explore-origin="all"].active{background:#30332f;border-color:#30332f;color:white;}
.community-card.kind-community .community-picture{
 border:1.5px solid rgba(39,125,184,.42);
 box-shadow:0 0 15px rgba(39,125,184,.14);
 border-radius:16px;
}
.community-card.kind-community .community-card-body small{color:#246a9e;}
.modal.kind-classic .modal-image{box-shadow:inset 0 0 0 3px #45b878;}
.modal.kind-mixit .modal-image{box-shadow:inset 0 0 0 3px #ba89ed;}
.modal.kind-own .modal-image{box-shadow:inset 0 0 0 3px #eab76a;}

/* A membership status, not a sales button, when already entitled. */
.mixit-premium-nav[hidden],.mixit-plan-status[hidden]{display:none!important;}
.mixit-plan-status{display:inline-flex;align-items:center;justify-content:center;gap:7px;
 border:1px solid #9cd7ad;background:#edf9ee;color:#276a39;
 padding:9px 14px;min-height:40px;border-radius:999px;white-space:nowrap;
 font-size:12px;font-weight:750;line-height:1.1;cursor:default;}
.mixit-plan-status.is-owner{background:#ecf8f0;border-color:#a1dfb5;color:#20683c;}
.mixit-plan-status.is-premium{background:#f5ecff;border-color:#d7b9f6;color:#6d3a9d;}
.plan-label-short{display:none;}
@media(max-width:680px){
 .mixit-plan-status{padding:7px 10px;min-height:35px;font-size:11px;gap:4px;}
 .plan-label-full{display:none;}.plan-label-short{display:inline;}
}
@media(max-width:390px){.mixit-plan-status{padding:7px;font-size:10px;}}
@media(max-width:345px){.site-header-actions{gap:5px;}.site-header-actions .header-help{display:none;}}