/* Shared appearance layer for server-rendered pages and dynamically added UI. */
html { color-scheme: light; }
body { color: #172033; }
:where(button, a, input, select, textarea):focus-visible { outline: 3px solid #0284c7; outline-offset: 3px; }
html[data-theme="dark"] { color-scheme: dark; background: #0f172a; }
html[data-theme="dark"] body { color: #e2e8f0; background-color: #0f172a; }
@media screen {
    html[data-theme="dark"] :is(.bg-white, .bg-gray-50, .bg-gray-100) { background-color: #1e293b; }
    html[data-theme="dark"] :is(.text-gray-900, .text-gray-800, .text-gray-700) { color: #e2e8f0; }
    html[data-theme="dark"] :is(.text-gray-600, .text-gray-500, .text-gray-400) { color: #b6c2d3; }
    html[data-theme="dark"] :is(.border-t, .border-b, .border-r, .border-l, .border, table, td, th) { border-color: #334155; }
    html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea, .field) {
        background-color: #0f172a;
        color: #f1f5f9;
        border-color: #64748b;
    }
    html[data-theme="dark"] :is(input, textarea)::placeholder { color: #94a3b8; opacity: 1; }
    html[data-theme="dark"] :is(input, select, textarea):disabled { color: #94a3b8; background-color: #334155; }
    html[data-theme="dark"] :is(.text-primary-600, .text-primary-700, .text-blue-600) { color: #7dd3fc; }
    html[data-theme="dark"] :is(.text-red-600, .text-red-700) { color: #fca5a5; }
    html[data-theme="dark"] :is(.text-yellow-600, .text-yellow-700) { color: #fde68a; }
    html[data-theme="dark"] :is(.bg-red-50, .bg-red-100) { background-color: #450a0a; color: #fecaca; border-color: #7f1d1d; }
    html[data-theme="dark"] :is(.bg-green-50, .bg-green-100) { background-color: #052e16; color: #bbf7d0; border-color: #166534; }
    html[data-theme="dark"] :is(.bg-blue-50, .bg-primary-100) { background-color: #082f49; color: #bae6fd; }
    html[data-theme="dark"] :is(.bg-yellow-50, .bg-yellow-100) { background-color: #451a03; color: #fde68a; }
    html[data-theme="dark"] :is(.text-green-800, .text-red-800, .text-yellow-800, .text-primary-800) { color: inherit; }
    html[data-theme="dark"] .cat { background: #334155; color: #e2e8f0; }
    html[data-theme="dark"] .cat.active { background: #0369a1; color: #fff; }
    html[data-theme="dark"] :focus-visible { outline-color: #7dd3fc; }
}

/* Cart hierarchy: quiet item surfaces, grouped payment fields, prominent total. */
.checkout-panel { border: 1px solid #cbd5e1; box-shadow: 0 4px 16px #0f172a0a; }
.checkout-panel h2 { font-size: 20px; padding-bottom: 16px; border-bottom: 1px solid #e2e8f0; }
.checkout-panel #cartItems { max-height: 38vh; overflow-y: auto; padding: 2px; }
.checkout-panel #cartItems > div { border: 0; border-bottom: 2px solid #94a3b8; border-radius: 0; padding: 16px 0; margin: 0; }
.checkout-panel #cartItems > div:first-child { padding-top: 2px; }
.checkout-panel #cartItems b { font-size: 12px; line-height: 1.4; }
.checkout-panel #cartItems small { color: #64748b; margin-top: 4px; }
.checkout-panel #cartItems button { min-width: 32px; min-height: 32px; border: 1px solid #cbd5e1; border-radius: 6px; margin: 0 3px; font-size: 16px; }
.checkout-panel label { display: block; font-size: 14px; font-weight: 500; }
.checkout-panel .field { display: block; min-height: 44px; margin-top: 6px; }
.checkout-panel .checkout-total { padding: 16px 0; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; font-size: 22px; align-items: baseline; }
.checkout-panel #total { font-variant-numeric: tabular-nums; font-size: 26px; }
.checkout-panel [hidden] { display:none !important; }
.checkout-panel #checkoutBtn { background: #0369a1; min-height: 48px; border-radius: 10px; }
.checkout-panel #checkoutBtn:hover:not(:disabled) { background: #075985; }
.checkout-panel #checkoutBtn:disabled { cursor: not-allowed; }
.checkout-panel #changeDisplay { min-height: 24px; }
.checkout-panel #cartItems span:has(> button) { font-size:20px; font-weight:700; white-space:nowrap; }
.checkout-panel #cartItems button { min-width:26px; min-height:28px; font-size:13px; font-weight:500; vertical-align:middle; }
@media (min-width:1024px) {
    .checkout-panel { height:calc(100dvh - 112px); display:flex; flex-direction:column; min-height:560px; }
    .checkout-panel h2 { flex:none; }
    .checkout-panel #cartItems { flex:1 1 auto; min-height:160px; max-height:none; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
    .checkout-panel #cartItems + div { flex:none; }
}
.checkout-panel #cartItems > .flex { flex-wrap:wrap; gap:10px; }
.checkout-panel #cartItems > .flex > span:first-child { flex:1 1 120px; min-width:0; overflow-wrap:anywhere; }
.checkout-panel #cartItems > .flex > span:last-child { flex:0 0 auto; margin-left:auto; }
.checkout-panel #cartItems > div > b { display:block; overflow-wrap:anywhere; }
.checkout-panel #cartItems .items-center { flex-wrap:wrap; gap:6px; }
.checkout-panel #cartItems + div { margin-top:8px; padding-top:8px; }
.checkout-panel .checkout-total { padding:8px 0; }
@media (min-width:1024px) and (max-height:720px) {
    .checkout-panel { height:auto; min-height:0; position:static; }
    .checkout-panel #cartItems { flex:none; height:200px; }
}
html[data-theme="dark"] .checkout-panel { border-color: #475569; }
html[data-theme="dark"] .checkout-panel :is(h2, #cartItems > div, .checkout-total) { border-color: #64748b; }
html[data-theme="dark"] .checkout-panel #cartItems button { border-color: #64748b; background: #0f172a; }
html[data-theme="dark"] .checkout-panel #cartItems small { color: #b6c2d3; }
@media (max-width: 1023px) { .checkout-panel { position: static; } .checkout-panel #cartItems { max-height: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
@media print { html, html[data-theme="dark"] body { color-scheme: light; color: #000; background: #fff; } }