*{box-sizing:border-box}
:root{color-scheme:light}
body{margin:0;background:#fff;color:#202123;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.page{min-height:100vh;background:#fff}
.hero{max-width:1050px;margin:auto;padding:58px 22px 40px}
.badge{display:inline-block;border:1px solid #e5e5e5;border-radius:999px;padding:8px 12px;font-size:10px;letter-spacing:.14em;color:#6b6f76;background:#fff}
.hero h1{font-size:clamp(42px,7vw,76px);line-height:.98;letter-spacing:-.055em;margin:22px 0 16px;color:#202123}
.hero h1 span{color:#8a8f98}.hero>p{color:#6b6f76;font-size:18px;margin-bottom:34px}
.chat{background:#fff;border:1px solid #e5e5e5;border-radius:22px;overflow:hidden;box-shadow:0 8px 35px rgba(0,0,0,.06)}
.messages{min-height:330px;max-height:540px;overflow:auto;padding:28px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth}
.welcome{margin:auto;text-align:center;color:#6b6f76}.welcome h2{color:#202123;margin:14px 0 6px}.orb{font-size:38px;color:#202123}
.message{max-width:78%;padding:13px 16px;border-radius:18px;line-height:1.5;white-space:pre-wrap}
.message.user{align-self:flex-end;background:#f4f4f4;color:#202123}
.message.assistant{align-self:flex-start;background:#f7f7f8;color:#202123}
.assistantWrap{align-self:flex-start;max-width:78%}.typingBubble{min-width:65px;min-height:43px;display:flex;align-items:center}
.typingDots{display:flex;gap:4px}.typingDots i{width:6px;height:6px;border-radius:50%;background:#777;animation:typing 1s infinite}
.typingDots i:nth-child(2){animation-delay:.15s}.typingDots i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.analyzing{align-self:flex-start;display:flex;align-items:center;gap:8px;color:#6b6f76;font-size:13px;padding:2px 5px}
.spinner{width:14px;height:14px;border:2px solid #ddd;border-top-color:#202123;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.chips{padding:0 18px 14px;display:flex;gap:8px;flex-wrap:wrap}
.chips button{border:1px solid #e5e5e5;background:#fff;color:#555;border-radius:999px;padding:9px 12px;cursor:pointer}
.chips button:hover{background:#f7f7f8}.chips button:disabled{opacity:.4}
.composer{display:flex;align-items:flex-end;gap:8px;padding:12px;border-top:1px solid #e5e5e5}
.composer textarea{flex:1;background:#fff;border:0;outline:0;color:#202123;padding:12px 10px;resize:none;line-height:1.4;max-height:150px;font:inherit}
.composer textarea::placeholder{color:#8b8f96}
.sendBtn,.stopBtn{width:40px;height:40px;border:0;border-radius:50%;font-size:18px;font-weight:800;cursor:pointer;display:grid;place-items:center}
.sendBtn{background:#202123;color:#fff}.stopBtn{background:#202123;color:#fff;font-size:12px}.hidden{display:none!important}
.composerHint{text-align:center;color:#9a9da3;font-size:10px;padding:0 15px 12px}
.combo{max-width:1050px;margin:auto;padding:30px 22px 90px}.comboHead{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}
.eyebrow,.category{color:#777b83;text-transform:uppercase;letter-spacing:.1em;font-size:10px}
.combo h2{margin:6px 0 0;font-size:32px;color:#202123}.total{font-size:28px;font-weight:800;color:#202123}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.card{background:#fff;border:1px solid #e5e5e5;border-radius:18px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.04)}
.image{height:150px;display:grid;place-items:center;font-size:50px;background:#f7f7f8}
.image img{width:100%;height:100%;object-fit:cover}.cardBody{padding:14px}.cardBody h3{margin:7px 0 12px;font-size:16px;color:#202123}.cardBody strong{font-size:17px;color:#202123}.pack{color:#777b83;font-size:12px;margin-top:5px}
.cart{width:100%;margin-top:18px;padding:17px;background:#202123;color:#fff;border:0;border-radius:14px;font-weight:700;cursor:pointer}
@media(max-width:600px){.hero{padding-top:40px}.messages{min-height:290px}.message,.assistantWrap{max-width:92%}.comboHead{align-items:start;gap:12px}.total{font-size:22px}}

.cartSection{max-width:1050px;margin:0 auto;padding:10px 22px 90px}
.cartHead{display:flex;justify-content:space-between;align-items:end;margin-bottom:16px}
.cartHead h2{margin:6px 0 0;font-size:30px;color:#202123}
.clearCart{border:1px solid #e5e5e5;background:#fff;border-radius:10px;padding:8px 12px;color:#666;cursor:pointer}
.cartItem{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px 0;border-bottom:1px solid #eee}
.cartItemInfo{display:flex;align-items:center;gap:12px;min-width:0}
.cartThumb{width:54px;height:54px;border-radius:10px;background:#f7f7f8;display:grid;place-items:center;overflow:hidden}
.cartThumb img{width:100%;height:100%;object-fit:cover}
.cartItemInfo strong{display:block;font-size:14px}.cartItemInfo small{display:block;color:#777;margin-top:4px}
.cartControls{display:flex;align-items:center;gap:8px}.cartControls button,.recommendQty button{border:1px solid #ddd;background:#fff;border-radius:8px;min-width:32px;height:32px;cursor:pointer}
.cartControls button:disabled,.recommendQty button:disabled{opacity:.35;cursor:not-allowed}
.removeItem{border:0!important;color:#777!important;background:transparent!important;width:auto!important}
.cartSummary{display:flex;justify-content:space-between;font-size:20px;font-weight:700;padding:18px 0}
.checkoutBtn{width:100%;padding:16px;border:0;border-radius:12px;background:#202123;color:#fff;font-weight:700;cursor:pointer}
.recommendQty{display:flex;align-items:center;gap:6px;margin-top:12px}.recommendQty span{min-width:24px;text-align:center;font-size:13px}
.recommendQty .addOne{padding:0 10px;width:auto}
@media(max-width:600px){.cartItem{align-items:flex-start;flex-direction:column}.cartControls{width:100%}}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:grid;place-items:center;padding:20px;z-index:20}
.modalBox{position:relative;width:min(520px,100%);background:#fff;border-radius:18px;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modalClose{position:absolute;right:15px;top:12px;border:0;background:transparent;font-size:26px;cursor:pointer;color:#777}
.modalBox h2{margin:6px 0 18px}.modalBox form{display:grid;gap:11px}.modalBox input,.modalBox textarea{width:100%;border:1px solid #ddd;border-radius:10px;padding:12px;font:inherit;box-sizing:border-box}.modalBox textarea{min-height:90px;resize:vertical}.two{display:grid;grid-template-columns:1fr 1fr;gap:11px}.checkoutAmount{display:flex;justify-content:space-between;padding:10px 0;font-weight:600}.checkoutMessage{margin-top:12px;color:#555}

.checkoutPage{max-width:1050px;margin:0 auto;padding:30px 22px 100px;border-top:1px solid #eee}
.checkoutTop{margin-bottom:24px}.checkoutTop h2{margin:7px 0;font-size:34px}.checkoutTop p,.muted{color:#777}
.backBtn{border:1px solid #ddd;background:#fff;border-radius:9px;padding:8px 12px;margin-bottom:18px;cursor:pointer}
.checkoutLayout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.8fr);gap:20px}
.checkoutBlock,.checkoutFormBlock{border:1px solid #e5e5e5;border-radius:16px;background:#fff;padding:18px;margin-bottom:18px}
.checkoutBlockHead{display:flex;justify-content:space-between;align-items:center}.checkoutBlockHead h3{margin:0}
.checkoutItem{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid #eee;gap:15px}.checkoutItem small{display:block;color:#777;margin-top:4px}
.checkoutRecGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.checkoutRecCard{border:1px solid #e5e5e5;border-radius:14px;overflow:hidden}.checkoutRecImage{height:130px;background:#f7f7f8;display:grid;place-items:center;font-size:42px}.checkoutRecImage img{width:100%;height:100%;object-fit:cover}
.checkoutRecBody{padding:12px}.checkoutRecBody h4{margin:5px 0 8px}.checkoutRecActions{display:flex;gap:7px;margin-top:10px}.checkoutRecActions button{border:1px solid #ddd;background:#fff;border-radius:8px;padding:7px 9px;cursor:pointer}.checkoutRecActions .addSuggested{background:#202123;color:#fff;border-color:#202123}.checkoutLoading{padding:18px;color:#777}.checkoutError{padding:18px;color:#a33}
.checkoutFormBlock{position:sticky;top:20px;height:max-content}.checkoutFormBlock form{display:grid;gap:11px}.checkoutFormBlock input,.checkoutFormBlock textarea{width:100%;border:1px solid #ddd;border-radius:10px;padding:12px;font:inherit;box-sizing:border-box}.checkoutFormBlock textarea{min-height:100px;resize:vertical}
@media(max-width:780px){.checkoutLayout{grid-template-columns:1fr}.checkoutFormBlock{position:static}.checkoutRecGrid{grid-template-columns:1fr}}

.checkoutHidden{display:none!important}
.checkoutQuestionBtns{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.checkoutQuestionBtns button{border:1px solid #ddd;background:#fff;color:#202123;border-radius:9px;padding:9px 13px;cursor:pointer}
.checkoutQuestionBtns .checkoutYes{background:#202123;color:#fff;border-color:#202123}

/* V17 checkout transition: a full-screen panel slides in over the conversation. */
.checkoutPage{
  position:fixed!important;
  inset:0!important;
  z-index:50;
  width:100vw!important;
  height:100vh!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  overflow-y:auto!important;
  background:#fff!important;
  border:0!important;
  transform:translateX(100%);
  opacity:1;
  visibility:hidden;
  transition:transform .32s cubic-bezier(.22,.61,.36,1),visibility 0s linear .32s;
}
.checkoutPage.checkoutVisible{
  transform:translateX(0);
  visibility:visible;
  transition:transform .32s cubic-bezier(.22,.61,.36,1),visibility 0s;
}
.checkoutPage .checkoutTop,
.checkoutPage .checkoutLayout{
  max-width:1050px;
  margin-left:auto;
  margin-right:auto;
}
.checkoutPage .checkoutTop{padding:28px 22px 10px}
.checkoutPage .checkoutLayout{padding:0 22px 80px}
.checkoutQuestion{background:#f7f7f8!important}
.checkoutQuestionBtns button{
  appearance:none;border:1px solid #d9d9d9!important;
  background:#fff!important;color:#202123!important;
  border-radius:10px!important;padding:10px 16px!important;
  font-weight:600;cursor:pointer;transition:background .15s,transform .15s,border-color .15s;
}
.checkoutQuestionBtns button:hover{background:#f1f1f1!important;border-color:#bbb!important;transform:translateY(-1px)}
.checkoutQuestionBtns .checkoutYes{background:#202123!important;color:#fff!important;border-color:#202123!important}
.checkoutQuestionBtns .checkoutYes:hover{background:#000!important}
.backBtn{
  appearance:none;border:1px solid #ddd!important;background:#fff!important;
  color:#333!important;border-radius:10px!important;padding:9px 14px!important;
  font-weight:600;cursor:pointer;
}
.backBtn:hover{background:#f7f7f7!important}
.checkoutRecActions button{
  appearance:none;border-radius:9px!important;padding:8px 11px!important;font-weight:600!important;
}
.checkoutRecActions .addSuggested{background:#202123!important;color:#fff!important;border-color:#202123!important}
.checkoutRecActions .skipSuggested{background:#fff!important;color:#555!important;border-color:#ddd!important}
.checkoutRecActions button:hover{transform:translateY(-1px)}
.checkoutBlock,.checkoutFormBlock{box-shadow:0 2px 12px rgba(0,0,0,.035)}
@media(max-width:780px){
 .checkoutPage .checkoutTop{padding-top:18px}
 .checkoutPage .checkoutLayout{padding-bottom:50px}
}

body.checkoutOpen{overflow:hidden!important}

/* V18: checkout is an app-level view, never a scroll target. */
.checkoutPage{display:block!important}
.checkoutPage.hidden{display:block!important;visibility:hidden!important;pointer-events:none!important}
.checkoutPage.checkoutVisible{visibility:visible!important;pointer-events:auto!important}
.checkoutPage.checkoutVisible .checkoutTop,
.checkoutPage.checkoutVisible .checkoutLayout{opacity:1}

/* V19: hidden checkout is genuinely hidden; visible state slides over chat. */
.checkoutPage.hidden{display:block!important;visibility:hidden!important;pointer-events:none!important;transform:translateX(100%)!important}
.checkoutPage.checkoutVisible{display:block!important;visibility:visible!important;pointer-events:auto!important;transform:translateX(0)!important}

.recommendationActions{max-width:760px;margin:10px auto 24px;padding:12px 0;text-align:center}
.recommendationPrompt{font-size:14px;color:#666;margin-bottom:10px}
.recommendationActionBtns{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.recommendationActionBtns button{border:1px solid #ddd;background:#fff;color:#202123;border-radius:10px;padding:10px 15px;font-weight:600;cursor:pointer}
.recommendationActionBtns .reviewCheckoutBtn{background:#202123;color:#fff;border-color:#202123}

.dbStatus{position:fixed;bottom:14px;right:14px;background:#202123;color:#fff;padding:10px 14px;border-radius:10px;font:13px system-ui;z-index:100}.hidden{display:none!important}

.clarificationOptions{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px 48px;max-width:760px}
.clarificationOptions button{border:1px solid #ddd;background:#fff;border-radius:18px;padding:9px 13px;cursor:pointer;color:#202123}

.checkoutBtn:disabled{opacity:.45;cursor:not-allowed}
.minOrderNote{font-size:13px;color:#b45309;margin:8px 0 10px}
.minOrderNote.met{color:#16803a}

.newChatBtn{border:0;background:transparent;text-decoration:underline;cursor:pointer;font:inherit;padding:0;margin-left:6px;opacity:.75}
.newChatBtn:hover{opacity:1}

.clarificationOptions{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.clarificationOptions button{border:1px solid #ddd;background:#fff;border-radius:999px;padding:9px 14px;cursor:pointer;font:inherit}
.clarificationOptions button:hover{background:#f5f5f5}


/* V47 Enterprise customer UI — visual layer only; existing checkout/cart layout retained. */
:root{--gk-ink:#16171a;--gk-muted:#737781;--gk-line:rgba(22,23,26,.09);--gk-card:rgba(255,255,255,.82);--gk-accent:#ff6b35;--gk-accent2:#ffb347}
body{background:radial-gradient(circle at 50% -10%,#fff4e8 0,#fbfaf8 34%,#f5f6f8 100%);color:var(--gk-ink)}
.page{min-height:100vh}
.hero{padding-top:72px;position:relative}
.hero:before{content:"";position:absolute;z-index:-1;width:520px;height:520px;left:50%;top:-180px;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,176,91,.24),rgba(255,176,91,0) 68%);pointer-events:none}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.72);border:1px solid var(--gk-line);box-shadow:0 8px 28px rgba(30,30,30,.05);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:999px;padding:8px 12px;font-weight:750}
.badgeDot{width:7px;height:7px;border-radius:50%;background:#20b26b;box-shadow:0 0 0 4px rgba(32,178,107,.12)}
.livePill{font-size:9px;letter-spacing:.12em;color:#17834f;background:#e9f9f0;border-radius:999px;padding:4px 7px}
.hero h1{font-weight:850;letter-spacing:-.065em}.hero h1 span{background:linear-gradient(100deg,#ff6333,#c35bff 72%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero>p{max-width:760px;margin-left:auto;margin-right:auto;line-height:1.55}
.chat{border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 70px rgba(32,33,35,.11),0 2px 8px rgba(32,33,35,.04);border-radius:26px}
.messages{padding:30px 28px;min-height:360px}
.welcome{max-width:620px}.orb{width:70px;height:70px;margin:0 auto 15px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(145deg,#191a1d,#34363d);color:white;box-shadow:0 14px 35px rgba(20,20,20,.18);font-size:31px}.orb span{display:block;transform:translateY(-1px)}
.welcomeKicker{font-size:10px;font-weight:800;letter-spacing:.16em;color:#8b8f98}.welcome h2{font-size:28px;letter-spacing:-.03em}.welcome p{font-size:15px;line-height:1.55}.languageHint{display:inline-flex;gap:7px;align-items:center;margin-top:12px;padding:9px 12px;border-radius:999px;background:#fff;border:1px solid var(--gk-line);font-size:11px;color:#686c74;box-shadow:0 5px 15px rgba(0,0,0,.035)}
.message{border-radius:20px;padding:14px 17px;box-shadow:0 1px 0 rgba(0,0,0,.02);animation:messageIn .22s ease-out}.message.user{background:#17181b;color:#fff;box-shadow:0 8px 20px rgba(23,24,27,.12)}.message.assistant{background:rgba(248,248,249,.95);border:1px solid rgba(20,20,20,.045)}
@keyframes messageIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.chips{padding:0 22px 16px;align-items:center}.chipsLabel{width:100%;font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:#9a9da3;margin-bottom:1px}.chips button{background:rgba(255,255,255,.85);border-color:rgba(22,23,26,.1);padding:10px 13px;transition:.18s ease}.chips button:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(0,0,0,.06);background:#fff}
.composer{background:rgba(255,255,255,.82);padding:14px 15px;border-top:1px solid rgba(20,20,20,.07)}.composer textarea{padding:12px 13px;border-radius:15px;background:#f6f6f7}.sendBtn{width:44px;height:44px;background:#17181b;box-shadow:0 8px 20px rgba(20,20,20,.13);transition:.18s ease}.sendBtn:hover{transform:translateY(-1px) scale(1.03)}
.composerHint{padding-bottom:14px}.secureDot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#2aaa70;vertical-align:middle;margin-right:4px}
.combo,.cartSection{position:relative}.combo{padding-top:48px}.comboHead{background:rgba(255,255,255,.62);border:1px solid var(--gk-line);border-radius:22px;padding:20px 22px;margin-bottom:16px}.grid{gap:15px}.card{border:1px solid rgba(20,20,20,.07);border-radius:20px;background:rgba(255,255,255,.88);box-shadow:0 10px 28px rgba(20,20,20,.055);transition:.2s ease}.card:hover{transform:translateY(-3px);box-shadow:0 16px 35px rgba(20,20,20,.09)}.image{height:165px;background:linear-gradient(145deg,#fafafa,#f0f1f3)}.cardBody{padding:16px}.cart{background:linear-gradient(100deg,#17181b,#34363b);box-shadow:0 12px 28px rgba(20,20,20,.13);transition:.2s}.cart:hover{transform:translateY(-1px);box-shadow:0 15px 32px rgba(20,20,20,.17)}
.cartSection{background:rgba(255,255,255,.7);border:1px solid var(--gk-line);border-radius:24px;margin-top:12px;padding:24px 26px 34px;box-shadow:0 12px 35px rgba(0,0,0,.05)}.cartHead{margin-bottom:10px}.cartItem{padding:16px 4px}.cartThumb{border-radius:14px}.cartControls button{border-radius:10px}.checkoutBtn{background:linear-gradient(100deg,#17181b,#34363b);box-shadow:0 10px 22px rgba(0,0,0,.11)}
.floatingCart{position:fixed;right:22px;bottom:22px;z-index:35;display:flex;align-items:center;gap:10px;padding:11px 14px 11px 11px;border:1px solid rgba(255,255,255,.6);border-radius:999px;background:rgba(23,24,27,.94);color:#fff;box-shadow:0 16px 40px rgba(0,0,0,.22);cursor:pointer;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:floatIn .24s ease-out}.floatingCartIcon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#111}.floatingCart b{font-size:13px}.floatingCart strong{margin-left:4px;font-size:13px;color:#ffd5bf}@keyframes floatIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:600px){.hero{padding-top:44px}.hero h1{font-size:42px}.messages{padding:22px 16px;min-height:310px}.chips{padding-left:15px;padding-right:15px}.floatingCart{right:12px;bottom:12px}.cartSection{margin-left:12px;margin-right:12px;padding:20px}.languageHint{font-size:10px;max-width:95%;line-height:1.4;justify-content:center}.badge{font-size:10px}}

.deliveryChooser{margin:0 0 18px;padding:16px;border:1px solid #e4e4e7;border-radius:18px;background:#fafafa}.deliveryChooserTitle{font-weight:700;font-size:15px;margin-bottom:12px}.savedDeliveryCard{display:flex;flex-direction:column;gap:4px;padding:13px 14px;margin-bottom:12px;background:#fff;border:1px solid #e5e5e5;border-radius:14px;color:#555}.savedDeliveryCard strong{color:#202123}.deliveryChoiceBtns{display:flex;gap:10px;flex-wrap:wrap}.deliveryChoice{border:1px solid #d7d7da;background:#fff;border-radius:12px;padding:12px 16px;font:inherit;font-weight:650;cursor:pointer}.deliveryChoice.primary{background:#202123;color:#fff;border-color:#202123}.customDeliveryForm.hidden{display:none}.customDeliveryHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.changeDeliveryChoice{border:0;background:transparent;text-decoration:underline;cursor:pointer;font:inherit;color:#666}.checkoutMessage{white-space:pre-wrap}

/* V57.2: conversational choice buttons. Keep the decision inside the chat so
   customers can tap common answers instead of typing them. */
.questionChoices{align-self:flex-start;max-width:82%;margin-top:-4px}
.questionChoicesTitle{font-size:12px;font-weight:700;color:#777b83;letter-spacing:.08em;text-transform:uppercase;margin:0 0 9px 4px}
.questionChoiceGrid{display:flex;flex-wrap:wrap;gap:8px}
.questionChoiceBtn{appearance:none;border:1px solid #dedfe2;background:#fff;color:#202123;border-radius:13px;padding:11px 15px;font:600 14px/1.2 inherit;cursor:pointer;transition:transform .15s,background .15s,border-color .15s,box-shadow .15s}
.questionChoiceBtn:hover{background:#f7f7f8;border-color:#c8c9cc;transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.06)}
.questionChoiceBtn:active{transform:translateY(0)}
.questionChoiceBtn.custom{background:#202123;color:#fff;border-color:#202123}
.questionChoiceBtn.custom:hover{background:#000;border-color:#000}
.questionCustomBox{background:#f7f7f8;border:1px solid #e3e3e5;border-radius:15px;padding:10px;min-width:min(420px,80vw)}
.questionCustomBox input,.questionCustomBox textarea{width:100%;border:1px solid #d9d9dc;background:#fff;border-radius:11px;padding:11px 12px;font:inherit;outline:none;box-sizing:border-box}
.questionCustomBox textarea{min-height:72px;resize:vertical}
.questionCustomBox input:focus,.questionCustomBox textarea:focus{border-color:#202123;box-shadow:0 0 0 3px rgba(32,33,35,.08)}
.questionCustomActions{display:flex;justify-content:flex-end;gap:7px;margin-top:8px}
.questionCustomActions button{border-radius:10px;padding:9px 13px;font:600 13px/1 inherit;cursor:pointer}
.questionBackBtn{border:1px solid #ddd;background:#fff;color:#555}
.questionSubmitBtn{border:1px solid #202123;background:#202123;color:#fff}
@media(max-width:600px){.questionChoices{max-width:94%}.questionChoiceGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.questionChoiceBtn{width:100%}.questionCustomBox{min-width:0;width:100%}}

/* V57.4 cart quantity editor */
.cartQtyInput{width:52px;height:32px;border:1px solid #ddd;background:#fff;border-radius:10px;text-align:center;font:inherit;font-weight:700;outline:none;}
.cartQtyInput:focus{border-color:#999;box-shadow:0 0 0 3px rgba(0,0,0,.06);}
.cartQtyInput::-webkit-outer-spin-button,.cartQtyInput::-webkit-inner-spin-button{margin:0;}
@media(max-width:600px){.cartControls{flex-wrap:wrap;}.cartQtyInput{width:58px;}}

.recommendedOne{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border:1px solid #eee;border-radius:10px;font-size:13px;font-weight:700;color:#555;background:#fafafa;}

/* V57.5 checkout decision choices */
.questionChoices.checkoutDecision {
  margin: 12px 0 4px;
}
.questionChoices.checkoutDecision .questionChoiceGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.questionChoices.checkoutDecision .questionChoiceBtn {
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}

/* V57.7: always-visible, touch-friendly cart quantity editor */
.cartControls{display:flex;align-items:center;gap:7px;flex-wrap:nowrap}
.cartControls .qtyBtn,.cartControls .removeItem{min-width:40px;height:40px;border:1px solid #d9dade;background:#fff;border-radius:11px;font-size:18px;font-weight:800;cursor:pointer;display:inline-grid;place-items:center}
.cartControls .removeItem{min-width:auto;padding:0 12px;font-size:13px;font-weight:700;color:#b42318}
.cartQtyInput{width:58px;height:40px;box-sizing:border-box;border:1px solid #cfd1d6;background:#fff;border-radius:11px;text-align:center;font:700 16px inherit;outline:none;appearance:textfield}
.cartQtyInput:focus{border-color:#202123;box-shadow:0 0 0 3px rgba(32,33,35,.08)}
.cartQtyInput::-webkit-outer-spin-button,.cartQtyInput::-webkit-inner-spin-button{appearance:none;margin:0}
.checkoutQtyControls{display:flex;align-items:center;gap:6px;margin-left:auto}
.checkoutQtyControls button{min-width:36px;height:36px;border:1px solid #ddd;background:#fff;border-radius:9px;font-weight:800;cursor:pointer}
.checkoutQtyControls input{width:48px;height:36px;border:1px solid #ddd;border-radius:9px;text-align:center;font-weight:700}
.checkoutRemove{color:#b42318!important;padding:0 9px}
@media(max-width:700px){.cartControls{width:100%;}.checkoutItem{flex-wrap:wrap}.checkoutQtyControls{width:100%;margin-left:0}.checkoutQtyControls input{width:56px}.cartControls .qtyBtn,.cartControls .removeItem{height:42px}.cartQtyInput{height:42px;width:62px}}

/* V57.8 payment flow */
.paymentPage{
  position:fixed; inset:0; z-index:80; overflow:auto; padding:42px 18px;
  background:rgba(255,255,255,.97);
}
.paymentCard{
  width:min(620px,100%); margin:0 auto; padding:32px; border:1px solid #e6e6e8;
  border-radius:28px; background:#fff; box-shadow:0 24px 70px rgba(20,20,30,.12);
}
.paymentCard h2{font-size:38px; margin:8px 0 10px}
.paymentIntro{font-size:17px; color:#62646c}
.paymentAmount{
  display:flex; justify-content:space-between; align-items:center; margin:24px 0;
  padding:18px 20px; border-radius:18px; background:#f6f6f7;
}
.paymentAmount strong{font-size:28px}
.paymentQrWrap{text-align:center; padding:22px 0}
.paymentQrTitle{font-weight:800; margin-bottom:12px}
.paymentQr{display:block; width:min(330px,80vw); height:auto; aspect-ratio:1/1; object-fit:contain; margin:0 auto; border-radius:18px; border:1px solid #eee; padding:10px; background:#fff}
.paymentQrError{padding:24px; border-radius:16px; background:#fff4f2; color:#8b2e21}
.paymentActions{display:flex; gap:12px; margin-top:12px}
.paymentPrimary,.paymentCancel,.paymentSecondary{
  border:0; border-radius:15px; padding:15px 18px; font-weight:800; font-size:16px; cursor:pointer
}
.paymentPrimary{flex:1; background:#1d1d20; color:#fff}
.paymentCancel{background:#f1f1f2; color:#2b2b2e}
.paymentSecondary{background:#eeeef0;color:#222}
.paymentProofBox{margin-top:22px; padding:22px; border-radius:20px; background:#f7f7f8}
.paymentProofBox h3{margin-top:0}
.paymentProofBox input[type=text],.paymentProofBox input:not([type=file]){width:100%; box-sizing:border-box; padding:15px; border:1px solid #ddd; border-radius:12px; font-size:16px}
.paymentOr{text-align:center;color:#8a8b91;font-weight:700;margin:12px}
.paymentUpload{display:block; padding:18px; border:2px dashed #d8d8dc; border-radius:14px; text-align:center; cursor:pointer; background:#fff}
.paymentUpload input{display:none}
.paymentFileName{font-size:13px;color:#777;margin:8px 0}
.paymentProofBox .paymentPrimary{width:100%;margin-top:12px}
.paymentProofBox .paymentSecondary{width:100%;margin-top:8px}
.paymentMessage{margin-top:12px;color:#9a3025}
.paymentSuccess,.paymentCancelled{text-align:center;padding:28px 8px}
.paymentSuccessIcon,.paymentCancelledIcon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;font-size:34px;font-weight:900;background:#e9f8ee;color:#198443}
.paymentCancelledIcon{background:#fbeaea;color:#a83232}
.paymentSuccess h3,.paymentCancelled h3{font-size:24px;margin:8px 0}
.hidden{display:none!important}
@media(max-width:620px){
  .paymentCard{padding:22px;border-radius:22px}
  .paymentCard h2{font-size:30px}
  .paymentActions{flex-direction:column}
  .paymentCancel{width:100%}
}

/* =========================================================
   V57.9 FINAL UI POLISH
   ========================================================= */

:root{
  --gk-ink:#17181c;
  --gk-muted:#737680;
  --gk-line:#e9e9ed;
  --gk-soft:#f7f7f9;
  --gk-card:#ffffff;
  --gk-shadow:0 22px 65px rgba(20,20,28,.08);
}

body{
  background:
    radial-gradient(circle at 8% 0%,rgba(255,132,82,.08),transparent 28%),
    radial-gradient(circle at 92% 4%,rgba(184,91,255,.08),transparent 30%),
    #fbfbfc;
  color:var(--gk-ink);
}

.page{
  width:min(1240px,calc(100% - 36px));
  margin:0 auto;
}

.hero{
  padding-top:34px;
}

.badge{
  width:max-content;
  max-width:100%;
  margin-bottom:22px;
  border:1px solid rgba(20,20,25,.08);
  box-shadow:0 8px 26px rgba(20,20,25,.05);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);
}

.hero h1{
  max-width:980px;
  letter-spacing:-.055em;
  line-height:.96;
  margin:0;
}

.heroSubtitle{
  max-width:760px;
  margin:22px 0 30px;
  color:#696c75;
  font-size:19px;
  line-height:1.55;
}

.chat{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(22,23,28,.08);
  border-radius:30px;
  background:rgba(255,255,255,.9);
  box-shadow:var(--gk-shadow);
  backdrop-filter:blur(18px);
}

.chat:before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:linear-gradient(90deg,#ff7048,#d64fe6,#8c55ff);
  opacity:.9;
}

.messages{
  min-height:430px;
  max-height:62vh;
  padding:36px 34px 28px;
  scroll-behavior:smooth;
}

.welcome{
  min-height:350px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
}

.welcome .orb{
  width:64px;
  height:64px;
  margin-bottom:18px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#ff7957,#b957ef);
  color:#fff;
  font-size:28px;
  box-shadow:0 16px 34px rgba(195,85,170,.22);
}

.welcomeKicker{
  color:#999ba2;
  letter-spacing:.13em;
  font-size:11px;
  font-weight:800;
}

.welcome h2{
  margin:10px 0 8px;
  font-size:34px;
  letter-spacing:-.04em;
}

.welcome p{
  max-width:520px;
  margin:0;
  color:#767982;
  line-height:1.55;
}

.chips{
  padding:14px 30px 18px;
  border-top:1px solid rgba(20,20,25,.06);
  background:rgba(250,250,251,.88);
}

.chipsLabel{
  margin:0 0 9px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#a1a3aa;
}

.chips button{
  border:1px solid #dedfe3;
  background:#fff;
  color:#383a40;
  border-radius:999px;
  padding:10px 15px;
  margin:0 6px 5px 0;
  box-shadow:0 2px 8px rgba(0,0,0,.025);
  transition:.16s ease;
}

.chips button:hover{
  border-color:#bfc1c7;
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}

.composer{
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding:15px 18px;
  border-top:1px solid var(--gk-line);
  background:#fff;
}

.composer textarea{
  min-height:52px;
  max-height:140px;
  border:1px solid #e4e5e8;
  border-radius:17px;
  background:#f7f7f8;
  padding:14px 16px;
  resize:none;
  transition:.16s ease;
}

.composer textarea:focus{
  background:#fff;
  border-color:#c8c9ce;
  box-shadow:0 0 0 4px rgba(20,20,25,.05);
}

.sendBtn,.stopBtn{
  flex:0 0 52px;
  width:52px;
  height:52px;
  border-radius:50%;
  box-shadow:0 9px 22px rgba(0,0,0,.15);
}

.composerHint{
  padding:0 20px 15px;
  font-size:11px;
  color:#a1a3aa;
  text-align:center;
}

.newChatBtn{
  color:#65676e;
}

.cartSection,.combo{
  margin-top:22px;
  box-shadow:var(--gk-shadow);
}

.cartHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.cartHead h2,.comboHead h2{
  letter-spacing:-.035em;
}

.cartItem{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  align-items:center;
  gap:15px;
  border-bottom:1px solid #f0f0f2;
}

.cartItem:last-child{border-bottom:0}

.cartThumb{
  width:72px;
  height:72px;
  object-fit:cover;
  background:#f6f6f7;
}

.cartControls{
  justify-content:flex-end;
}

.checkoutPage{
  background:#fbfbfc!important;
}

.checkoutTop{
  width:min(1080px,calc(100% - 44px));
  margin:0 auto;
  padding:40px 0 24px;
}

.checkoutTop h2{
  font-size:42px;
  letter-spacing:-.045em;
}

.checkoutTop p{
  max-width:700px;
  line-height:1.55;
}

.checkoutLayout{
  width:min(1080px,calc(100% - 44px));
  margin:0 auto;
  grid-template-columns:minmax(0,1.5fr) minmax(330px,.75fr);
  gap:24px;
  padding-bottom:50px;
}

.checkoutBlock,.checkoutFormBlock{
  border:1px solid rgba(20,20,25,.08);
  border-radius:24px;
  padding:22px;
  box-shadow:0 12px 38px rgba(20,20,25,.045);
}

.checkoutFormBlock{
  top:24px;
}

.checkoutFormBlock h3{
  font-size:26px;
  letter-spacing:-.03em;
}

.checkoutFormBlock input,.checkoutFormBlock textarea{
  min-height:50px;
  border-radius:13px;
  border-color:#e0e1e5;
  background:#fafafa;
}

.checkoutFormBlock textarea{
  min-height:105px;
}

.checkoutAmount{
  margin-top:4px;
  padding:17px 0;
  border-top:1px solid #eeeef0;
  font-size:16px;
}

.checkoutAmount strong{
  font-size:25px;
}

.checkoutBtn{
  min-height:52px;
  border-radius:15px;
  font-size:16px;
  background:#1d1e22;
  box-shadow:0 10px 24px rgba(20,20,20,.13);
  transition:.16s ease;
}

.checkoutBtn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(20,20,20,.17);
}

.paymentPage{
  background:
    radial-gradient(circle at 15% 0%,rgba(255,112,72,.08),transparent 28%),
    radial-gradient(circle at 85% 0%,rgba(173,82,255,.08),transparent 28%),
    #fbfbfc;
  padding:38px 18px;
}

.paymentCard{
  width:min(590px,100%);
  border-radius:30px;
  box-shadow:0 30px 90px rgba(20,20,30,.12);
  padding:34px;
}

.paymentCard h2{
  letter-spacing:-.045em;
}

.paymentAmount{
  border:1px solid #ececf0;
  background:#f8f8fa;
}

.paymentQr{
  width:min(300px,72vw);
  border-radius:20px;
  box-shadow:0 12px 30px rgba(0,0,0,.07);
}

.paymentPrimary{
  min-height:52px;
  border-radius:15px;
}

.paymentCancel,.paymentSecondary{
  min-height:52px;
  border-radius:15px;
}

@media(max-width:780px){
  .page{width:min(100% - 20px,1240px)}
  .hero{padding-top:22px}
  .hero h1{font-size:46px}
  .heroSubtitle{font-size:16px;margin:17px 0 23px}
  .messages{min-height:360px;max-height:58vh;padding:24px 16px}
  .welcome h2{font-size:28px}
  .chips{padding:13px 16px}
  .composer{padding:11px}
  .composerHint{padding-bottom:12px}
  .checkoutTop,.checkoutLayout{width:min(100% - 28px,1080px)}
  .checkoutTop{padding-top:24px}
  .checkoutTop h2{font-size:34px}
  .cartItem{grid-template-columns:58px minmax(0,1fr)}
  .cartControls{grid-column:2;justify-content:flex-start}
  .cartThumb{width:58px;height:58px}
}

@media(max-width:520px){
  .hero h1{font-size:38px}
  .heroSubtitle{font-size:15px}
  .chat{border-radius:22px}
  .paymentCard{padding:23px;border-radius:24px}
}
