/* rc_configurator — wygenerowane z makiety (build_module_front.py). Nie edytować ręcznie. */
.rcc {
  --paper: #ffffff;
  --paper-2: #f7f8fa;
  --paper-3: #eef0f4;
  --line: #e5e8ed;
  --line-2: #cfd5de;
  --ink: #0a0a0a;
  --mute: #5a6470;
  --night: #0c1421;
  --orange: #ea7723;
  --orange-ink: #b4520f;
  --lime: #d4ff3a;
  --lime-ink: #0a0a0a;
  --ok: #0e8a5f;
  --danger: #c23434;
  --danger-bg: #fdf3f3;
  --note-bg: #fff4e6;
  --sash: #eceef1;
  --sash-edge: #b7bec8;
  --bead: #d9dde3;
  --glass: #cfe6fb;
  --measure: #0c1421;
  --scrim: rgba(7, 12, 21, .62);
  --shadow-1: 0 1px 2px rgba(12, 20, 33, .06);
  --shadow-2: 0 1px 2px rgba(12, 20, 33, .06), 0 10px 28px rgba(12, 20, 33, .08);
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 9px;
  --t-fast: 150ms;
  --t-med: 220ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}
.rcc * { box-sizing: border-box; }
.rcc { background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
@media (max-width: 920px) {
.rcc { font-size: 16px; }
 
}
.rcc .rcc-wrap { max-width: 1240px; margin: 0 auto; padding-inline: 16px; padding-block: 16px 132px; }
.rcc button, .rcc input { font: inherit; color: inherit; }
.rcc button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.rcc :focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 2px; border-radius: 6px; }
.rcc .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
.rcc *, .rcc *::before, .rcc *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
 
}
.rcc .mono { font-family: var(--f-mono); letter-spacing: .05em; text-transform: uppercase; font-size: 11.5px; font-weight: 600; }
.rcc .num { font-variant-numeric: tabular-nums; }
.rcc .ico { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.125em; }
.rcc .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-areas: "aside steps"; gap: 32px; align-items: start; }
.rcc .preview { grid-area: aside; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); display: grid; gap: 14px; }
.rcc .steps-col { grid-area: steps; display: grid; gap: 12px; min-width: 0; }
@media (max-width: 920px) {
.rcc .grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "steps" "set"; gap: 16px; }
.rcc .preview { display: contents; }
.rcc .stage { grid-area: stage; }
.rcc .setcard { grid-area: set; }


}
.rcc .stage { position: relative; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; display: grid; gap: 10px; }
.rcc .stage canvas { width: 100%; height: auto; aspect-ratio: 600 / 731; display: block; border-radius: var(--r-md); background: var(--paper-3); transition: opacity var(--t-med) var(--ease-out); }
.rcc .stage canvas.loading { opacity: .35; }
@media (max-width: 920px) {
.rcc .stage canvas { aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 62%; }
 
}
.rcc .stage-cap { display: flex; justify-content: space-between; align-items: center; gap: 6px 12px; flex-wrap: wrap; color: var(--mute); font-size: 13px; padding-inline: 4px; }
.rcc .stage-cap strong { color: var(--ink); font-weight: 600; }
.rcc .viz-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--paper-3); border-radius: 999px; justify-self: start; }
.rcc .viz-tabs button { border: 0; background: none; border-radius: 999px; min-height: 44px; padding: 0 14px; font-weight: 600; font-size: 13.5px; color: var(--mute); transition: background var(--t-fast), color var(--t-fast); }
.rcc .viz-tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-1); }
.rcc .pan { display: grid; gap: 8px; }
.rcc .pan[hidden] { display: none; }
.rcc #rcc-lv { width: 100%; aspect-ratio: 720 / 852; display: block; border-radius: var(--r-md); touch-action: pan-y; background: var(--paper-3); }
@media (max-width: 920px) {
.rcc #rcc-lv { aspect-ratio: auto; height: 380px; }
 
}
.rcc .try { margin: 0; display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--mute); padding: 2px 4px; }
.rcc .try .ico { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--lime); color: var(--lime-ink); flex: none; }
.rcc .try b { color: var(--ink); }
.rcc #rcc-lv:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 2px; }
.rcc .lvpick { display: inline-flex; gap: 6px; justify-self: start; flex-wrap: wrap; }
.rcc .lvpick button { border: 1.5px solid var(--line-2); background: var(--paper); border-radius: 999px; min-height: 36px; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--mute); }
.rcc .lvpick button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.rcc .rails { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px 10px; align-items: center; font-size: 12.5px; color: var(--mute); padding-inline: 4px; }
@media (max-width: 460px) {
.rcc .rails { grid-template-columns: auto minmax(0, 1fr); }
 
}
.rcc .rails input { width: 100%; accent-color: var(--ink); min-height: 28px; }
.rcc .viz-note { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--mute); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 12px; }
.rcc .viz-note .ico { width: 16px; height: 16px; margin-top: 1px; color: var(--orange-ink); }
.rcc .viz-note a { color: var(--ink); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.rcc .chip { display: inline-flex; align-items: center; gap: 6px; }
.rcc .chip i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.rcc .setcard { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; display: grid; gap: 10px; background: var(--paper); }
.rcc .setcard .mono { color: var(--mute); }
.rcc .setline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; font-size: 14px; align-items: baseline; }
.rcc .setline .m { color: var(--mute); }
.rcc .setline .set-v { justify-self: end; text-align: right; padding-block: 2px; min-height: 28px; min-width: 0; }
.rcc .setline .set-v img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.rcc .set-hr { border: 0; border-top: 1px solid var(--line); margin: 2px 0; }
.rcc .total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px dashed var(--line-2); padding-top: 12px; margin-top: 2px; }
.rcc .total .v { font-size: 28px; font-weight: 800; letter-spacing: -.01em; border-radius: 8px; padding-inline: 4px; margin-inline: -4px; }
.rcc .total small { color: var(--mute); font-size: 13px; }
.rcc .flash { animation: flash 700ms var(--ease-out); }
@keyframes flash { 0% { background: var(--lime); color: var(--lime-ink); } 100% { background: transparent; } }
.rcc .progress { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--mute); }
.rcc .progress .track { flex: 1; height: 4px; background: var(--paper-3); border-radius: 4px; overflow: hidden; }
.rcc .progress .fill { height: 100%; background: var(--ink); border-radius: 4px; transition: width var(--t-med) var(--ease-out); }
.rcc .steps { display: grid; gap: 10px; }
.rcc .rcc-step { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); transition: box-shadow var(--t-med), border-color var(--t-med); }
.rcc .rcc-step.open { border-color: var(--ink); box-shadow: var(--shadow-2); }
.rcc .rcc-step.locked .step-h { opacity: .5; cursor: not-allowed; }
.rcc .step-h { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; min-height: 64px; width: 100%; background: none; border: 0; text-align: left; border-radius: var(--r-lg); }
.rcc .step-h:not([disabled]):hover .step-n { border-color: var(--ink); }
.rcc .step-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); border: 1.5px solid var(--line-2); font-family: var(--f-mono); font-weight: 700; font-size: 13px; transition: background var(--t-fast), border-color var(--t-fast); }
.rcc .step-n .ico { width: 16px; height: 16px; }
.rcc .rcc-step.open .step-n { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rcc .rcc-step.done .step-n { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.rcc .step-t { min-width: 0; display: grid; gap: 2px; }
.rcc .step-t .mono { color: var(--mute); }
.rcc .step-t .val { font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; }
.rcc .step-t .val span { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.rcc .step-t .val img, .rcc .step-t .val i { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.rcc .step-t .sub { font-size: 13.5px; color: var(--mute); }
.rcc .chg { font-size: 13.5px; color: var(--orange-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px; }
.rcc .rcc-step.open .chg, .rcc .rcc-step.locked .chg { display: none; }
.rcc .step-b { padding: 2px 16px 18px; display: grid; gap: 16px; animation: enter var(--t-med) var(--ease-out); }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rcc .hint { font-size: 14px; color: var(--mute); margin: 0; }
.rcc .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rcc .pick { position: relative; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.rcc .pick:active { transform: scale(.98); }
.rcc .pick[aria-pressed="true"] { border-color: var(--ink) !important; box-shadow: 0 0 0 3px var(--lime); }
.rcc .pick[aria-pressed="true"]::after { content: ""; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4ff3a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: 0 0 0 2px var(--paper); }
.rcc .tiles { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rcc .tile { border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--paper-2); padding: 8px 8px 12px; display: grid; gap: 4px; text-align: left; }
.rcc .tile:hover { border-color: var(--line-2); }
.rcc .tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 0; border-radius: 8px; max-width: 100%; margin-bottom: 6px; }
.rcc .tile b { font-weight: 650; padding-inline: 4px; }
.rcc .tile small { color: var(--mute); padding-inline: 4px; font-size: 13.5px; }
.rcc .sw { display: grid; gap: 10px 8px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.rcc .swb { border: 1.5px solid transparent; border-radius: var(--r-md); background: none; padding: 4px 4px 6px; display: grid; gap: 6px; text-align: center; align-content: start; }
.rcc .swb:hover { border-color: var(--line-2); }
.rcc .swb .swi { position: relative; display: block; }
.rcc .swb img { width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; max-width: 100%; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.rcc .swb .dot { position: absolute; left: 6px; bottom: 6px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.rcc .swb .lbl { font-size: 12.5px; line-height: 1.25; color: var(--mute); }
.rcc .swb .lbl b { display: block; color: var(--ink); font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.rcc .swb[aria-pressed="true"]::after { top: 10px; left: 10px; right: auto; }
.rcc .swc { position: relative; min-width: 0; }
.rcc .swc > .swb { width: 100%; }
.rcc .swz { position: absolute; top: 9px; right: 9px; width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 1px 3px rgba(12, 20, 33, .25); transition: transform var(--t-fast), background var(--t-fast); }
.rcc .swz::before { content: ""; position: absolute; inset: -7px; }
.rcc .swz:hover { background: #fff; transform: scale(1.06); }
.rcc .swz .ico { width: 17px; height: 17px; }
.rcc .group { display: grid; gap: 10px; }
.rcc .group-h { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--mute); flex-wrap: wrap; }
.rcc .pill { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; background: var(--paper); border: 1px solid var(--line-2); color: var(--mute); white-space: nowrap; }
.rcc .pill.hot { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.rcc .pill.warn { background: var(--note-bg); color: var(--orange-ink); border-color: transparent; }
.rcc .wins { display: grid; gap: 10px; }
.rcc .win { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; display: grid; gap: 10px; background: var(--paper-2); }
.rcc .win-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 32px; }
.rcc .win-top .mono { color: var(--ink); }
.rcc .win-id { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; min-width: 0; }
.rcc .win-spec { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mute); min-width: 0; }
.rcc .win-spec img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.rcc .spec-lnk { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 0; min-height: 44px; font: inherit; color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; cursor: pointer; }
.rcc .spec-lnk:hover { color: var(--ink); text-decoration-style: solid; }
.rcc .win-f { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .7fr); gap: 8px; align-items: start; }
.rcc .fld { display: grid; gap: 4px; min-width: 0; }
.rcc .fld label { font-size: 13px; color: var(--mute); font-weight: 500; margin: 0; text-align: left; } /* classic: label { margin-bottom: .5rem; text-align: right } */
.rcc .fld .in { display: flex; align-items: center; min-height: 48px; border: 1.5px solid #7d8797;  border-radius: var(--r-sm); background: var(--paper); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.rcc .fld .in input { width: 100%; min-width: 0; border: 0; background: none; padding: 10px 4px 10px 12px; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.rcc .fld .in input:focus { outline: none; }
.rcc .fld .in:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent); }
.rcc .fld .in em { font-style: normal; color: var(--mute); font-size: 13.5px; padding-right: 12px; }
@media (max-width: 560px) {
.rcc .win-f { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 64px; gap: 6px; }
.rcc .fld .in input { font-size: 16px; padding: 10px 2px 10px 10px; }
.rcc .fld .in em { font-size: 12.5px; padding-right: 8px; }
.rcc .fld.qty .in em { display: none; }
.rcc .fld.qty .in input { text-align: center; padding-inline: 4px; }


}
.rcc .fld.err .in { border-color: var(--danger); background: var(--danger-bg); }
.rcc .fld .e { font-size: 12.5px; color: var(--danger); display: flex; gap: 5px; align-items: flex-start; line-height: 1.35; }
.rcc .fld .e .ico { margin-top: 1px; }
/* Etykiety różnej długości („Szerokość A” vs „Wysokość”, „Łańcuszek z lewej/prawej”, powiększony tekst systemowy) łamią się
   na różną liczbę linii — subgrid daje wszystkim polom rzędu wspólne wiersze: etykieta / pole / błąd, więc pola stoją w jednej linii. */
@supports (grid-template-rows: subgrid) {
  .rcc .win-f { grid-template-rows: auto auto auto; row-gap: 0; }
  .rcc .win-f > .fld { grid-row: span 3; grid-template-rows: subgrid; row-gap: 4px; }
  .rcc .win-f > .fld > label { align-self: end; }
}
.rcc .rm { border: 0; background: none; color: var(--mute); font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; min-height: 44px; padding: 0 6px; margin-right: -6px; border-radius: 8px; }
.rcc .rm:hover { color: var(--danger); }
.rcc .extra { display: grid; gap: 8px; }
.rcc .extra:empty { display: none; }
.rcc .split { font-size: 14px; border-radius: var(--r-sm); padding: 10px 12px; display: grid; gap: 6px; background: var(--note-bg); }
.rcc .split label { display: flex; gap: 10px; align-items: center; font-weight: 600; min-height: 32px; cursor: pointer; }
.rcc .split input { width: 20px; height: 20px; accent-color: var(--ink); }
.rcc .split .why { color: var(--mute); }
.rcc .line-price { font-size: 14px; color: var(--mute); }
.rcc .line-price b { color: var(--ink); }
.rcc .add-win { border: 1.5px dashed var(--line-2); border-radius: var(--r-md); background: none; min-height: 52px; padding: 12px; font-weight: 650; display: inline-flex; gap: 8px; align-items: center; justify-content: center; transition: border-color var(--t-fast), background var(--t-fast); }
.rcc .add-win:hover { border-color: var(--ink); background: var(--paper-2); }
.rcc .howto-d { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper-2); }
.rcc .howto-d > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 14px; cursor: pointer; font-size: 15px; }
.rcc .howto-d > summary::-webkit-details-marker { display: none; }
.rcc .howto-d > summary .ico { width: 18px; height: 18px; flex: none; color: var(--orange-ink); }
.rcc .howto-d > summary small { margin-left: auto; color: var(--mute); font-size: 12.5px; white-space: nowrap; }
.rcc .howto-d > summary small::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--t-fast); }
.rcc .howto-d[open] > summary small::after { transform: translateY(1px) rotate(-135deg); }
.rcc .howto-d > .howto { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md); }
.rcc .howto { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 16px; align-items: center; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; }
@media (max-width: 640px) {
.rcc .howto { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.rcc .howto svg { max-width: 220px; justify-self: center; }
.rcc .video-btn { display: flex; width: 100%; border-radius: var(--r-md); padding: 8px 12px; }


}
.rcc .howto svg { width: 100%; height: auto; display: block; }
.rcc .howto ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.rcc .howto .mono { color: var(--mute); }
.rcc .m-sash { fill: var(--sash); stroke: var(--sash-edge); stroke-width: 1.2; }
.rcc .m-bead { fill: var(--bead); stroke: var(--sash-edge); stroke-width: .8; }
.rcc .m-glass { fill: var(--glass); }
.rcc .m-hl { fill: none; stroke: var(--orange); stroke-width: 2.4; opacity: 0; animation: m-hl 7s infinite; }
.rcc .m-arrow { stroke: var(--measure); stroke-width: 2; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rcc .m-arrow.w { animation: m-draw-w 7s infinite; }
.rcc .m-arrow.h { animation: m-draw-h 7s infinite; }
.rcc .m-head { fill: var(--measure); opacity: 0; }
.rcc .m-head.w, .rcc .m-lbl.w, .rcc .m-lbl-bg.w { animation: m-show-w 7s infinite; }
.rcc .m-head.h, .rcc .m-lbl.h, .rcc .m-lbl-bg.h { animation: m-show-h 7s infinite; }
.rcc .m-lbl { font: 700 10.5px var(--f-mono); fill: var(--measure); letter-spacing: .03em; opacity: 0; }
.rcc .m-lbl-bg { fill: var(--paper); opacity: 0; }
@keyframes m-hl { 0%, 4% { opacity: 0 } 10%, 80% { opacity: 1 } 90%, 100% { opacity: 0 } }
@keyframes m-draw-w { 0%, 12% { stroke-dashoffset: 1 } 28%, 86% { stroke-dashoffset: 0 } 94%, 100% { stroke-dashoffset: 1 } }
@keyframes m-draw-h { 0%, 36% { stroke-dashoffset: 1 } 52%, 86% { stroke-dashoffset: 0 } 94%, 100% { stroke-dashoffset: 1 } }
@keyframes m-show-w { 0%, 26% { opacity: 0 } 30%, 86% { opacity: 1 } 94%, 100% { opacity: 0 } }
@keyframes m-show-h { 0%, 50% { opacity: 0 } 54%, 86% { opacity: 1 } 94%, 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) {
.rcc .m-hl, .rcc .m-head, .rcc .m-lbl, .rcc .m-lbl-bg { opacity: 1 !important; }
.rcc .m-arrow { stroke-dashoffset: 0 !important; }


}
.rcc .video-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; min-height: 44px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--paper); border: 1.5px solid var(--line-2); color: var(--ink); font-weight: 650; font-size: 14px; text-decoration: none; transition: border-color var(--t-fast), transform var(--t-fast); }
.rcc .video-btn:hover { border-color: var(--ink); }
.rcc .video-btn:active { transform: scale(.98); }
.rcc .video-btn .ico { width: 28px; height: 28px; color: #e02424; }
.rcc .video-btn small { color: var(--mute); font-weight: 500; }
.rcc .recheck { border-radius: var(--r-sm); padding: 12px 14px; background: var(--note-bg); display: grid; gap: 10px; font-size: 14px; }
.rcc .recheck b { color: var(--orange-ink); }
.rcc .colls { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) {
.rcc .colls { grid-template-columns: minmax(0, 1fr); }
 
}
.rcc .coll { border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--paper-2); padding: 14px; display: grid; gap: 10px; text-align: left; align-content: start; overflow: hidden; isolation: isolate; }
.rcc .coll-bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; opacity: .15; pointer-events: none; border-radius: inherit; }
.rcc .coll[aria-pressed="true"]::after { z-index: 1; }
.rcc .coll:hover { border-color: var(--line-2); }
.rcc .coll-top { display: flex; gap: 12px; align-items: center; padding-right: 26px; }
.rcc .coll-top img { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; flex: none; }
.rcc .coll-top b { line-height: 1.25; font-size: 16px; }
.rcc .coll-top small { display: block; color: var(--mute); font-size: 13px; line-height: 1.3; margin-top: 2px; }
.rcc .coll .tags { display: flex; gap: 5px; flex-wrap: wrap; }
.rcc .coll .price { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.rcc .coll .price .v { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.rcc .coll .price small { color: var(--mute); font-size: 13px; }
.rcc .cta { border: 0; border-radius: var(--r-md); background: var(--ink); color: var(--paper); font-weight: 700; min-height: 50px; padding: 12px 20px; display: inline-flex; gap: 10px; align-items: center; justify-content: center; transition: transform var(--t-fast), opacity var(--t-fast), background var(--t-fast); }
.rcc .cta:active { transform: scale(.98); }
.rcc .cta.lime { background: var(--lime); color: var(--lime-ink); }
.rcc .cta[aria-busy="true"] { cursor: progress; opacity: .85; }
.rcc .cta:disabled, .rcc .cta.lime:disabled { background: var(--paper-3); color: var(--mute); cursor: not-allowed; transform: none; }
.rcc .spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rcc .ghost { border: 1.5px solid var(--line-2); border-radius: var(--r-md); background: var(--paper); font-weight: 600; min-height: 48px; padding: 10px 16px; display: inline-flex; gap: 8px; align-items: center; transition: border-color var(--t-fast); }
.rcc .ghost:hover { border-color: var(--ink); }
.rcc .linkbtn { border: 0; background: none; padding: 8px 2px; font-weight: 600; color: var(--orange-ink); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; gap: 6px; align-items: center; min-height: 44px; }
.rcc .summary { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rcc .summary th { text-align: left; font-family: var(--f-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); font-weight: 600; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.rcc .summary td { padding: 10px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rcc .summary td.r, .rcc .summary th.r { text-align: right; white-space: nowrap; }
.rcc .summary td.ed { width: 48px; padding: 2px 0 2px 6px; vertical-align: middle; }
.rcc .edit-win { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); cursor: pointer; touch-action: manipulation; transition: background var(--t-fast), border-color var(--t-fast); }
.rcc .edit-win:hover { background: var(--paper-2); border-color: var(--ink); }
.rcc .edit-win:active { transform: scale(.96); }
.rcc .edit-win .ico { width: 18px; height: 18px; }
.rcc .summary td:first-child, .rcc .total .v { white-space: nowrap; }
@media (max-width: 460px) {
.rcc .summary th, .rcc .summary td { padding-inline: 3px; }
.rcc .summary td { font-size: 14px; }
 
}
.rcc .win.hl { animation: winhl 1.8s var(--ease-out); }
@keyframes winhl { 0%, 35% { box-shadow: 0 0 0 3px var(--lime), 0 0 0 5px var(--ink); } 100% { box-shadow: 0 0 0 0 transparent; } }
.rcc .spec { display: flex; flex-wrap: wrap; gap: 6px; }
.rcc .done-box { border-radius: var(--r-md); background: var(--paper-2); border: 1px solid var(--line); padding: 16px; display: grid; gap: 12px; }
.rcc .done-box .ok { display: flex; gap: 10px; align-items: center; font-size: 17px; font-weight: 700; }
.rcc .done-box .ok .ico { width: 26px; height: 26px; color: var(--ok); }
.rcc .bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(12, 20, 33, .1); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); display: none; }
.rcc .bar-in { display: flex; gap: 12px; align-items: center; justify-content: space-between; max-width: 640px; margin: 0 auto; }
.rcc .bar .meta { display: grid; gap: 1px; min-width: 0; }
.rcc .bar .lbl { font-size: 12.5px; color: var(--mute); white-space: nowrap; }
.rcc .bar .v { font-size: 20px; font-weight: 800; white-space: nowrap; }
.rcc .bar .cta { flex: none; max-width: 60%; }
.rcc .bar .cta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 920px) {
.rcc .bar { display: block; }
.rcc .bar.off { display: none; }
 
}
.rcc .toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 25; background: var(--night); color: #f1f4f8; border-radius: var(--r-md); padding: 8px 8px 8px 16px; display: flex; gap: 12px; align-items: center; font-size: 14px; box-shadow: var(--shadow-2); max-width: calc(100% - 32px); animation: enter var(--t-med) var(--ease-out); }
@media (min-width: 921px) {
.rcc .toast { bottom: 24px; }
 
}
.rcc .toast[hidden] { display: none; }
.rcc .toast button { border: 0; background: var(--lime); color: var(--lime-ink); font-weight: 700; border-radius: 8px; min-height: 40px; padding: 0 14px; }
.rcc .lb[hidden] { display: none; }
.rcc .lb { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; padding: 16px; z-index: 1100;  }
.rcc .lb-in { background: var(--paper); border-radius: var(--r-lg); padding: 14px; max-width: 420px; width: 100%; display: grid; gap: 12px; animation: enter var(--t-med) var(--ease-out); }
.rcc .lb-in img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); max-width: 100%; }
.rcc .lb-media { position: relative; touch-action: pan-y; }
.rcc .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .94); color: var(--ink); box-shadow: 0 2px 8px rgba(12, 20, 33, .25); }
.rcc .lb-nav:active { transform: translateY(-50%) scale(.95); }
.rcc .lb-nav.prev { left: 8px; }
.rcc .lb-nav.next { right: 8px; }
.rcc .lb-nav .ico { width: 20px; height: 20px; }
.rcc .lb-nav.prev .ico { transform: scaleX(-1); }
.rcc .lb-n { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.rcc .lb-in .row { flex-direction: column; align-items: stretch; gap: 12px; }
.rcc .lb-in .row .cta { width: 100%; }
.rcc .lb-in.vd-in { max-width: 960px; padding: 10px; gap: 10px; }
.rcc .lb-in.vz-in { max-width: 520px; max-height: calc(100dvh - 32px); overflow: auto; padding: 10px; gap: 10px; }
.rcc .vz-in .stage { border: 0; padding: 0; background: none; }
.rcc .vz-in #rcc-lv { height: auto; aspect-ratio: 720 / 852; max-height: calc(100dvh - 250px); }
.rcc .vz-in #rcc-viz { aspect-ratio: 600 / 731; max-height: calc(100dvh - 250px); object-fit: contain; }
.rcc .showviz { justify-self: start; background: var(--night); border-color: var(--night); color: #fff; }
.rcc .showviz:hover { background: #1c2a40; border-color: #1c2a40; }
.rcc .showviz .ico { color: var(--lime); }
@media (min-width: 921px) {
.rcc .showviz { display: none; }
 
}
.rcc .helpbtn { justify-self: start; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--ink); font-weight: 650; font-size: 14.5px; text-decoration: underline; text-underline-offset: 3px; }
.rcc .helpbtn .ico { width: 22px; height: 22px; color: var(--orange-ink); }
.rcc .lb-in.mh-in { max-width: 560px; max-height: calc(100dvh - 32px); overflow: auto; gap: 14px; }
.rcc .mh-t { font-size: 18px; font-weight: 800; }
.rcc .mh-opt { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: start; border-top: 1px solid var(--line); padding-top: 14px; }
.rcc .mh-opt img { width: 104px; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 0; border-radius: 8px; max-width: 100%; }
.rcc .mh-opt b { font-size: 16px; }
.rcc .mh-opt small { color: var(--mute); font-size: 13.5px; }
.rcc .mh-opt ul { margin: 6px 0 8px; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; line-height: 1.45; }
.rcc .mh-opt .ghost { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.rcc .mh-note { margin: 0; font-size: 13.5px; color: var(--mute); }
.rcc .fld.is-preset .in input { color: var(--mute); font-weight: 500; }
.rcc .preset { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: start; background: var(--note-bg); border-radius: var(--r-sm); padding: 10px 12px; font-size: 14px; line-height: 1.45; }
.rcc .preset > .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--orange-ink); }
.rcc .preset b { color: var(--orange-ink); }
.rcc .preset .ghost { grid-column: 2; justify-self: start; min-height: 44px; padding: 8px 14px; font-size: 14px; }
@media (max-width: 460px) {
.rcc .mh-opt { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
.rcc .mh-opt img { width: 84px; }
.rcc .mh-opt ul { padding-left: 16px; font-size: 13.5px; }
 
}
.rcc .vd-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-md); overflow: hidden; }
.rcc .vd-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }





.rcc { display: block; margin-block: 8px 24px; }
.rcc .rcc-wrap { max-width: none; padding: 0; }
/* karta produktu RC bez galerii (product.tpl przy $rcc_active): konfigurator na całą szerokość,
   układ z makiety — podgląd przyklejony po lewej, kroki po prawej; do 920 px jedna kolumna */
.rcc [hidden] { display: none !important; }
/* kolizje z Bootstrapem / motywem RC (sprawdzone na test.rollcenter.pl 06.10) */
.rcc .row { margin-left: 0; margin-right: 0; }
.rcc .toast { opacity: 1; max-width: calc(100% - 32px); flex-basis: auto; background-clip: border-box; border: 0; font-size: 14px; background-color: var(--night); }
.rcc .progress { height: auto; background: none; overflow: visible; border-radius: 0; font-size: 13px; line-height: 1.4; }
.rcc .step-t .val, .rcc .step-t .val span { color: var(--ink); }
.rcc .step-h:focus:not(:focus-visible), .rcc button:focus:not(:focus-visible), .rcc a:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.rcc a.cta, .rcc a.cta:hover, .rcc a.cta:focus { text-decoration: none; color: var(--lime-ink); }
.rcc h1, .rcc h2, .rcc h3, .rcc p { margin-top: 0; }

body.rcc-active .rcr-mstickybar { display: none !important; }
/* ikonka cookies (#cf-float-btn, lewy dół) zasłaniała cenę na pasku konfiguratora — nad pasek (test Sabiny 06.10) */
@media (max-width: 920px) { body.rcc-active #cf-float-btn { bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; } }
body.rcc-modal #cf-float-btn { display: none !important; }
/* okienko koszyka PS (#blockcart-modal) po „Dodaj zestaw do koszyka”: poprawka motywu (RCR-FIX-2026-10-06) siedzi
   w product-additional-info.tpl, którego strona z konfiguratorem nie renderuje — te same reguły tutaj */
body.rcc-active.modal-open #cf-float-btn { opacity: 0 !important; pointer-events: none !important; }
@media (max-width: 767.98px) {
  body.rcc-active #blockcart-modal .cart-content .cart-content-btn { display: flex; flex-direction: column-reverse; width: 100%; gap: 10px; }
  body.rcc-active #blockcart-modal .cart-content .cart-content-btn .btn { width: 100%; margin: 0 !important; justify-content: center; }
}
/* opis produktu (pshoweditor) na telefonie: filmy YouTube <iframe width=560> rozpychały siatkę do 560 px,
   tekst był ucinany (overflow-x: clip motywu); justowanie robiło dziury w wąskiej kolumnie */
body.rcc-active .product-description .pse-div { min-width: 0; }
body.rcc-active .product-description iframe { max-width: 100%; height: auto; aspect-ratio: 16 / 9; }
@media (max-width: 640px) {
  body.rcc-active .product-description .pse-grid, body.rcc-active .product-description .pse-grid-auto { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body.rcc-active .product-description .pse-align-justify { text-align: left !important; }
  body.rcc-active .product-description h2 { font-size: 21px !important; line-height: 1.25 !important; }
  body.rcc-active .product-description h3 { font-size: 18px !important; line-height: 1.3 !important; }
}
@media (max-width: 767.98px) { body.rcc-active .tabs { padding-left: 16px !important; padding-right: 16px !important; } }
body.rcc-active.rcr-has-mstickybar { padding-bottom: 0 !important; }

a.rcc-yt { position: relative; display: block; width: 100%; max-width: 560px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #0c1421; cursor: pointer; }
a.rcc-yt img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
a.rcc-yt:hover img { transform: scale(1.03); }
a.rcc-yt .rcc-yt-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 12px; background: rgba(12,20,33,.82); transition: background .15s ease; }
a.rcc-yt .rcc-yt-play::after { content: ""; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
a.rcc-yt:hover .rcc-yt-play, a.rcc-yt:focus-visible .rcc-yt-play { background: #e00; }
a.rcc-yt:focus-visible { outline: 3px solid #0c1421; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { a.rcc-yt img { transition: none; } }
/* cena w pasku dla wymiaru przykładowego */
.rcc .bar .v .pv { display: block; font-size: 11.5px; font-weight: 500; color: var(--mute); line-height: 1.2; }
/* zaufanie pod przyciskiem koszyka */
.rcc .trust { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.rcc .trust li { display: flex; align-items: flex-start; gap: 8px; }
.rcc .trust .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #2f7d32; }
.rcc .trust small { color: var(--mute); }
/* udostępnienie konfiguracji */
.rcc .share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 12px; }
.rcc .share-row .ghost { min-height: 44px; }
.rcc .share-row .spec-lnk { font-size: 14px; }
/* rozbicie ceny przy 2 plisach */
.rcc .split-note { display: block; font-size: 12px; font-weight: 500; color: var(--mute); }
.rcc .line-price .split-note { display: inline; }
/* kolory tkanin: najpopularniejsze + „Zobacz więcej” */
.rcc .pop-h { margin: 4px 0 8px; font-size: 13px; font-weight: 600; color: var(--mute); }
.rcc .sw + .pop-h { margin-top: 16px; }
.rcc .more-colors { margin-top: 12px; min-height: 44px; }
/* bez JavaScriptu */
.rcc .rcc-noscript { margin: 0 0 16px; padding: 14px 16px; border-radius: 10px; background: var(--paper-2); font-size: 15px; line-height: 1.5; }
.rcc .rcc-noscript a { text-decoration: underline; font-weight: 600; }
/* błąd wyceny w panelu zestawu (przyczyna + ponowienie) */
.rcc .quote-err { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--danger-bg); color: var(--danger); font-size: 13px; line-height: 1.4; }
.rcc .quote-err .spec-lnk { color: inherit; text-decoration: underline; font-weight: 600; min-height: 32px; }
/* breadcrumb na kartach z konfiguratorem (Marcin 07.10): mniejszy i stonowany — nie zlewa się z treścią.
   Na pozostałych kartach motyw go ukrywa (product-additional-info.tpl), a ten szablon na kartach z konfiguratorem się nie renderuje. */
body#product #wrapper nav.breadcrumb { font-size: 12.5px; line-height: 1.4; margin: 4px 0 10px; padding: 0; background: none; }
body#product #wrapper nav.breadcrumb ol { margin: 0; padding: 0; }
body#product #wrapper nav.breadcrumb li, body#product #wrapper nav.breadcrumb li a, body#product #wrapper nav.breadcrumb li span { color: #7a8091; font-size: inherit; font-weight: 400; }
body#product #wrapper nav.breadcrumb li a:hover span { color: #1a1d24; text-decoration: underline; }
body#product #wrapper nav.breadcrumb li::after { color: #b5bac6; }
.rcc-yt-col > p { margin-bottom: 10px; }
@media (max-width: 767px) { .rcc-yt-col + .rcc-yt-col { margin-top: 20px; } }