/*! SZKLIWO Konfigurator 1.0.0 — style widżetu (ładowane wyłącznie do Shadow DOM; nie dotykają strony-hosta).
 *  Motyw ustawiasz zmiennymi CSS na elemencie osadzenia: --szk-font, --szk-surface, --szk-surface-2, --szk-text,
 *  --szk-muted, --szk-accent, --szk-accent-ink, --szk-line, --szk-line-strong, --szk-stage, --szk-radius, --szk-err, --szk-ok, --szk-warn. */
:host {
  all: initial; display: block; container-type: inline-size; contain: layout style;
  --_f: var(--szk-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --_bg: var(--szk-surface, #FFFFFF); --_bg2: var(--szk-surface-2, #F2F4F9);
  --_tx: var(--szk-text, #0F1635); --_mu: var(--szk-muted, #4A5170);
  --_ac: var(--szk-accent, #2340D6); --_ai: var(--szk-accent-ink, #FFFFFF);
  --_ln: var(--szk-line, #D5D9E6); --_ls: var(--szk-line-strong, #7F87A3);
  --_st: var(--szk-stage, radial-gradient(120% 90% at 50% 30%, #F7F8FB 0%, #E1E6F0 70%, #D5DBE8 100%));
  --_r: var(--szk-radius, 14px);
  --_err: var(--szk-err, #B3261E); --_ok: var(--szk-ok, #1D6B3A); --_wn: var(--szk-warn, #7A4A00);
  font-family: var(--_f); color: var(--_tx); font-size: 15px; line-height: 1.45;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
svg { display: block; flex: none; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--_ac); outline-offset: 2px; }
.szk-sr, .szk-file, .szk-opt input {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0;
}
/* typografię ustawiamy też na pierwszym elemencie w cieniu: reguły strony z !important na hoście (np. * { font-family }) mogłyby inaczej zostać odziedziczone */
.szk {
  display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); background: var(--_bg);
  font-family: var(--_f); color: var(--_tx); font-size: 15px; line-height: 1.45; font-weight: 400; font-style: normal;
  letter-spacing: normal; word-spacing: normal; text-transform: none; text-align: left; text-indent: 0; white-space: normal; direction: ltr;
}
.szk-col { min-width: 0; }
@container (min-width: 760px) {
  .szk { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 32px; }
}

/* scena */
.szk-stage { position: relative; aspect-ratio: 5 / 4; border-radius: var(--_r); background: var(--_st); background-color: var(--szk-stage-solid, #E4E8F1); overflow: hidden; isolation: isolate; }
.szk-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.szk-rot { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; border-radius: var(--_r); }
.szk-rot:active { cursor: grabbing; }
.szk-rot:focus-visible { outline-offset: -4px; }
.szk-badge, .szk-hint { position: absolute; margin: 0; pointer-events: none; font-size: 12px; line-height: 1.3; }
.szk-badge { left: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; background: var(--_bg); color: var(--_tx); font-weight: 600; max-width: calc(100% - 24px); }
.szk-hint { left: 12px; right: 12px; bottom: 10px; text-align: center; color: var(--_mu); }
@media (pointer: coarse) { .szk-hint { font-size: 11.5px; } }
@container (max-width: 560px) { .szk-hint-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

.szk-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 10px; }
.szk-views, .szk-tools { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.szk-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 13px;
  border: 1px solid var(--_ln); border-radius: 999px; background: var(--_bg); color: var(--_tx); font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.szk-chip svg { width: 18px; height: 18px; }
.szk-chip:hover:not(:disabled) { border-color: var(--_ls); }
.szk-chip[aria-pressed="true"] { background: var(--_ac); border-color: var(--_ac); color: var(--_ai); }
.szk-chip:disabled { opacity: .45; cursor: default; }
@container (max-width: 400px) { .szk-chip { padding: 0 10px; font-size: 13.5px; } .szk-ico span { font-size: 13px; } }

/* pole nadruku */
.szk-area { margin-top: 18px; }
.szk-area-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 8px; }
.szk-area-head > :first-child, .szk-sum-head > :first-child { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--_tx); }
.szk-dim { margin: 0; font-size: 12.5px; color: var(--_mu); font-variant-numeric: tabular-nums; }
.szk-pa { position: relative; width: 100%; border-radius: 8px; overflow: hidden; touch-action: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.szk-pa-c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.szk-layer { position: absolute; cursor: move; touch-action: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 0 2px rgba(15,22,53,.35); min-width: 14px; min-height: 14px; }
.szk-layer.sel { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--_ac); }
.szk-layer.warn { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #C98A00; }
.szk-layer.bad { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--_err); }
.szk-layer:focus-visible { outline: 3px dashed #FFFFFF; outline-offset: 5px; }
.szk-hd { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; border: 3px solid var(--_ac); display: none; touch-action: none; }
.szk-layer.sel .szk-hd { display: block; }
.szk-hd-s { right: -8px; bottom: -8px; cursor: nwse-resize; }
.szk-hd-r { right: -8px; top: -8px; cursor: alias; border-radius: 4px; }
@media (pointer: coarse) { .szk-hd { width: 24px; height: 24px; } .szk-hd-s { right: -12px; bottom: -12px; } .szk-hd-r { right: -12px; top: -12px; } }
.szk-scale { position: relative; height: 18px; margin-top: 4px; font-size: 11.5px; color: var(--_mu); }
.szk-scale span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
@container (max-width: 380px) { .szk-scale span:nth-child(2) { font-size: 0; } .szk-scale span:nth-child(2)::after { content: "Środek"; font-size: 11.5px; } }
.szk-kb { margin: 6px 0 0; font-size: 12.5px; color: var(--_mu); }
.szk-msgs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.szk-msgs li { padding: 8px 11px; border-radius: 9px; font-size: 13.5px; line-height: 1.4; }
.szk-msgs .err { background: #FCE8E6; color: #8A1C14; }
.szk-msgs .warn { background: #FFF2D2; color: #5F3B00; }
.szk-msgs .ok { background: #E3F3E8; color: #17502C; }

/* zakładki */
.szk-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--_ln); }
.szk-tabs [role="tab"] {
  position: relative; min-height: 46px; padding: 8px 4px; border: 0; background: none; color: var(--_mu); font-size: 15px; font-weight: 600;
  border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.szk-tabs [aria-selected="true"] { color: var(--_ac); border-bottom-color: var(--_ac); }
.szk-tabs [role="tab"]:focus-visible { outline-offset: -3px; }
.szk-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0; }
.szk-dot.on { opacity: 1; }
.szk-panel { padding: 18px 0 4px; }
.szk-panel:focus-visible { outline-offset: 4px; border-radius: 4px; }
fieldset { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
legend { padding: 0; margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--_tx); }
.szk-val { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--_mu); font-size: 13.5px; }
.szk-opt { position: relative; display: block; cursor: pointer; min-width: 0; }

/* szkliwa */
.szk-sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px 6px; }
.szk-sw .szk-opt { display: grid; justify-items: center; gap: 5px; padding: 4px 0; text-align: center; }
.szk-swatch { width: 42px; height: 42px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -6px 10px rgba(0,0,0,.18), inset 0 4px 8px rgba(255,255,255,.25), 0 0 0 1px rgba(0,0,0,.18); }
.szk-swatch[style*="--c2"] { background: radial-gradient(circle at 35% 30%, var(--c) 0 38%, var(--c2) 90%); }
.szk-sw-l { font-size: 12.5px; line-height: 1.2; color: var(--_tx); }
.szk-opt input:checked + .szk-swatch { box-shadow: 0 0 0 3px var(--_bg), 0 0 0 5px var(--_ac); }
.szk-opt input:focus-visible + .szk-swatch { outline: 3px solid var(--_ac); outline-offset: 5px; }

/* przełączniki segmentowe */
.szk-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
@container (min-width: 520px) { .szk-two { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.szk-seg { display: flex; border: 1px solid var(--_ls); border-radius: 11px; padding: 3px; gap: 3px; }
.szk-seg .szk-opt { flex: 1 1 0; }
.szk-seg .szk-opt > span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 40px; height: 100%; padding: 5px 6px; border-radius: 8px; font-size: 14px; font-weight: 600; text-align: center; line-height: 1.2; }
.szk-seg small { font-size: 11.5px; font-weight: 500; }
.szk-seg input:checked + span { background: var(--_ac); color: var(--_ai); }
.szk-seg input:focus-visible + span { outline: 3px solid var(--_ac); outline-offset: 2px; }
.szk-fonts .szk-opt > span { font-size: 17px; font-weight: 400; }

/* pojemności */
.szk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.szk-card { display: grid; gap: 2px; height: 100%; padding: 11px 12px; border: 1px solid var(--_ln); border-radius: 12px; font-size: 12.5px; color: var(--_mu); }
.szk-card b { font-size: 16px; color: var(--_tx); }
.szk-mono { font-variant-numeric: tabular-nums; }
.szk-cards input:checked + .szk-card { border-color: var(--_ac); box-shadow: inset 0 0 0 1px var(--_ac); background: var(--_bg2); }
.szk-cards input:focus-visible + .szk-card { outline: 3px solid var(--_ac); outline-offset: 2px; }
@container (max-width: 440px) {
  .szk-cards { grid-template-columns: minmax(0, 1fr); }
  .szk-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; }
  .szk-card > :nth-child(2) { grid-column: 2 / 4; }
  .szk-card > :nth-child(3) { grid-column: 1 / 3; }
}

/* listy opcji z ceną */
.szk-list { display: grid; gap: 6px; }
.szk-list .szk-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--_ln); border-radius: 12px; }
.szk-list .szk-opt::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--_ls); background: var(--_bg); }
.szk-list .szk-opt:has(input[type=checkbox])::before { border-radius: 5px; }
.szk-list .szk-opt:has(input:checked) { border-color: var(--_ac); background: var(--_bg2); }
.szk-list .szk-opt:has(input:checked)::before { border-color: var(--_ac); background: radial-gradient(circle, var(--_ac) 0 4.5px, transparent 5px); }
.szk-list .szk-opt:has(input[type=checkbox]:checked)::before { background: var(--_ac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.szk-list .szk-opt:has(input:focus-visible) { outline: 3px solid var(--_ac); outline-offset: 2px; }
.szk-li { display: grid; gap: 1px; min-width: 0; font-size: 13px; color: var(--_mu); }
.szk-li b { font-size: 14.5px; color: var(--_tx); font-weight: 600; }
.szk-plus { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--_tx); }

/* pola */
.szk-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 10px; margin-bottom: 12px; }
.szk-field label { font-size: 14px; font-weight: 600; }
.szk-opt-l { font-weight: 400; color: var(--_mu); }
.szk-field input { grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--_ls); border-radius: 10px; background: var(--_bg); font-size: 16px; }
.szk-field input:focus-visible { outline-offset: 0; border-color: var(--_ac); }
.szk-cnt { grid-row: 1; grid-column: 2; font-size: 12.5px; color: var(--_mu); font-variant-numeric: tabular-nums; }
.szk-note { margin: 0 0 14px; font-size: 13px; color: var(--_mu); }
.szk-note:empty { margin: 0; }
.szk-range { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 10px; margin-bottom: 10px; }
.szk-range label { font-size: 14px; font-weight: 600; }
.szk-range output { font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--_tx); }
.szk-range input { grid-column: 1 / -1; width: 100%; height: 30px; accent-color: var(--_ac); background: transparent; }
.szk-place { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 4px; }
.szk-place-l { font-size: 13px; color: var(--_mu); margin-right: 2px; }
.szk-place .szk-chip { min-height: 36px; font-size: 13.5px; }

/* grafika */
.szk-drop { position: relative; display: grid; gap: 4px; justify-items: center; padding: 22px 16px; margin-bottom: 10px; border: 2px dashed var(--_ls); border-radius: var(--_r); text-align: center; cursor: pointer; background: var(--_bg2); }
.szk-drop:hover, .szk-drop.over { border-color: var(--_ac); }
.szk-drop:focus-within { outline: 3px solid var(--_ac); outline-offset: 2px; }
.szk-drop-b { font-size: 15px; font-weight: 700; color: var(--_ac); }
.szk-drop-s { font-size: 13px; color: var(--_mu); }
.szk-file-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 16px; }
.szk-thumb { width: 56px; height: 56px; border-radius: 10px; border: 1px solid var(--_ln); background: repeating-conic-gradient(#E6E8EF 0 25%, #FFFFFF 0 50%) 0 0 / 12px 12px; }
.szk-fname { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.szk-file-row .szk-note { margin: 0; }
.szk-check { display: flex; gap: 10px; align-items: center; margin: -6px 0 14px; font-size: 14px; cursor: pointer; }
.szk-check input { width: 20px; height: 20px; accent-color: var(--_ac); flex: none; }
.szk-privacy { margin: 14px 0 6px; padding: 10px 12px; border-radius: 10px; background: var(--_bg2); font-size: 13px; color: var(--_tx); }

/* przyciski */
.szk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 15px; font-weight: 600; text-align: center; line-height: 1.2; transition: background .15s, border-color .15s, transform .15s; }
.szk-btn svg { width: 19px; height: 19px; }
.szk-btn-1 { width: 100%; min-height: 54px; margin-top: 14px; border: 0; background: var(--_ac); color: var(--_ai); font-size: 16.5px; font-weight: 700; }
.szk-btn-1:hover { filter: brightness(1.08); }
.szk-btn-1:active { transform: translateY(1px); }
.szk-btn-2 { border: 1px solid var(--_ls); background: var(--_bg); color: var(--_tx); }
.szk-btn-2:hover:not(:disabled) { border-color: var(--_ac); }
.szk-btn:disabled { opacity: .45; cursor: default; }
.szk-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.szk-row > .szk-btn { flex: 1 1 auto; }
.szk-row3 > .szk-btn { padding: 0 12px; font-size: 14px; }

/* ilość */
.szk-qty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 4px; }
.szk-qty label { font-size: 14px; font-weight: 600; }
.szk-step { display: flex; align-items: center; gap: 6px; }
.szk-step .szk-chip { width: 44px; min-height: 44px; padding: 0; font-size: 20px; }
.szk-step input { width: 64px; min-height: 44px; text-align: center; border: 1px solid var(--_ls); border-radius: 10px; background: var(--_bg); font-size: 16px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.szk-step input::-webkit-inner-spin-button, .szk-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#szk-bulk { margin-top: 8px; }

/* podsumowanie */
.szk-sum { margin-top: 10px; padding: 16px; border-radius: var(--_r); background: var(--_bg2); }
.szk-sum-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 8px; }
.szk-ex { padding: 3px 8px; border-radius: 6px; background: #FFE9AE; color: #4A3200; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.szk-lines { margin: 0; display: grid; gap: 4px; }
.szk-lines div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.szk-lines dt { color: var(--_mu); min-width: 0; }
.szk-lines dt small { font-size: 12px; }
.szk-lines dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.szk-disc dt, .szk-disc dd { color: var(--_ok); font-weight: 600; }
.szk-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 10px 0 2px; padding-top: 10px; border-top: 1px solid var(--_ln); font-weight: 600; }
.szk-total b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.szk-sum .szk-note { margin: 0; font-size: 12.5px; }
.szk-share { margin-top: 12px; }
.szk-share label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.szk-share-row { display: flex; gap: 6px; }
.szk-share-row input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 10px; border: 1px solid var(--_ls); border-radius: 10px; background: var(--_bg); font-size: 13px; }
.szk-status { min-height: 1.45em; margin: 10px 0 0; font-size: 13.5px; }
.szk-status[data-kind="err"] { color: var(--_err); font-weight: 600; }
.szk-status[data-kind="ok"] { color: var(--_ok); }
.szk-status[data-kind="warn"] { color: var(--_wn); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media (forced-colors: active) { .szk-layer.sel, .szk-layer { outline: 2px solid CanvasText; } .szk-chip[aria-pressed="true"], .szk-seg input:checked + span { outline: 2px solid Highlight; } }