/* =========================================================================
   MK Checkout — follows Modular Kit's colors (light + dark), fonts and radius.
   ========================================================================= */
.mkco-scope {
	--co-bg: var(--mk-bg, #ffffff);
	--co-surface: var(--mk-surface, #f4f4f6);
	--co-text: var(--mk-text, #0b0b0d);
	--co-muted: var(--mk-muted, #6b6b74);
	--co-line: color-mix(in srgb, var(--co-text) 13%, var(--co-bg));
	--co-a: var(--mk-accent, #2f7df6);
	--co-at: var(--mk-accent-text, #ffffff);
	--co-a2: var(--mk-accent-2, #ffb020);
	--co-c: var(--mk-contrast, #17191c);
	--co-ct: var(--mk-contrast-text, #ffffff);
	--co-soft: color-mix(in srgb, var(--co-a) 12%, var(--co-bg));
	--co-r: var(--mk-radius, 16px);
	--co-r-lg: calc(var(--co-r) * 1.5);
	--co-r-in: calc(var(--co-r) * .7);
	--co-head: var(--mk-font-head, inherit);
	--co-body: var(--mk-font-body, inherit);
	--co-label: var(--mk-font-label, ui-monospace, SFMono-Regular, Menlo, monospace);
	--co-weight: var(--mk-head-weight, 700);
	font-family: var(--co-body);
	color: var(--co-text);
}
.mkco-scope *, .mkco-scope *::before, .mkco-scope *::after { box-sizing: border-box; }
.mkco-scope [hidden] { display: none !important; }
.mkco-scope :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
.mkco-scope :where(ul, ol) { list-style: none; padding: 0; }
.mkco-scope img { max-width: 100%; height: auto; display: block; }
.mkco-scope a { color: inherit; }
html.mkco-lock, html.mkco-lock body { overflow: hidden; }
.mkco-hl { color: var(--co-a); }
.mkco-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Type */
.mkco-label { font-family: var(--co-label); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--co-muted); }
.mkco-label.is-strong { color: var(--co-text); font-family: var(--co-head); font-size: 14px; letter-spacing: .1em; font-weight: var(--co-weight); }
.mkco-eyebrow { font-family: var(--co-label); font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--co-a); margin-bottom: 10px !important; }
.mkco-h1 { font-family: var(--co-head); font-weight: var(--co-weight); font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.025em; line-height: 1.1; }
.mkco-h2 { font-family: var(--co-head); font-weight: var(--co-weight); font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; line-height: 1.12; text-transform: uppercase; outline: none; }
.mkco-lead { color: var(--co-muted); font-size: 15px; line-height: 1.6; margin-top: 10px !important; max-width: 56ch; }
.mkco-small { color: var(--co-muted); font-size: 12.5px; line-height: 1.5; }
.mkco-muted { color: var(--co-muted); }
.is-center { text-align: center; margin-left: auto !important; margin-right: auto !important; }
.mkco-brand { font-family: var(--co-head); font-weight: var(--co-weight); letter-spacing: .22em; text-transform: uppercase; font-size: 15px; text-align: center; margin-bottom: 18px; }

/* Buttons */
.mkco-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; font: 700 14px/1.1 var(--co-head); letter-spacing: .06em; text-transform: uppercase; text-decoration: none !important; cursor: pointer; transition: transform .18s ease, filter .2s, box-shadow .2s, opacity .2s; -webkit-tap-highlight-color: transparent; }
.mkco-btn svg { flex: none; }
.mkco-btn.is-primary {
	color: var(--co-at) !important;
	background: linear-gradient(180deg, color-mix(in srgb, var(--co-a) 66%, #fff) 0%, color-mix(in srgb, var(--co-a) 92%, #fff) 40%, var(--co-a) 64%, color-mix(in srgb, var(--co-a) 84%, #000) 100%);
	border-color: color-mix(in srgb, var(--co-a) 78%, #000);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 8px rgba(0, 0, 0, .1), 0 8px 22px -12px color-mix(in srgb, var(--co-a) 85%, transparent);
}
.mkco-btn.is-ghost { color: var(--co-text) !important; background: color-mix(in srgb, var(--co-bg) 70%, transparent); border-color: var(--co-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.mkco-btn:hover:not(:disabled) { transform: scale(1.03); filter: brightness(1.04); }
.mkco-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.mkco-btn.is-sm { min-height: 38px; padding: 0 16px; font-size: 12.5px; }
.mkco-btn.is-block { width: 100%; }
.mkco-btn:focus-visible, .mkco-link:focus-visible, .mkco-x:focus-visible, .mkco-input:focus-visible, .mkco-method:has(input:focus-visible), .mkco-check input:focus-visible, .mkco-drop:has(input:focus-visible) { outline: 2px solid var(--co-a); outline-offset: 3px; }
.mkco-link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; background: none; border: 0; color: var(--co-muted); font-family: var(--co-label); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; text-decoration: none; }
.mkco-link:hover { color: var(--co-text); }
.mkco-link.is-accent { color: var(--co-a); letter-spacing: .02em; text-transform: none; font-family: var(--co-body); font-size: inherit; padding: 0; }
.mkco-link.is-center { display: flex; margin: 12px auto 0; }
.mkco-x { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--co-line); background: var(--co-bg); color: var(--co-text); cursor: pointer; transition: transform .15s; }
.mkco-x:hover { transform: scale(1.06); }
.mkco-x.is-float { position: absolute; top: 16px; right: 16px; z-index: 2; }

/* Cards / panels */
.mkco-card { position: relative; background: var(--co-bg); border: 1.5px solid var(--co-line); border-radius: var(--co-r-lg); padding: clamp(20px, 3vw, 36px); }
.mkco-card.is-inset { background: var(--co-surface); border-radius: var(--co-r); padding: 18px 20px; }
.mkco-panel { background: var(--co-bg); border: 1.5px solid var(--co-line); border-radius: var(--co-r-lg); padding: clamp(18px, 2.4vw, 26px); }
.mkco-panel + .mkco-panel { margin-top: 16px; }
.mkco-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--co-line); }
.mkco-panel__head.is-sub { margin-top: 18px; }

/* Forms */
.mkco-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; margin-top: 22px; }
.mkco-fields.is-narrow { grid-template-columns: minmax(0, 1fr); max-width: 380px; margin-left: auto; margin-right: auto; }
.mkco-field { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mkco-field.is-half { grid-column: auto; }
.mkco-lbl { font-family: var(--co-label); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--co-muted); }
.mkco-lbl span { color: var(--co-a); }
.mkco-input { width: 100%; min-height: 50px; padding: 0 18px; border: 1.5px solid var(--co-line) !important; border-radius: 999px !important; background: var(--co-bg) !important; color: var(--co-text) !important; font: inherit; font-size: 15.5px; box-shadow: none !important; transition: border-color .15s; }
textarea.mkco-input { border-radius: var(--co-r-in) !important; padding: 14px 18px; min-height: 96px; resize: vertical; }
select.mkco-input { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%) !important; background-position: calc(100% - 23px) 52%, calc(100% - 17px) 52% !important; background-size: 6px 6px !important; background-repeat: no-repeat !important; }
.mkco-input:focus { border-color: var(--co-a) !important; outline: none; }
.mkco-checks { display: grid; gap: 4px; margin-top: 20px; padding: 14px 18px; border: 1.5px solid var(--co-line); border-radius: var(--co-r); background: var(--co-surface); }
.mkco-check { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: 14px; line-height: 1.5; color: var(--co-muted); cursor: pointer; }
.mkco-check strong { color: var(--co-text); }
.mkco-check a { color: var(--co-a); }
.mkco-check input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid color-mix(in srgb, var(--co-text) 35%, transparent); border-radius: 6px; background: var(--co-bg); display: grid; place-items: center; cursor: pointer; }
.mkco-check input:checked { background: var(--co-a); border-color: var(--co-a); }
.mkco-check input:checked::after { content: ""; width: 5px; height: 10px; border: solid var(--co-at); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.mkco-error { margin-top: 14px !important; padding: 10px 14px; border-radius: var(--co-r-in); background: color-mix(in srgb, #e5484d 10%, var(--co-bg)); color: #c62a2f; font-size: 14px; }
.mkco-msg { margin-top: 10px !important; font-size: 14px; color: var(--co-a); }
.mkco-msg.is-err { color: #c62a2f; }
.is-busy { opacity: .7; pointer-events: none; }
.mkco-swap { text-align: center; margin-top: 16px !important; font-size: 14px; color: var(--co-muted); }
.mkco-swap.is-small { font-size: 13px; margin-top: 8px !important; }
.mkco-swap a { color: var(--co-muted); }
.mkco-notice { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 14px 18px; border-radius: var(--co-r); border: 1.5px solid color-mix(in srgb, var(--co-a) 30%, var(--co-line)); background: var(--co-soft); font-size: 14px; line-height: 1.5; }
.mkco-notice svg { flex: none; color: var(--co-a); margin-top: 1px; }
.mkco-notice.is-warn { border-color: color-mix(in srgb, var(--co-a2) 45%, var(--co-line)); background: color-mix(in srgb, var(--co-a2) 10%, var(--co-bg)); }
.mkco-notice.is-warn svg { color: color-mix(in srgb, var(--co-a2) 75%, var(--co-text)); }

/* ---------------- Drawer ---------------- */
.mkco-drawer-wrap { position: fixed; inset: 0; z-index: 99990; }
.mkco-drawer-bg { position: absolute; inset: 0; background: color-mix(in srgb, var(--co-c) 35%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; }
.mkco-drawer { position: absolute; top: 0; left: 0; bottom: 0; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--co-bg); border-right: 1.5px solid var(--co-line); box-shadow: 30px 0 60px -30px rgba(0, 0, 0, .35); transform: translateX(-102%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); outline: none; }
.mkco-drawer-wrap.is-open .mkco-drawer { transform: none; }
.mkco-drawer-wrap.is-open .mkco-drawer-bg { opacity: 1; }
.mkco-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--co-line); }
.mkco-drawer__head h2 { font-family: var(--co-head); font-weight: var(--co-weight); font-size: 17px; letter-spacing: .12em; text-transform: uppercase; }
.mkco-drawer__body { flex: 1; overflow-y: auto; padding: 6px 22px; }
.mkco-drawer__foot { padding: 18px 22px 22px; border-top: 1px solid var(--co-line); background: var(--co-surface); }
.mkco-drawer__foot:empty { display: none; }
.mkco-sub { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.mkco-sub b { font-family: var(--co-head); font-size: 26px; font-weight: var(--co-weight); letter-spacing: -0.02em; color: var(--co-a); font-variant-numeric: tabular-nums; }
.mkco-drawer__foot .mkco-btn { margin-top: 14px; }
.mkco-cart-empty { text-align: center; padding: 48px 0; color: var(--co-muted); }
.mkco-cart-empty .mkco-btn { margin-top: 14px; }

/* Cart / summary lines */
.mkco-lines { display: flex; flex-direction: column; }
.mkco-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--co-line); transition: opacity .2s; }
.mkco-line:last-child { border-bottom: 0; }
.mkco-line.is-busy { opacity: .45; }
.mkco-line.is-compact { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 12px 0; }
.mkco-line__img { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--co-surface); border: 1px solid var(--co-line); }
.mkco-line.is-compact .mkco-line__img { width: 48px; height: 48px; }
.mkco-line__img img { width: 100% !important; height: 100% !important; object-fit: contain; }
.mkco-line__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mkco-line__name { font-family: var(--co-head); font-weight: var(--co-weight); font-size: 15px; letter-spacing: -0.01em; line-height: 1.2; text-decoration: none; }
.mkco-line__body small { font-family: var(--co-label); font-size: 11.5px; color: var(--co-muted); letter-spacing: .04em; }
.mkco-line__end { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.mkco-line__end b { font-variant-numeric: tabular-nums; color: var(--co-a); font-size: 15px; }
.mkco-line__rm { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 0; background: none; color: var(--co-muted); cursor: pointer; }
.mkco-line__rm:hover { background: var(--co-surface); color: var(--co-text); }
.mkco-qty { display: inline-flex; align-items: center; align-self: flex-start; border: 1.5px solid var(--co-line); border-radius: 999px; background: var(--co-bg); }
.mkco-qty button { width: 32px; height: 30px; border: 0; background: none; color: var(--co-text); font-size: 16px; cursor: pointer; border-radius: 999px; }
.mkco-qty button:disabled { opacity: .35; cursor: default; }
.mkco-qty span { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; font-size: 14px; }

/* ---------------- Modal (frosted over the site) ---------------- */
.mkco-modal { position: fixed; inset: 0; z-index: 99995; }
.mkco-modal__bg { position: absolute; inset: 0; background: color-mix(in srgb, var(--co-bg) 50%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); opacity: 0; transition: opacity .22s; }
.mkco-modal.is-open .mkco-modal__bg { opacity: 1; }
.mkco-modal__scroll { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: clamp(14px, 4vh, 48px) clamp(12px, 3vw, 32px); display: flex; }
.mkco-modal__inner { position: relative; margin: auto; width: 100%; outline: none; opacity: 0; transform: translateY(10px) scale(.99); transition: opacity .22s, transform .22s; }
.mkco-modal.is-open .mkco-modal__inner { opacity: 1; transform: none; }
.mkco-modal__inner.is-auth { max-width: 520px; }
.mkco-modal__inner.is-auth.is-wide { max-width: 620px; }
.mkco-modal__inner.is-checkout { max-width: 1180px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .mkco-modal__bg { background: color-mix(in srgb, var(--co-bg) 92%, transparent); } }

/* Auth */
.mkco-auth.is-login { padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 40px); }
.mkco-auth.is-login:not(.mkco-card) { text-align: center; }
.mkco-auth__icon { display: flex; justify-content: center; color: var(--co-a); margin-bottom: 18px; }
.mkco-auth .mkco-btn.is-narrow { max-width: 380px; margin: 18px auto 0; display: flex; }
.mkco-auth.is-register .mkco-h2, .mkco-auth.is-register .mkco-lead, .mkco-auth.is-register .mkco-eyebrow { text-align: center; margin-left: auto !important; margin-right: auto !important; }
.mkco-auth.is-register .mkco-btn { margin-top: 20px; }
.mkco-auth.is-login .mkco-error { max-width: 380px; margin-left: auto; margin-right: auto; }

/* Done / waiting */
.mkco-done { text-align: center; display: flex; flex-direction: column; align-items: center; padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px); max-width: 680px; margin: 0 auto; }
.mkco-done.is-small { max-width: 520px; }
.mkco-done__icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 22px; color: var(--co-at); background: linear-gradient(180deg, color-mix(in srgb, var(--co-a) 66%, #fff), var(--co-a) 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 12px 30px -14px var(--co-a); }
.mkco-done__icon svg { width: 30px; height: 30px; }
.mkco-done__icon.is-wait svg { width: 30px; height: 30px; }
.mkco-done .mkco-rows { width: 100%; margin: 26px 0 24px; text-align: left; }
.mkco-spinner { width: 26px; height: 26px; margin-top: 22px; border: 3px solid var(--co-line); border-top-color: var(--co-a); border-radius: 50%; animation: mkco-spin .8s linear infinite; }
@keyframes mkco-spin { to { transform: rotate(360deg); } }

/* ---------------- Checkout ---------------- */
.mkco-co__top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.mkco-steps { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mkco-step { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 16px; border: 1.5px solid var(--co-line); border-radius: 999px; background: var(--co-bg); color: var(--co-muted); }
.mkco-step__n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--co-line); font-family: var(--co-label); font-size: 11.5px; font-weight: 600; }
.mkco-step__n svg { width: 13px; height: 13px; }
.mkco-step__l { font-family: var(--co-label); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkco-step.is-on { border-color: var(--co-a); color: var(--co-text); background: var(--co-soft); }
.mkco-step.is-on .mkco-step__n { background: var(--co-a); border-color: var(--co-a); color: var(--co-at); }
.mkco-step.is-done .mkco-step__n { border-color: color-mix(in srgb, var(--co-a) 60%, var(--co-line)); color: var(--co-a); }
.mkco-co__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 18px; align-items: start; }
.mkco-co__main { min-width: 0; }
.mkco-co__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--co-line); }
.mkco-co__end { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.mkco-co__solo { max-width: 720px; margin: 0 auto; }

/* Summary */
.mkco-summary { position: sticky; top: 12px; padding: 22px 24px; }
.mkco-summary__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--co-line); }
.mkco-summary .mkco-lines { border-bottom: 1px solid var(--co-line); }
.mkco-rows { display: grid; gap: 10px; padding: 14px 0; }
.mkco-rows > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.mkco-rows dt { font-family: var(--co-label); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--co-muted); }
.mkco-rows dd { text-align: right; font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.mkco-rows dd.is-accent { color: var(--co-a); }
.mkco-rows.is-mono dd { font-family: var(--co-label); font-weight: 500; font-size: 13.5px; }
.mkco-card.is-inset.mkco-rows { padding: 16px 20px; }
.mkco-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--co-line); }
.mkco-total b { font-family: var(--co-head); font-size: 30px; font-weight: var(--co-weight); letter-spacing: -0.02em; color: var(--co-a); font-variant-numeric: tabular-nums; }
.mkco-points { margin-top: 16px !important; display: grid; gap: 8px; }
.mkco-points li { position: relative; padding-left: 18px; font-size: 13.5px; color: var(--co-muted); }
.mkco-points li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--co-a); }

/* Payment methods */
.mkco-methods { display: grid; gap: 10px; margin-top: 22px; }
.mkco-method { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1.5px solid var(--co-line); border-radius: 999px; background: var(--co-bg); cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s; }
.mkco-method:hover { transform: scale(1.01); }
.mkco-method input { position: absolute; opacity: 0; pointer-events: none; }
.mkco-method b { display: block; font-family: var(--co-head); font-weight: var(--co-weight); font-size: 16px; letter-spacing: -0.01em; }
.mkco-method small { display: block; margin-top: 4px; font-family: var(--co-label); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--co-muted); }
.mkco-radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--co-text) 35%, transparent); display: grid; place-items: center; }
.mkco-method.is-on { border-color: var(--co-a); background: var(--co-soft); }
.mkco-method.is-on .mkco-radio { border-color: var(--co-a); }
.mkco-method.is-on .mkco-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--co-a); }
.mkco-pay { margin-top: 18px; }
.mkco-pay__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.mkco-pay.has-qr .mkco-pay__grid { grid-template-columns: minmax(0, 1fr) 180px; }
.mkco-pay .mkco-rows { padding-top: 4px; }
.mkco-pay .mkco-lbl { display: block; margin: 6px 0 8px; }
.mkco-addr { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 18px; border: 1.5px solid #0b0b0d; border-radius: 999px; background: #0b0b0d; }
.mkco-addr .mkco-btn, .mkco-addr .mkco-btn.is-ghost { flex: none; background: #ffffff !important; color: #0b0b0d !important; border-color: #ffffff !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.mkco-addr .mkco-btn.is-ok { background: var(--co-a) !important; border-color: var(--co-a) !important; color: #0b0b0d !important; }
.mkco-addr .mkco-btn:focus-visible { outline-color: #ffffff; }
.mkco-addr code { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: break-all; font-family: var(--co-label); font-size: 14px; color: color-mix(in srgb, var(--co-a) 85%, #fff); background: none; padding: 6px 0; letter-spacing: .02em; }
.mkco-btn.is-ok { color: var(--co-a) !important; border-color: var(--co-a); }
.mkco-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mkco-qr__img { width: 180px; height: 180px; padding: 12px; background: #fff; border-radius: var(--co-r); border: 1px solid var(--co-line); }
.mkco-qr__img svg, .mkco-qr__img img { width: 100%; height: 100%; display: block; object-fit: contain; }
.mkco-due { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--co-line); }
.mkco-due b { margin-left: auto; font-family: var(--co-head); font-size: 28px; font-weight: var(--co-weight); color: var(--co-a); font-variant-numeric: tabular-nums; }
.mkco-due .mkco-link { order: 3; width: 100%; justify-content: flex-end; padding: 0; }

/* Receipt */
.mkco-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin: 22px 0 16px; padding: 36px 20px; border: 1.5px dashed color-mix(in srgb, var(--co-text) 25%, transparent); border-radius: var(--co-r-lg); background: var(--co-surface); text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.mkco-drop:hover, .mkco-drop.is-over { border-color: var(--co-a); background: var(--co-soft); }
.mkco-drop__icon { color: var(--co-a); }
.mkco-drop b { font-family: var(--co-head); font-size: 17px; }
.mkco-drop small { font-family: var(--co-label); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--co-muted); }
.mkco-drop.has-file { border-style: solid; border-color: var(--co-a); }
.mkco-card.is-inset + .mkco-check { margin-top: 12px; }

/* ---------------- Account page ---------------- */
.mkco-acct { max-width: 1240px; margin: 0 auto; padding: clamp(20px, 3vw, 40px) clamp(16px, 4vw, 40px) clamp(48px, 6vw, 80px); }
.mkco-acct.is-guest { max-width: 640px; }
.mkco-crumbs { display: flex; gap: 10px; font-family: var(--co-label); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--co-muted); margin-bottom: 20px; }
.mkco-crumbs a { text-decoration: none; }
.mkco-acct__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.mkco-acct__side { position: sticky; top: 16px; padding: 20px; }
.mkco-acct__me { display: flex; gap: 12px; align-items: center; padding-bottom: 18px; margin-bottom: 14px; border-bottom: 1px solid var(--co-line); min-width: 0; }
.mkco-acct__me > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.mkco-acct__me strong { font-family: var(--co-head); font-size: 15px; text-transform: uppercase; }
.mkco-acct__me small { font-family: var(--co-label); font-size: 11.5px; color: var(--co-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkco-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--co-head); font-weight: var(--co-weight); color: var(--co-at); background: linear-gradient(180deg, color-mix(in srgb, var(--co-a) 66%, #fff), var(--co-a)); }
.mkco-acct__nav { display: flex; flex-direction: column; gap: 4px; }
.mkco-acct__tab { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 0; border-radius: 999px; background: none; color: var(--co-muted); font-family: var(--co-label); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-align: left; cursor: pointer; }
.mkco-acct__tab:hover { color: var(--co-text); background: var(--co-surface); }
.mkco-acct__tab.is-on { color: var(--co-text); background: var(--co-soft); box-shadow: inset 2px 0 0 var(--co-a); }
.mkco-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--co-a2); }
.mkco-acct__links { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--co-line); }
.mkco-acct__links a { font-family: var(--co-label); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--co-muted); text-decoration: none; }
.mkco-acct__links a:hover { color: var(--co-text); }
.mkco-acct__main { min-width: 0; }
.mkco-acct__panel > .mkco-h1 { margin-bottom: 18px; }
.mkco-acct__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.mkco-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.mkco-pill { min-height: 36px; padding: 0 16px; border: 1.5px solid var(--co-line); border-radius: 999px; background: var(--co-bg); color: var(--co-muted); font-family: var(--co-label); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.mkco-pill.is-on { background: var(--co-a); border-color: var(--co-a); color: var(--co-at); }
.mkco-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; border: 1.5px solid var(--co-line); border-radius: var(--co-r-lg); overflow: hidden; }
.mkco-stat { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.mkco-stat + .mkco-stat { border-left: 1px solid var(--co-line); }
.mkco-stat b { font-family: var(--co-head); font-size: 30px; font-weight: var(--co-weight); color: var(--co-a); line-height: 1; font-variant-numeric: tabular-nums; }
.mkco-stat span { font-family: var(--co-label); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--co-muted); }
.mkco-cartpanel .mkco-sub { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--co-line); }
.mkco-cartpanel .mkco-btn { margin-top: 10px; }
.mkco-cartpanel .mkco-cart-empty { padding: 18px 0; }
.mkco-alert { padding: 16px 20px; margin-bottom: 16px; border-radius: var(--co-r); border: 1.5px solid color-mix(in srgb, var(--co-a2) 45%, var(--co-line)); background: color-mix(in srgb, var(--co-a2) 10%, var(--co-bg)); }
.mkco-alert strong { font-family: var(--co-head); text-transform: uppercase; }
.mkco-alert p { color: var(--co-muted); margin-top: 6px; font-size: 14.5px; line-height: 1.55; }
.mkco-empty { text-align: center; color: var(--co-muted); padding: 40px 20px; }
.mkco-empty .mkco-btn { margin-top: 14px; }
.mkco-orders { display: grid; gap: 12px; }
.mkco-order { padding: 18px 20px; border: 1.5px solid var(--co-line); border-radius: var(--co-r-lg); background: var(--co-bg); }
.mkco-panel .mkco-order { border: 0; padding: 0; }
.mkco-order__top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mkco-order__id { display: flex; flex-direction: column; }
.mkco-order__id b { font-family: var(--co-head); font-size: 17px; }
.mkco-order__id small { font-family: var(--co-label); font-size: 11px; color: var(--co-muted); letter-spacing: .06em; }
.mkco-order__total { margin-left: auto; font-family: var(--co-head); font-weight: var(--co-weight); font-size: 18px; color: var(--co-a); font-variant-numeric: tabular-nums; }
.mkco-order__items { margin-top: 10px !important; font-size: 14px; color: var(--co-muted); }
.mkco-order__hint { margin-top: 6px !important; font-size: 13.5px; }
.mkco-order__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.mkco-order__actions .mkco-link { margin-left: auto; }
.mkco-order__more { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--co-line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.mkco-upload { cursor: pointer; }
.mkco-status { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--co-line); font-family: var(--co-label); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.mkco-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--co-muted); }
.mkco-status.is-warn i { background: var(--co-a2); }
.mkco-status.is-review i { background: var(--co-a); }
.mkco-status.is-ok i, .mkco-status.is-done i { background: #2fa66a; }
.mkco-mini { width: 100%; border-collapse: collapse; font-size: 14px; }
.mkco-mini td { padding: 6px 0; border-bottom: 1px solid var(--co-line); }
.mkco-mini td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.mkco-mini tr.is-total td { font-weight: 700; border-bottom: 0; }
.mkco-kv { display: grid; gap: 10px; }
.mkco-kv dt { font-family: var(--co-label); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--co-muted); }
.mkco-kv dd { font-size: 14px; overflow-wrap: anywhere; }
.mkco-kv a { color: var(--co-a); }
.mkco-doclist { display: grid; }
.mkco-doclist li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--co-line); }
.mkco-doclist li:last-child { border-bottom: 0; }
.mkco-doclist small { color: var(--co-muted); font-family: var(--co-label); font-size: 11.5px; margin-left: 6px; }
.mkco-form .mkco-fields { margin-top: 14px; }
.mkco-form > .mkco-btn { margin-top: 18px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 960px) {
	.mkco-co__grid { grid-template-columns: minmax(0, 1fr); }
	.mkco-summary { position: static; order: -1; }
	.mkco-acct__grid { grid-template-columns: minmax(0, 1fr); }
	.mkco-acct__side { position: static; }
	.mkco-acct__nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
	.mkco-acct__tab { flex: none; }
	.mkco-acct__tab.is-on { box-shadow: inset 0 -2px 0 var(--co-a); }
}
@media (max-width: 700px) {
	.mkco-steps { gap: 6px; }
	.mkco-step { padding: 6px; justify-content: center; }
	.mkco-step__l { display: none; }
	.mkco-step.is-on .mkco-step__l { display: block; }
	.mkco-step.is-on { flex: 2; }
	.mkco-steps { display: flex; }
	.mkco-step { flex: 1; }
	.mkco-pay.has-qr .mkco-pay__grid { grid-template-columns: minmax(0, 1fr); }
	.mkco-qr { order: -1; }
	.mkco-order__more { grid-template-columns: minmax(0, 1fr); }
	.mkco-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mkco-stat { padding: 14px; }
	.mkco-stat b { font-size: 24px; }
}
@media (max-width: 560px) {
	.mkco-fields { grid-template-columns: minmax(0, 1fr); }
	.mkco-field.is-half { grid-column: 1 / -1; }
	.mkco-method { border-radius: var(--co-r); }
	.mkco-co__nav { flex-direction: column-reverse; align-items: stretch; }
	.mkco-co__nav .mkco-btn { width: 100%; }
	.mkco-co__end { flex-direction: column-reverse; align-items: stretch; margin-left: 0; }
	.mkco-co__end .mkco-link, .mkco-co__nav > .mkco-link { justify-content: center; }
	.mkco-addr { border-radius: var(--co-r); flex-wrap: wrap; padding: 10px 12px; }
	.mkco-addr .mkco-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .mkco-scope *, .mkco-scope *::before { transition: none !important; animation: none !important; } }

/* ---------------- Site gate (age check + sign in before entering) ---------------- */
html:has(body.mkco-gate-body) { margin-top: 0 !important; }
body.mkco-gate-body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--mk-bg, #ffffff); color: var(--mk-text, #0b0b0d);
	background-image: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--mk-accent, #2f7df6) 10%, transparent), transparent 70%); }
.mkco-gate { box-sizing: border-box; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: clamp(24px, 6vh, 64px) 16px; }
.mkco-gate__brand { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.mkco-gate__brand .mkco-brand { margin: 0; font-size: 18px; }
.mkco-gate__logo img { display: block; max-height: 56px; width: auto; max-width: 220px; }
.mkco-gate__logo a { display: inline-block; }
.mkco-gate__tag { font-family: var(--co-label); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--co-muted); }
.mkco-gate__card { width: 100%; max-width: 520px; }
.mkco-gate__card:has(.mkco-auth.is-register) { max-width: 760px; }
.mkco-gate__card > [data-mkco-authinline] > .mkco-auth, .mkco-gate__card > .mkco-card { width: 100%; box-sizing: border-box; }
.mkco-gate__card .mkco-auth.is-login:not(.mkco-card) { background: var(--co-bg); border: 1px solid var(--co-line); border-radius: var(--co-r-lg); box-shadow: 0 30px 80px -40px rgba(0,0,0,.35); }
.mkco-gate__age { text-align: center; padding: clamp(28px, 5vw, 44px) clamp(20px, 4vw, 40px); }
.mkco-gate__age .mkco-lead { margin-left: auto !important; margin-right: auto !important; }
.mkco-gate__btns { display: flex; gap: 10px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.mkco-gate__btns .mkco-btn { flex: 1 1 180px; max-width: 240px; }
.mkco-gate__legal { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 0; font-size: 12.5px; }
.mkco-gate__legal a { color: var(--co-muted); text-decoration: none; border-bottom: 1px solid var(--co-line); padding-bottom: 1px; }
.mkco-gate__legal a:hover { color: var(--co-text); }
.mkco-gate__legal:empty { display: none; }
.mkco-gate .is-center { text-align: center; }
@media (max-width: 520px) {
	.mkco-gate { justify-content: flex-start; padding-top: 40px; }
	.mkco-gate__btns { flex-direction: column; }
	.mkco-gate__btns .mkco-btn { max-width: none; flex: 0 0 auto; width: 100%; }
}
.mkco-gate__card .mkco-auth .mkco-brand { display: none; }

/* Checkout: saved details shown for confirmation */
.mkco-sum { margin-top: 20px; padding: clamp(16px, 2.4vw, 24px); }
.mkco-sum[hidden], [data-details-fields][hidden] { display: none !important; }
.mkco-sum__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mkco-sum__head .mkco-eyebrow { margin: 0 !important; }
.mkco-sum dl { margin: 0; display: grid; gap: 0; }
.mkco-sum__row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 14px; padding: 11px 0; border-top: 1px solid var(--co-line); font-size: 14px; line-height: 1.5; }
.mkco-sum__row:first-child { border-top: 0; }
.mkco-sum__row dt { color: var(--co-muted); font-family: var(--co-label); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding-top: 2px; }
.mkco-sum__row dd { margin: 0; color: var(--co-text); font-weight: 500; word-break: break-word; }
@media (max-width: 520px) { .mkco-sum__row { grid-template-columns: 1fr; gap: 2px; } }