/* PEKOProf Konfigurator v6 */
#pk { max-width:1100px; margin:0 auto; font-family:'Segoe UI',Arial,sans-serif; color:#333; }
#pk * { box-sizing:border-box; }

/* LAYOUT */
.pk-layout { display:flex; flex-direction:row; gap:0; min-height:600px; }
.pk-left   { flex:1; padding:25px; border-right:1px solid #eee; min-width:0; }
.pk-right  { width:400px; flex-shrink:0; padding:25px; }

/* OBRAZOK */
.pk-img-box { position:sticky; top:20px; text-align:center; }
.pk-img-box img { max-width:100%; max-height:420px; height:auto; object-fit:contain; transition:all .4s ease; }
#pk-img-caption { margin-top:8px; font-size:.82em; color:#888; font-weight:600; min-height:18px; }

/* HLAVICKA */
.pk-header { margin-bottom:20px; }
.pk-header-top { display:flex; justify-content:space-between; align-items:flex-start; }
.pk-label { font-size:.82em; color:#999; text-transform:uppercase; letter-spacing:1px; display:block; }
.pk-model-name { font-size:1.8em; font-weight:700; color:#1a1a1a; display:block; margin-top:2px; }
.pk-header-price { font-size:1.4em; font-weight:700; color:#c0392b; text-align:right; white-space:nowrap; }
.pk-header-price small { display:block; font-size:.45em; color:#999; font-weight:400; }

/* SECTION LABEL */
.pk-section-label { font-size:.88em; font-weight:600; color:#666; margin-bottom:10px; text-transform:uppercase; letter-spacing:.5px; }

/* EDGE BUTTONS */
#pk-edge-list { border:1px solid #ddd; border-radius:6px; overflow:hidden; margin-bottom:15px; }
.pk-edge-btn { display:flex; align-items:center; padding:15px 18px; border-bottom:1px solid #eee; cursor:pointer; background:#fff; transition:background .15s; }
.pk-edge-btn:last-child { border-bottom:none; }
.pk-edge-btn:hover { background:#fafafa; }
.pk-edge-text { flex:1; font-size:.95em; font-weight:500; color:#333; }
.pk-edge-plus { width:28px; height:28px; border:1px solid #ccc; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:1.2em; font-weight:700; color:#c0392b; flex-shrink:0; transition:all .15s; }
.pk-edge-btn:hover .pk-edge-plus { border-color:#c0392b; background:#c0392b; color:#fff; }

/* SELECTED BAR */
.pk-selected-bar { padding:12px 16px; background:#fef9f9; border:1px solid #f5c6cb; border-radius:6px; margin-bottom:15px; }
.pk-selected-top { display:flex; align-items:center; gap:10px; }
.pk-selected-label { font-size:.82em; color:#888; white-space:nowrap; }
.pk-selected-top strong { flex:1; color:#1a1a1a; font-size:.95em; }
.pk-zmena-btn { background:#c0392b; color:#fff; border:none; padding:5px 14px; border-radius:4px; font-size:.75em; font-weight:700; cursor:pointer; white-space:nowrap; }
.pk-zmena-btn:hover { background:#a93226; }
.pk-selected-desc { font-size:.82em; color:#666; margin-top:6px; line-height:1.5; font-style:italic; }

/* ACCORDION */
.pk-accordion { border:1px solid #ddd; border-radius:6px; overflow:hidden; margin-bottom:15px; }
.pk-acc-item { border-bottom:1px solid #eee; }
.pk-acc-item:last-child { border-bottom:none; }

.pk-acc-header { display:flex; align-items:center; gap:8px; padding:13px 16px; cursor:pointer; background:#fff; transition:background .15s; }
.pk-acc-header:hover { background:#fafafa; }
.pk-acc-item.done > .pk-acc-header { background:#f0fff4; }

/* FAJKA */
.pk-acc-check { font-size:.9em; color:#ccc; font-weight:700; flex-shrink:0; transition:color .2s; }
.pk-acc-item.done > .pk-acc-header .pk-acc-check { color:#27ae60; }

.pk-acc-title { flex:1; font-weight:500; font-size:.93em; color:#333; }
.pk-acc-item.done > .pk-acc-header .pk-acc-title { color:#1a1a1a; font-weight:600; }
.pk-acc-value { font-size:.82em; color:#c0392b; font-weight:600; margin-right:6px; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pk-acc-icon { width:26px; height:26px; border:1px solid #ccc; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:1.1em; font-weight:700; color:#c0392b; flex-shrink:0; transition:all .2s; }
.pk-acc-item.open > .pk-acc-header .pk-acc-icon { background:#c0392b; color:#fff; border-color:#c0392b; }

.pk-acc-body { padding:14px 16px; background:#fafafa; border-top:1px solid #eee; }
.pk-acc-info { font-size:.83em; color:#888; margin-bottom:12px; padding:8px 12px; background:#fff; border-left:3px solid #c0392b; border-radius:0 4px 4px 0; line-height:1.5; }

/* SIRKY */
.pk-widths { display:flex; flex-wrap:wrap; gap:8px; }
.pk-width-box { width:82px; padding:10px 6px; border:2px solid #ddd; border-radius:6px; text-align:center; cursor:pointer; background:#fff; transition:all .15s; }
.pk-width-box:hover { border-color:#c0392b; background:#fef9f9; }
.pk-width-box.on { border-color:#27ae60; background:#27ae60; color:#fff; }
.pk-width-num { display:block; font-size:1.35em; font-weight:700; }
.pk-width-cm { display:block; font-size:.68em; color:#999; }
.pk-width-box.on .pk-width-cm { color:#c8f7c5; }
.pk-width-extra { display:block; font-size:.65em; color:#c0392b; margin-top:2px; font-weight:600; }
.pk-width-box.on .pk-width-extra { color:#c8f7c5; }

/* IMG OPTS (vypln) */
.pk-img-opts { display:flex; flex-wrap:wrap; gap:10px; }
.pk-img-opt { display:flex; flex-direction:column; align-items:center; padding:10px; border:2px solid #ddd; border-radius:8px; cursor:pointer; background:#fff; transition:all .15s; width:110px; text-align:center; }
.pk-img-opt:hover { border-color:#c0392b; background:#fef9f9; }
.pk-img-opt.on { border-color:#27ae60; background:#f0fff4; }
.pk-img-opt img { width:70px; height:70px; object-fit:contain; margin-bottom:6px; }
.pk-img-opt span { font-size:.82em; font-weight:600; color:#333; }
.pk-img-opt small { font-size:.72em; color:#c0392b; font-weight:600; }
.pk-img-opt.on span { color:#27ae60; }

/* FARBY */
.pk-tabs { display:flex; gap:5px; margin-bottom:12px; }
.pk-ctab { padding:6px 14px; border:1px solid #ddd; border-radius:4px; background:#fff; cursor:pointer; font-size:.82em; font-weight:600; color:#666; transition:all .15s; }
.pk-ctab:hover { border-color:#c0392b; }
.pk-ctab-on { background:#c0392b; color:#fff; border-color:#c0392b; }
.pk-colors { display:grid; grid-template-columns:repeat(auto-fill,minmax(68px,1fr)); gap:6px; }
.pk-color-item { text-align:center; cursor:pointer; padding:5px 3px; border:2px solid transparent; border-radius:6px; transition:all .15s; }
.pk-color-item:hover { border-color:#c0392b; }
.pk-color-item.on { border-color:#27ae60; background:#f0fff4; }
.pk-color-item.on .pk-color-dot { box-shadow:0 0 0 2px #27ae60; }
.pk-color-dot { width:38px; height:38px; border-radius:50%; display:block; margin:0 auto 3px; border:1px solid #ddd; }
.pk-color-label { font-size:.6em; color:#666; display:block; line-height:1.2; }

/* OPT BUTTONS */
.pk-opt-list { display:flex; flex-wrap:wrap; gap:6px; }
.pk-opt-btn { padding:8px 14px; border:2px solid #ddd; border-radius:5px; cursor:pointer; font-size:.88em; font-weight:500; background:#fff; transition:all .15s; display:flex; align-items:center; gap:5px; }
.pk-opt-btn:hover { border-color:#c0392b; background:#fef9f9; }
.pk-opt-btn.on { border-color:#27ae60; background:#27ae60; color:#fff; }
.pk-opt-btn small { font-size:.8em; color:#c0392b; font-weight:600; }
.pk-opt-btn.on small { color:#c8f7c5; }

/* DOPLNKOVE PRODUKTY */
.pk-extra-title { font-weight:700; font-size:.88em; color:#555; margin:20px 0 8px; text-transform:uppercase; letter-spacing:.5px; }
.pk-frame-price { font-size:.8em; color:#c0392b; font-weight:600; margin-right:6px; }
.pk-frame-item.pk-frame-on > .pk-acc-header { background:#f0fff4; border-left:3px solid #27ae60; }
.pk-frame-btn { padding:7px 18px; background:#c0392b; color:#fff; border:none; border-radius:4px; cursor:pointer; font-weight:600; font-size:.85em; }
.pk-frame-btn:hover { background:#a93226; }

/* KOSIK */
.pk-cart-section { margin-top:20px; padding:15px; background:#f9f9f9; border:1px solid #ddd; border-radius:6px; }
.pk-cart-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.pk-qty-wrap { display:flex; align-items:center; gap:6px; }
.pk-qty-wrap label { font-weight:600; font-size:.88em; }
.pk-qty-wrap button { width:36px; height:36px; border:1px solid #ddd; background:#f0f0f0; font-size:1.1em; font-weight:700; cursor:pointer; border-radius:4px; transition:background .15s; }
.pk-qty-wrap button:hover { background:#e0e0e0; }
#pk-qty { width:46px; height:36px; text-align:center; border:1px solid #ddd; border-radius:4px; font-weight:600; font-size:1em; -moz-appearance:textfield; }
#pk-qty::-webkit-outer-spin-button, #pk-qty::-webkit-inner-spin-button { -webkit-appearance:none; }
.pk-total { margin-left:auto; font-size:1.3em; font-weight:700; color:#c0392b; }
.pk-total small { font-size:.5em; color:#999; font-weight:400; }
.pk-add-btn { width:100%; padding:14px; background:#27ae60; color:#fff; border:none; border-radius:6px; font-size:1.05em; font-weight:700; cursor:pointer; transition:background .2s; }
.pk-add-btn:hover { background:#219a52; }
.pk-add-btn.loading { opacity:.6; pointer-events:none; }
#pk-validation { padding:10px 14px; background:#fff3cd; color:#856404; border:1px solid #ffc107; border-radius:4px; font-size:.85em; margin-bottom:8px; }
#pk-msg { margin-top:8px; }
.pk-msg-ok { padding:10px 14px; background:#d4edda; color:#155724; border:1px solid #c3e6cb; border-radius:4px; font-size:.85em; }
.pk-msg-err { padding:10px 14px; background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; border-radius:4px; font-size:.85em; }
#pk-msg a { color:inherit; font-weight:700; }

/* RESPONSIVE */
@media (max-width:800px) {
    .pk-layout { flex-direction:column-reverse; }
    .pk-right { width:100%; }
    .pk-left { border-right:none; }
    .pk-img-box { position:relative; top:0; }
    .pk-img-box img { max-height:250px; }
    .pk-header-top { flex-wrap:wrap; gap:10px; }
    .pk-cart-row { flex-direction:column; align-items:stretch; }
    .pk-total { text-align:center; }
}
@media (max-width:480px) {
    .pk-left, .pk-right { padding:15px; }
    .pk-model-name { font-size:1.5em; }
    .pk-colors { grid-template-columns:repeat(auto-fill,minmax(60px,1fr)); }
}