/* Mama i Mia – kreator odzieży 1.0. Wartości jak w kreatorze kubka i na stronie sklepu (motyw Astra):
   czcionka motywu (Cambay), tekst #4A3B34, nagłówki #3B2F2A, brąz #6B4331, obramowania #D9CBB9, tło #FBF6EE.
   Przyciski: pełne zaokrąglenie (999 px) jak „Kontynuuj zakupy”, min. 44–48 px wysokości. Bez cieni (box-shadow). */
.mmko-stage, .mmko-panel {
	--mmko-ink: #3B2F2A; --mmko-text: #4A3B34; --mmko-muted: #7D6A5C; --mmko-accent: #6B4331; --mmko-accent-hover: #55341F;
	--mmko-line: #D9CBB9; --mmko-input: #B9A793; --mmko-bg: #FBF6EE; --mmko-surface: #FFFDF9; --mmko-soft: #F3E9DB;
	--mmko-ok: #2F6B4F; --mmko-warn: #8A5208; --mmko-err: #B3261E;
}
.mmko-stage [hidden], .mmko-panel [hidden] { display: none !important; }
.mmko-layout { display: flow-root; }
.mmko-panel *, .mmko-stage * { box-sizing: border-box; }

/* ---------- podgląd (w miejscu galerii zdjęć) ---------- */
.mmko-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; align-self: start; width: 100%; justify-items: center; }
.mmko-view { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 320px; }
.mmko-canvas-box { background: radial-gradient(ellipse at 50% 40%, #FFFDF9 0%, var(--mmko-bg) 75%); border: 1px solid var(--mmko-line); border-radius: 18px; overflow: hidden; width: 100%; display: grid; justify-items: center; }
#mmko-canvas { display: block; width: min(100%, calc(100vh - var(--mmko-sticky-max, 0px) - 190px)); min-width: 260px; height: auto; aspect-ratio: 1 / 1; touch-action: none; outline: none; }
#mmko-canvas:focus-visible { outline: 2px solid var(--mmko-accent); outline-offset: -2px; }
.mmko-cap { text-align: center; }
.mmko-stage .mmko-pill, .mmko-panel .mmko-pill {
	min-height: 44px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--mmko-accent); background: transparent; color: var(--mmko-accent);
	font: inherit; font-weight: 700; font-size: 15px; line-height: 1.15; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: normal; transition: background .2s, color .2s;
}
.mmko-stage .mmko-pill:hover, .mmko-panel .mmko-pill:hover { background: var(--mmko-soft); color: var(--mmko-accent); }
.mmko-stage .mmko-pill[aria-pressed="true"], .mmko-panel .mmko-pill[aria-pressed="true"],
.mmko-panel .mmko-pill[aria-checked="true"] { background: var(--mmko-accent); color: #fff; border-color: var(--mmko-accent); }
.mmko-panel .mmko-pill[disabled] { opacity: .4; cursor: not-allowed; }
.mmko-pill small { display: block; font-weight: 400; font-size: 12px; opacity: .85; margin-top: 2px; }
.mmko-small, .mmko-note { font-size: 14px; line-height: 1.45; color: var(--mmko-muted); margin: 0; }
.mmko-note { display: flex; justify-content: space-between; gap: 10px; }
.mmko-stage button:focus-visible, .mmko-panel button:focus-visible { outline: 2px solid var(--mmko-accent); outline-offset: 2px; }
@media (min-width: 922px) {
	.mmko-stage { position: sticky; top: calc(var(--mmko-sticky-top, 0px) + 20px); transition: top .25s ease; }
}

/* ---------- panel ---------- */
.mmko-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; margin-bottom: 18px; color: var(--mmko-text); }
.mmko-steps-tabs, .mmko-bar { display: none; }
.mmko-card { min-width: 0; background: var(--mmko-surface); border: 1px solid var(--mmko-line); border-radius: 18px; padding: 16px 18px; }
.mmko-h { margin: 0 0 10px; font-size: 18px; line-height: 1.2; font-weight: 600; color: var(--mmko-ink); display: flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: normal; }
.mmko-num { width: 28px; height: 28px; border-radius: 50%; background: var(--mmko-accent); color: #fff; display: inline-grid; place-items: center; font-size: 15px; font-weight: 700; flex: none; }
.mmko-num.mmko-okn { background: var(--mmko-ok); }
.mmko-sub { margin: -4px 0 12px; color: var(--mmko-muted); font-size: 14px; line-height: 1.4; }
.mmko-chip-ok { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--mmko-ok); background: #E7F1EB; border-radius: 999px; padding: 1px 10px; white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.mmko-count { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--mmko-muted); background: var(--mmko-soft); border-radius: 999px; padding: 1px 10px; white-space: nowrap; }
.mmko-field { display: grid; gap: 8px; margin-bottom: 14px; }
.mmko-label { font-size: 16px; font-weight: 600; color: var(--mmko-ink); line-height: 1.3; display: flex; align-items: center; gap: 8px; }
.mmko-color-name { font-weight: 400; color: var(--mmko-accent); }
.mmko-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mmko-row .mmko-pill { flex: 1; }
.mmko-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
#mmko-pfront, #mmko-pback { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* miejsce nadruku: po dwie pastylki w rzędzie (przód w dwóch rzędach) */
.mmko-side-pick { display: flex; gap: 8px; margin: 0 0 10px; }
.mmko-side-pick .mmko-pill { flex: 1; }
.mmko-panel textarea {
	width: 100%; min-height: 76px; resize: vertical; font: inherit; font-size: 16px; line-height: 1.45; color: var(--mmko-ink);
	background: #fff; border: 1px solid var(--mmko-input); border-radius: 14px; padding: 10px 14px; box-shadow: none;
}
.mmko-panel textarea:focus { border-color: var(--mmko-accent); outline: 1px solid var(--mmko-accent); }
.mmko-panel input[type="range"] { width: 100%; accent-color: var(--mmko-accent); background: transparent; border: 0; padding: 0; }
.mmko-range { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; color: var(--mmko-muted); }
.mmko-range .mmko-big { font-size: 22px; }

/* komunikaty */
.mmko-msg { font-size: 14px; line-height: 1.45; border-radius: 10px; padding: 9px 12px; margin: 8px 0 0; background: var(--mmko-soft); color: var(--mmko-text); }
.mmko-msg.mmko-ok { background: #E7F1EB; color: var(--mmko-ok); }
.mmko-msg.mmko-warn { background: #FBEFD9; color: var(--mmko-warn); }
.mmko-msg.mmko-err { background: #F8E1DF; color: var(--mmko-err); }

/* ---------- krok 1: kolory odzieży, rozmiary ---------- */
.mmko-colors { display: flex; flex-wrap: wrap; gap: 12px; }
.mmko-panel .mmko-col { display: grid; justify-items: center; gap: 4px; min-width: 64px; min-height: 44px; padding: 4px; background: none; border: 0; font: inherit; font-size: 13px; color: var(--mmko-ink); cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: normal; }
.mmko-dot { width: 44px; height: 44px; border-radius: 50%; display: block; border: 1px solid var(--mmko-line); }
.mmko-panel .mmko-col[aria-checked="true"] .mmko-dot { outline: 3px solid var(--mmko-accent); outline-offset: 2px; }
.mmko-panel .mmko-col[aria-checked="true"] { font-weight: 700; }
.mmko-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.mmko-size { display: grid; justify-items: center; gap: 6px; padding: 8px 6px; border: 1px solid var(--mmko-line); border-radius: 14px; background: #fff; }
.mmko-size.mmko-on { border-color: var(--mmko-accent); background: var(--mmko-soft); outline: 1px solid var(--mmko-accent); }
.mmko-size-l { font-weight: 700; font-size: 16px; color: var(--mmko-ink); line-height: 1; }
.mmko-qty { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--mmko-line); border-radius: 999px; background: #fff; padding: 2px; }
.mmko-qty button { position: relative; width: 32px; height: 32px; min-width: 0; min-height: 0; padding: 0; line-height: 1; border-radius: 50%; border: 0; background: var(--mmko-soft); color: var(--mmko-accent); font-size: 18px; font-weight: 700; cursor: pointer; box-shadow: none; }
.mmko-qty button::after { content: ""; position: absolute; left: -6px; right: -6px; top: -6px; bottom: -6px; } /* pole dotyku nadal ≥ 44 px */
.mmko-qty button[disabled] { opacity: .35; cursor: default; }
.mmko-qty output { min-width: 26px; text-align: center; font-weight: 700; font-size: 15px; color: var(--mmko-ink); }

/* ---------- kafelki napisów i zdjęć: kwadraty obok siebie ---------- */
.mmko-thumbs { list-style: none; margin: 0 0 12px; padding: 6px 6px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mmko-thumbs:empty { display: none; }
.mmko-th, .mmko-slot { position: relative; aspect-ratio: 1; border-radius: 16px; min-width: 0; margin: 0; }
.mmko-th { border: 1px solid var(--mmko-line); background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.mmko-th.mmko-tx { background: #fff; display: grid; place-items: center; }
.mmko-th.mmko-sel { border-color: var(--mmko-accent); outline: 3px solid var(--mmko-accent); }
.mmko-th .mmko-pick { position: absolute; inset: 0; border: 0; background: transparent; border-radius: 16px; z-index: 1; padding: 0; min-height: 0; cursor: pointer; box-shadow: none; }
.mmko-th img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; border-radius: 10px; pointer-events: none; }
.mmko-smp { position: relative; z-index: 1; font-size: 19px; line-height: 1.1; text-align: center; overflow: hidden; max-width: 84%; max-height: 68%; pointer-events: none; overflow-wrap: anywhere; }
.mmko-no { position: absolute; left: 6px; bottom: 6px; z-index: 2; min-width: 22px; height: 22px; border-radius: 999px; background: rgba(59, 47, 42, .78); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; padding: 0 6px; pointer-events: none; }
.mmko-panel .mmko-rm {
	position: absolute; z-index: 3; top: -7px; right: -7px; width: 24px; height: 24px; min-height: 0; border-radius: 50%; border: 1px solid var(--mmko-line); background: #fff; color: var(--mmko-muted);
	font-size: 16px; line-height: 1; display: grid; place-items: center; padding: 0; box-shadow: none; cursor: pointer; text-transform: none;
}
.mmko-rm::after { content: ""; position: absolute; inset: -10px; }
.mmko-panel .mmko-rm:hover, .mmko-panel .mmko-rm:focus-visible { background: #F8E1DF; color: #B3262E; border-color: #E3B5B1; }
.mmko-slot { border: 2px dashed var(--mmko-line); display: grid; place-items: center; }
.mmko-slot.mmko-add { border-color: var(--mmko-accent); color: var(--mmko-accent); font-weight: 700; background: var(--mmko-surface); }
.mmko-slot.mmko-add .mmko-pick { position: absolute; inset: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; border-radius: 14px; display: grid; place-items: center; align-content: center; padding: 0; min-height: 0; box-shadow: none; }
.mmko-slot.mmko-add:hover { background: var(--mmko-soft); }
.mmko-slot.mmko-add b { font-size: 28px; line-height: 1; font-weight: 400; }
.mmko-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* czcionki i kolory napisu */
.mmko-fonts { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; }
.mmko-panel .mmko-font {
	flex: none; display: grid; gap: 2px; text-align: left; min-width: 150px; min-height: 44px; cursor: pointer;
	border: 1px solid var(--mmko-line); background: var(--mmko-bg); color: var(--mmko-ink); border-radius: 14px; padding: 8px 14px; font: inherit; text-transform: none; letter-spacing: normal; box-shadow: none;
}
.mmko-panel .mmko-font:hover { border-color: var(--mmko-accent); background: var(--mmko-bg); color: var(--mmko-ink); }
.mmko-panel .mmko-font[aria-pressed="true"] { border-color: var(--mmko-accent); outline: 1px solid var(--mmko-accent); background: var(--mmko-soft); }
.mmko-font-sample { font-size: 22px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mmko-font-name { font-size: 13px; line-height: 1.3; color: var(--mmko-muted); }
.mmko-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.mmko-panel .mmko-swatch { width: 40px; height: 40px; min-height: 0; border-radius: 50%; padding: 0; cursor: pointer; border: 1px solid var(--mmko-line); box-shadow: none; }
.mmko-panel .mmko-swatch[aria-pressed="true"] { outline: 3px solid var(--mmko-accent); outline-offset: 2px; }
.mmko-cust { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--mmko-line); background: conic-gradient(#e53935, #fdd835, #43a047, #00acc1, #1e88e5, #8e24aa, #e53935); display: grid; place-items: center; cursor: pointer; }
.mmko-cust.mmko-on { outline: 3px solid var(--mmko-accent); outline-offset: 2px; }
.mmko-cust i { font-style: normal; color: #fff; font-weight: 700; font-size: 22px; line-height: 1; pointer-events: none; }
.mmko-cust input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.mmko-cust:focus-within { outline: 2px solid var(--mmko-accent); outline-offset: 3px; }
.mmko-quality-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.mmko-quality { font-size: 14px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.mmko-quality.mmko-ok { background: #E7F1EB; color: var(--mmko-ok); } .mmko-quality.mmko-warn { background: #FBEFD9; color: var(--mmko-warn); } .mmko-quality.mmko-err { background: #F8E1DF; color: var(--mmko-err); }

/* ---------- warstwy ---------- */
.mmko-layers { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--mmko-line); display: grid; gap: 6px; }
.mmko-layerlist { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.mmko-layer { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; gap: 6px; align-items: center; border: 1px solid var(--mmko-line); border-radius: 14px; background: #fff; padding: 2px; }
.mmko-layer.mmko-sel { border-color: var(--mmko-accent); outline: 2px solid var(--mmko-accent); background: var(--mmko-soft); }
.mmko-panel .mmko-layer-main { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 2px 6px; border: 0; background: transparent; color: var(--mmko-ink); font: inherit; text-align: left; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: normal; min-width: 0; }
.mmko-layer-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--mmko-line); background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 10px 10px; display: grid; place-items: center; overflow: hidden; font-size: 18px; line-height: 1; }
.mmko-layer-ic img { width: 100%; height: 100%; object-fit: contain; }
.mmko-layer-t { display: grid; min-width: 0; line-height: 1.25; }
.mmko-layer-t strong { font-size: 15px; font-weight: 700; }
.mmko-layer-t small { font-size: 13px; color: var(--mmko-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mmko-panel .mmko-layer-mv { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--mmko-line); background: var(--mmko-surface); color: var(--mmko-accent); font-size: 15px; line-height: 1; cursor: pointer; box-shadow: none; display: grid; place-items: center; }
.mmko-panel .mmko-layer-mv:hover { background: var(--mmko-soft); color: var(--mmko-accent); }
.mmko-panel .mmko-layer-mv[disabled] { opacity: .3; cursor: default; }

/* ---------- krok 5: podsumowanie w segmentach, zgoda ---------- */
.mmko-sumlist { font-size: 15px; margin: 6px 0 10px; }
.mmko-sg { display: grid; grid-template-columns: 7.6em minmax(0, 1fr) auto; gap: 4px 14px; padding: 12px 0; border-top: 1px dashed var(--mmko-line); }
.mmko-sg:first-child { border-top: 0; padding-top: 4px; } .mmko-sg:last-child { padding-bottom: 4px; }
.mmko-sg dt { color: var(--mmko-muted); font-weight: 400; margin: 0; }
.mmko-sg dd { margin: 0; overflow-wrap: anywhere; color: var(--mmko-ink); }
.mmko-sg a { color: var(--mmko-accent); font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mmko-qtyrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 12px; }
.mmko-price { font-size: 22px; font-weight: 700; color: var(--mmko-ink); white-space: nowrap; margin-left: auto; }
.mmko-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; cursor: pointer; color: var(--mmko-ink); margin: 8px 0; }
.mmko-check input { margin-top: 3px; width: 22px; height: 22px; accent-color: var(--mmko-accent); flex: none; }
.mmko-panel .mmko-cta { width: 100%; min-height: 48px; border: 0; border-radius: 999px; background: var(--mmko-accent); color: #fff; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; padding: 12px 24px; }
.mmko-panel .mmko-cta:hover { background: var(--mmko-accent-hover); color: #fff; }
.mmko-panel .mmko-cta[disabled] { opacity: .5; cursor: not-allowed; }
.mmko-cta-desktop { margin-top: 10px; }

/* ---------- WooCommerce: nasz kreator zastępuje standardowy przycisk i ilość ---------- */
.mmko-aktywny form.cart .quantity, .mmko-aktywny form.cart .single_add_to_cart_button { display: none !important; }
.mmko-aktywny form.cart { display: block; }
.mmko-cart-thumb { border-radius: 10px; height: auto; }

/* ---------- komputer ---------- */
@media (min-width: 922px) {
	.mmko-card { display: block; }
}

/* ---------- telefon i tablet: podgląd przyklejony u góry, jeden krok naraz, stały pasek na dole ---------- */
@media (max-width: 921px) {
	.mmko-stage { position: sticky; top: var(--mmko-sticky-top, 0px); z-index: 5; background: var(--mmko-bg); padding: 6px 0 8px; gap: 4px; transition: top .25s ease; }
	.mmko-canvas-box { border: 0; border-radius: 0; background: transparent; }
	#mmko-canvas { width: min(100%, 24vh, 230px); min-width: 150px; transition: width .25s; }
	.mmko-kb #mmko-canvas { width: 110px; min-width: 110px; }
	.mmko-view { max-width: 260px; }
	.mmko-stage .mmko-pill { min-height: 40px; font-size: 14px; }
	.mmko-cap { font-size: 12px; }
	.mmko-kb .mmko-cap { display: none; }
	.mmko-steps-tabs { display: flex; gap: 4px; }
	.mmko-panel .mmko-tabbtn { flex: 1; min-width: 0; min-height: 40px; border-radius: 999px; border: 1px solid var(--mmko-line); background: #fff; color: var(--mmko-ink); font: inherit; font-weight: 700; font-size: 12px; padding: 4px 1px; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.mmko-panel .mmko-tabbtn.mmko-done { background: #EEF6F1; border-color: #BBD5C6; color: var(--mmko-ok); }
	.mmko-panel .mmko-tabbtn[aria-selected="true"] { background: var(--mmko-accent); border-color: var(--mmko-accent); color: #fff; }
	.mmko-card { display: none; border-radius: 16px; padding: 14px; }
	.mmko-card.mmko-active { display: block; }
	.mmko-chip-ok { display: none; }
	.mmko-sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mmko-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mmko-bar { display: flex; align-items: center; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990; background: #fff; border-top: 1px solid var(--mmko-line); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
	.mmko-bar .mmko-price { font-size: 18px; margin: 0; }
	.mmko-bar .mmko-cta { flex: 1; width: auto; min-height: 46px; padding: 8px 14px; }
	.mmko-kbopen .mmko-bar { display: none; }
	.mmko-aktywny { padding-bottom: 76px; }
	.mmko-cta-desktop { display: none; }
	.mmko-price { margin-left: 0; }
}
/* Na stronie kreatora: bez kategorii nad tytułem i pod przyciskiem (zostaje ścieżka okruszków i SKU). */
.mmko-aktywny .single-product-category, .mmko-aktywny .product_meta .posted_in { display: none; }
@media (prefers-reduced-motion: reduce) { .mmko-panel *, .mmko-stage * { transition: none !important; } }