:root {
  --commerce-ink: #252822;
  --commerce-ink-soft: #55594f;
  --commerce-paper: #fbfaf7;
  --commerce-cream: #efede5;
  --commerce-border: #deded4;
  --commerce-muted: #62685d;
  --commerce-sage: #e6eadf;
  --commerce-primary: #384b3c;
  --commerce-hover: #26392b;
}

/* Checkout, payment status, and confirmation share the storefront palette. */
body.mobile-checkout {
  background: var(--commerce-paper);
  color: var(--commerce-ink);
}
.mobile-checkout header,
.mobile-checkout footer { background: var(--commerce-ink); border-color: #deded4; color: var(--commerce-paper); }
.mobile-checkout header>a:last-child { color: var(--commerce-paper); }
.mobile-checkout .page-heading>p,
.mobile-checkout .page-heading>span,
.mobile-checkout .checkout-choice small,
.mobile-checkout .checkout-optional summary span { color: var(--commerce-muted); }
.mobile-checkout .page-heading b,
.mobile-checkout a,
.mobile-checkout .section-title a { color: var(--commerce-ink); }
.mobile-checkout header>a:last-child { color: var(--commerce-paper); }
.mobile-checkout .checkout-section,
.mobile-checkout .checkout-main>label,
.mobile-checkout #checkoutEmpty { background: var(--commerce-paper); border-color: var(--commerce-border); }
.mobile-checkout input:not([type=radio]),
.mobile-checkout textarea,
.mobile-checkout select { background: #ffffff; border-color: #c7cbbf; color: var(--commerce-ink); }
.mobile-checkout .checkout-choice { border-color: var(--commerce-border); }
.mobile-checkout .checkout-choice:has(input:checked) {
  background: var(--commerce-cream);
  border-color: var(--commerce-ink);
  box-shadow: inset 3px 0 var(--commerce-ink);
}
.mobile-checkout .checkout-choice input { accent-color: var(--commerce-ink); }
.mobile-checkout .checkout-choice:has(input:focus-visible) { outline-color: var(--commerce-ink); }
.mobile-checkout :is(input,textarea,select,button,a):focus-visible { outline-color: var(--commerce-ink); }
.mobile-checkout .checkout-optional summary::after { color: var(--commerce-ink); }
.mobile-checkout .order-summary { background: var(--commerce-ink); border-color: var(--commerce-ink); color: var(--commerce-paper); }
.mobile-checkout .order-summary .checkout-summary b { color: var(--commerce-paper); }
.mobile-checkout .order-summary .savings-total { background: #e6eadf; border-color: #c9d0c0; color: var(--commerce-ink); }
.mobile-checkout .order-summary .savings-total b { color: var(--commerce-ink); }
.mobile-checkout #placeOrder,
.mobile-checkout .btn.primary {
  background: #384b3c !important;
  border: 1px solid #384b3c !important;
  color: var(--commerce-ink) !important;
}
.mobile-checkout #placeOrder:hover:not(:disabled),
.mobile-checkout .btn.primary:hover { background: #26392b !important; border-color: #26392b !important; }
.mobile-checkout #placeOrder:disabled { background: #384b3c !important; opacity: .55; }
.mobile-checkout #applyPromo,
.mobile-checkout .checkout-retry { background: var(--commerce-cream); border-color: var(--commerce-border); color: var(--commerce-ink); }
.mobile-checkout .checkout-mobile-overview { background: var(--commerce-ink); border-color: #deded4; color: var(--commerce-paper); }
.mobile-checkout .checkout-mobile-overview span { color: var(--commerce-muted); }

body.payment-flow,
body.mobile-confirmation { background: var(--commerce-paper); color: var(--commerce-ink); }
.payment-flow main,
.mobile-confirmation main { background: var(--commerce-paper); border: 1px solid var(--commerce-border); box-shadow: 0 16px 48px #29251e12; }
.payment-flow h1,
.mobile-confirmation h1 { color: var(--commerce-ink); }
.payment-flow p,
.mobile-confirmation p,
.payment-flow #paymentReference { color: var(--commerce-muted); }
.payment-flow .eyebrow { color: #6f7068; }
.payment-flow .spinner { border-color: #e6eadf; border-top-color: var(--commerce-ink); }
.payment-flow .actions a,
.payment-flow .actions button { background: #ffffff; border-color: var(--commerce-border); color: var(--commerce-ink); }
.payment-flow .actions button,
.payment-flow .actions #continuePayment { background: var(--commerce-ink); border-color: var(--commerce-ink); color: #fff; }
.payment-flow .actions button:hover,
.payment-flow .actions #continuePayment:hover { background: var(--commerce-ink-soft); }
.payment-flow :is(button,a):focus-visible,
.mobile-confirmation :is(button,a,input):focus-visible { outline: 3px solid #384b3c; outline-offset: 3px; }
.mobile-confirmation .check { background: #e6eadf; color: var(--commerce-ink); }
.mobile-confirmation dl,
.mobile-confirmation .invoice-email { background: #efede5; border-color: var(--commerce-border); }
.mobile-confirmation dl>div { border-color: var(--commerce-border); }
.mobile-confirmation dt { color: var(--commerce-muted); }
.mobile-confirmation .home,
.mobile-confirmation .invoice-email button { background: var(--commerce-ink); color: #fff; }
.mobile-confirmation .home:hover,
.mobile-confirmation .invoice-email button:hover:not(:disabled) { background: var(--commerce-ink-soft); }
.mobile-confirmation .email-toggle { background: #ffffff; border-color: var(--commerce-border); color: var(--commerce-ink); }
.mobile-confirmation .email-toggle:hover { background: var(--commerce-cream); }
.mobile-confirmation .invoice-email input { border-color: var(--commerce-border); color: var(--commerce-ink); }

@media (max-width: 767px) {
  body.mobile-checkout { background: #fbfaf7; color: var(--commerce-ink); }
  .mobile-checkout .order-summary { background: var(--commerce-ink); border-color: var(--commerce-ink); }
}

/* Approved storefront: light headers, olive actions and readable paper summaries. */
.mobile-checkout #drawer { color: var(--commerce-ink); }
.mobile-checkout header { background: var(--commerce-paper); color: var(--commerce-ink); border-color: var(--commerce-border); }
.mobile-checkout header .vekstore-mark { filter: brightness(0); }
.mobile-checkout header > a:last-child { color: var(--commerce-primary); }
.mobile-checkout footer { background: #242720; border-color: #393e35; color: #f0efe5; }
.mobile-checkout h1 { color: var(--commerce-ink); }
.mobile-checkout .page-heading b, .mobile-checkout a, .mobile-checkout .section-title a { color: var(--commerce-primary); }
.mobile-checkout .checkout-section, .mobile-checkout .checkout-main > label, .mobile-checkout #checkoutEmpty { background: #fff; box-shadow: none; }
.mobile-checkout .checkout-optional summary { color: var(--commerce-ink); }
.mobile-checkout .checkout-choice:has(input:checked) { background: var(--commerce-sage); border-color: var(--commerce-primary); box-shadow: inset 3px 0 var(--commerce-primary); }
.mobile-checkout .checkout-choice input { accent-color: var(--commerce-primary); }
.mobile-checkout .order-summary { background: var(--commerce-cream); border-color: var(--commerce-border); color: var(--commerce-ink); box-shadow: none; }
.mobile-checkout .order-summary .checkout-summary b { color: var(--commerce-ink); }
.mobile-checkout .checkout-summary .checkout-grand, .mobile-checkout .payment-note, .mobile-checkout .checkout-product { border-color: var(--commerce-border); }
.mobile-checkout .payment-note, .mobile-checkout .checkout-product small { color: var(--commerce-muted); }
.mobile-checkout .order-summary #checkoutMessage { color: #a82e34; }
.mobile-checkout .checkout-complete #checkoutMessage { color: var(--commerce-primary); }
.mobile-checkout #placeOrder, .mobile-checkout .btn.primary { color: #fff !important; }
.mobile-checkout #applyPromo, .mobile-checkout .checkout-retry { background: var(--commerce-sage); color: var(--commerce-primary); border-color: #c9d0c0; }
.mobile-checkout #promoResult:not(.promo-error) { color: var(--commerce-primary); }
.mobile-checkout .checkout-mobile-overview { background: var(--commerce-sage); border-color: #c9d0c0; color: var(--commerce-ink); }
.mobile-checkout .quantity-control { background: #fff; border: 1px solid #c7cbbf; border-radius: 8px; }
.mobile-checkout .quantity-control :is(button,output) { color: var(--commerce-ink); }
.mobile-checkout :is(input,textarea,select,button,a):focus-visible { outline-color: var(--commerce-primary); }
.payment-flow main, .mobile-confirmation main { background: #fff; border-radius: 12px; box-shadow: none; }
.payment-flow main img, .mobile-confirmation .brand .vekstore-mark { filter: brightness(0); }
html .payment-flow h1, html .mobile-confirmation h1 { font-family: Georgia, 'Times New Roman', serif !important; font-weight: 400; font-size: 34px; line-height: 1.25; letter-spacing: -.025em; }
.payment-flow .eyebrow { letter-spacing: .12em; font-size: 11px; }
.payment-flow #paymentReference { padding: 14px 16px; background: var(--commerce-cream); border-radius: 8px; color: var(--commerce-ink); font-variant-numeric: tabular-nums; }
.payment-flow #paymentReference:empty { display: none; }
.payment-flow .spinner { border-top-color: var(--commerce-primary); }
.payment-flow .actions a, .payment-flow .actions button { border-radius: 8px; }
.payment-flow .actions button, .payment-flow .actions #continuePayment, .payment-flow .actions #paymentInvoice { background: var(--commerce-primary); border-color: var(--commerce-primary); color: #fff; }
.payment-flow .actions button:hover, .payment-flow .actions #continuePayment:hover, .payment-flow .actions #paymentInvoice:hover { background: var(--commerce-hover); border-color: var(--commerce-hover); }
.payment-flow .payment-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: var(--commerce-sage); color: var(--commerce-primary); }
.payment-flow .payment-mark::before { font: 32px/1 Arial, sans-serif; }
.payment-flow[data-payment-state=paid] .payment-mark::before { content: '✓'; }
.payment-flow[data-payment-state=failed] .payment-mark { background: #f6e8e2; color: #a82e34; }
.payment-flow[data-payment-state=failed] .payment-mark::before { content: '×'; font-size: 38px; }
.payment-flow[data-payment-state=review] .payment-mark { background: var(--commerce-cream); color: #66582c; }
.payment-flow[data-payment-state=review] .payment-mark::before { content: '…'; }
.mobile-confirmation .check { width: 64px; height: 64px; margin: 28px 0 20px; color: var(--commerce-primary); }
.mobile-confirmation dd { color: var(--commerce-ink); }
.mobile-confirmation .home, .mobile-confirmation .invoice-email button { border-radius: 8px; background: var(--commerce-primary); color: #fff; }
.mobile-confirmation .home:hover, .mobile-confirmation .invoice-email button:hover:not(:disabled) { background: var(--commerce-hover); }
.mobile-confirmation .home:last-child { background: var(--commerce-paper); border: 1px solid var(--commerce-border); color: var(--commerce-ink); }
.mobile-confirmation .email-toggle { border-radius: 8px; color: var(--commerce-primary); }
.mobile-confirmation .email-toggle:hover { background: var(--commerce-sage); }
.mobile-confirmation .invoice-email h2, .mobile-confirmation .invoice-email label { color: var(--commerce-ink); }
.mobile-confirmation .invoice-email input { background: #fff; }
@media (max-width: 767px) {
  html .payment-flow h1, html .mobile-confirmation h1 { font-size: 29px; }
  .payment-flow main, .mobile-confirmation main { padding: 30px 22px; }
}

/* Payment returns keep the store typography, action hierarchy and hidden states. */
html .payment-flow h1 {font-family:'Noto Serif',Georgia,serif!important;font-size:32px;}
.payment-flow main {padding:32px 40px 36px;border-radius:14px;}
.payment-flow main .payment-brand img {width:100%;max-width:none;margin:0;}
.payment-flow .payment-mark[hidden],.payment-flow .spinner[hidden],.payment-flow .actions [hidden],.payment-flow #paymentReference[hidden] {display:none!important;}
.payment-flow .payment-state-visual .payment-mark,.payment-flow .payment-state-visual .spinner {margin:0;}
.payment-flow[data-payment-state=unknown] .payment-mark,.payment-flow[data-payment-state=missing] .payment-mark {background:var(--commerce-cream);color:#62685d;}
.payment-flow[data-payment-state=unknown] .payment-mark::before {content:'?';}
.payment-flow[data-payment-state=missing] .payment-mark::before {content:'!';}
.payment-flow .actions .payment-home {background:#fff;border-color:var(--commerce-border);color:var(--commerce-primary);}
@media(max-width:767px){html .payment-flow h1{font-size:29px}.payment-flow main{padding:28px 22px;}}