/* Průvodce výběrem hraček, varianta 8 „Krémová, tenké linky“. Mobile first, počítač od 992 px. */
/* v2 (11. 11. 2026): barva podnadpisu a poznámky s !important — custom.css má p { color: #27234A !important }. */
.utu-pr{background:#fff8e0;border-radius:32px 14px 32px 14px;padding:30px 20px 22px;margin:16px 0 24px;color:#392e5a;box-sizing:border-box}
.utu-pr *{box-sizing:border-box}
.utu-pr .utu-pr__title{margin:0 0 10px;padding:0;font-family:'Chillax-variable','Chillax-nahrada',sans-serif;font-size:44px;line-height:1;font-weight:700;color:#392e5a;text-transform:none;letter-spacing:normal}
.utu-pr .utu-pr__lead{margin:0 0 22px;font-size:18px;line-height:1.4;font-weight:600;color:#b55400!important}
.utu-pr__row{display:flex;flex-direction:column;gap:10px}
.utu-pr__box{height:64px;background:#ffffff;border:1.5px solid rgba(57,46,90,.22);border-radius:22px 10px 22px 10px;min-width:0}
.utu-pr__dd{position:relative;min-width:0}
.utu-pr__dd>summary{list-style:none;cursor:pointer;padding:0 16px;display:flex;align-items:center;gap:8px}
.utu-pr__dd>summary::-webkit-details-marker{display:none}
.utu-pr__dd>summary svg{flex:none;transition:transform .15s}
.utu-pr__dd[open]>summary svg{transform:rotate(180deg)}
.utu-pr__dd>summary:focus-visible,.utu-pr__go:focus-visible{outline:2px solid #392e5a;outline-offset:2px}
.utu-pr__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.utu-pr__q{font-size:12px;line-height:1.2;color:#6b6385;white-space:nowrap}
.utu-pr__val{font-size:16px;line-height:1.25;font-weight:700;color:#392e5a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.utu-pr__panel{position:absolute;z-index:50;left:0;right:0;top:calc(100% + 6px);background:#ffffff;border:1.5px solid rgba(57,46,90,.22);border-radius:22px 10px 22px 10px;box-shadow:0 10px 30px rgba(39,35,74,.12);padding:8px;display:flex;flex-direction:column;gap:2px;max-height:360px;overflow:auto}
.utu-pr .utu-pr__opt{display:block;width:100%;min-height:44px;margin:0;padding:10px 14px;border:0;border-radius:12px 6px 12px 6px;background:none;font:inherit;font-size:15px;line-height:1.3;font-weight:400;color:#392e5a;text-align:left;text-transform:none;cursor:pointer}
.utu-pr .utu-pr__opt:hover,.utu-pr .utu-pr__opt:focus-visible{background:#fff8e0;outline:none}
.utu-pr .utu-pr__opt[aria-pressed="true"]{font-weight:700;background:#fff8e0}
.utu-pr__price{padding:0 22px;display:flex;flex-direction:column;justify-content:center;gap:9px}
/* --k = průměr kolečka: mobil 22 px (prst), počítač 14 px podle předlohy. --a a --b nastavuje JS (začátek a délka výběru 0 až 1) */
.utu-pr__range{--k:22px;position:relative;height:var(--k);margin:0 calc(var(--k) / -2)}
.utu-pr__range:before{content:"";position:absolute;left:calc(var(--k) / 2);right:calc(var(--k) / 2);top:calc(50% - 1px);height:2px;background:rgba(57,46,90,.22)}
.utu-pr__fill{position:absolute;top:calc(50% - 1px);height:2px;background:#392e5a;left:calc(var(--k) / 2 + (100% - var(--k)) * var(--a,0));width:calc((100% - var(--k)) * var(--b,1))}
.utu-pr__range input{position:absolute;left:0;top:0;width:100%;height:var(--k);margin:0;padding:0;background:none;border:0;pointer-events:none;-webkit-appearance:none;appearance:none}
.utu-pr__range input:focus{outline:none}
.utu-pr__range input::-webkit-slider-runnable-track{background:none;height:var(--k)}
.utu-pr__range input::-moz-range-track{background:none}
.utu-pr__range input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:var(--k);height:var(--k);box-sizing:border-box;border-radius:50%;background:#ffffff;border:2.5px solid #392e5a;cursor:pointer}
.utu-pr__range input::-moz-range-thumb{pointer-events:auto;width:var(--k);height:var(--k);box-sizing:border-box;border-radius:50%;background:#ffffff;border:2.5px solid #392e5a;cursor:pointer}
.utu-pr__range input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(57,46,90,.25)}
.utu-pr__range input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px rgba(57,46,90,.25)}
.utu-pr__pvals{display:flex;justify-content:space-between;align-items:baseline;font-size:16px;line-height:1.2}
.utu-pr__pvals b{font-weight:700;color:#392e5a}
.utu-pr__pvals small{font-size:12px;font-weight:500;color:#6b6385;margin-right:4px}
.utu-pr .utu-pr__go{display:flex;align-items:center;justify-content:center;height:64px;margin-top:4px;padding:0 30px;background:#ff8810;color:#392e5a;font-size:17px;font-weight:800;border-radius:22px 10px 22px 10px;text-decoration:none;white-space:nowrap}
.utu-pr .utu-pr__go:hover{background:#f57210;color:#392e5a;text-decoration:none}
.utu-pr .utu-pr__note{margin:16px 0 0;font-size:13px;line-height:1.4;color:#5b5577!important}
.utu-pr .utu-pr__note a{color:#392e5a}
@media (min-width:992px){
.utu-pr{border-radius:40px 18px 40px 18px;padding:44px 44px 30px}
.utu-pr .utu-pr__title{font-size:68px}
.utu-pr .utu-pr__lead{margin-bottom:28px;font-size:21px}
/* Otázky se nesmí zalomit: v obsahu webu (cca 1140 px) jsou bubliny užší než v předloze, místo se ubere z rozpočtu */
.utu-pr__row{display:grid;grid-template-columns:repeat(3,minmax(max-content,1fr)) minmax(0,1.7fr) auto;gap:12px;align-items:end}
.utu-pr .utu-pr__go{margin-top:0}
.utu-pr__range{--k:14px}
.utu-pr__panel{right:auto;min-width:100%;width:max-content;max-width:340px}
}
/* Užší verze do kategorií a na stránku značek (Gábi 10. 11. 2026): menší nadpis, bez podnadpisu,
   na mobilu věk a místo vedle sebe. Důvod: velká verze na mobilu odsune produkty o 664 px, užší o 370 px. */
.utu-pr--kompakt{padding:20px 16px 16px}
.utu-pr--kompakt .utu-pr__title{font-size:26px;margin-bottom:14px}
.utu-pr--kompakt .utu-pr__lead{display:none}
.utu-pr--kompakt .utu-pr__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.utu-pr--kompakt .utu-pr__box,.utu-pr--kompakt .utu-pr__go{height:56px}
.utu-pr--kompakt .utu-pr__dd>summary{padding:0 12px}
.utu-pr--kompakt .utu-pr__dd:nth-child(3),.utu-pr--kompakt .utu-pr__price,.utu-pr--kompakt .utu-pr__go{grid-column:1/-1}
.utu-pr.utu-pr--kompakt .utu-pr__go{margin-top:0}
.utu-pr.utu-pr--kompakt .utu-pr__note{margin-top:10px}
@media (min-width:992px){
.utu-pr--kompakt{padding:26px 30px 20px;border-radius:32px 14px 32px 14px}
.utu-pr.utu-pr--kompakt .utu-pr__title{font-size:34px;margin-bottom:16px}
.utu-pr--kompakt .utu-pr__row{grid-template-columns:repeat(3,minmax(max-content,1fr)) minmax(0,1.7fr) auto;gap:12px}
.utu-pr--kompakt .utu-pr__dd:nth-child(3),.utu-pr--kompakt .utu-pr__price,.utu-pr--kompakt .utu-pr__go{grid-column:auto}
}