/* Desktop roller calculators. Image/color assets and geometry come from the native calculator. */
.roller-calc-visual {
    min-width:0;
    padding:0;
    border:1px solid #dce6ed;
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 8px 28px #173e5609;
    color:#243e50;
}
.roller-calc-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:20px 24px 0;
    background:#f5f9fc;
}
.roller-calc-title { font-size:17px; font-weight:600; line-height:26px; letter-spacing:-.15px; }
.roller-calc-hint { font-size:11px; line-height:16px; color:#718694; }
.roller-calc-stage {
    display:grid;
    grid-template-columns:minmax(0,1fr) 214px;
    align-items:center;
    gap:24px;
    height:300px;
    padding:26px;
    background:#f5f9fc;
}
.roller-calc-art {
    position:relative;
    justify-self:center;
    width:190px;
    max-width:100%;
    aspect-ratio:249 / 281;
    overflow:hidden;
    clip-path:polygon(0 0,100% 0,100% 10%,98% 14%,98% 100%,3% 100%,3% 14%,0 10%);
}
/* Crop the existing bitmap to the product; its window/brickwork stay outside the frame. */
.roller-calc-visual .roller-calc-image {
    position:absolute;
    left:-20.080321%;
    top:-14.234875%;
    width:225.702811%;
    height:128.113879%;
    margin:0;
    padding:0;
    background-size:100% 100%;
    background-repeat:no-repeat;
}
.roller-calc-visual[data-roller-kind="rolvorota"] .roller-calc-art { width:100%; aspect-ratio:454 / 280; }
.roller-calc-visual[data-roller-kind="rolvorota"] .roller-calc-image { left:-11.674009%; top:-14.642857%; width:123.788546%; height:125.714286%; }
.roller-calc-palette { min-width:0; }
.roller-calc-color-caption { display:flex; align-items:center; justify-content:space-between; gap:6px; margin:0 0 13px; font-size:12px; line-height:20px; color:#718694; }
.roller-calc-color-name { padding:3px 8px; border-radius:5px; background:#eef3f7; color:#334d60; font-weight:600; }
.roller-calc-colors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 8px; }
.roller-calc-color {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    min-height:34px;
    margin:0;
    padding:3px;
    border:0;
    border-radius:5px;
    background:transparent;
    color:#5d7789;
    font:inherit;
    font-size:10px;
    line-height:16px;
    text-align:left;
    cursor:pointer;
}
.roller-calc-color:hover { background:#e7f0f6; color:#243e50; }
.roller-calc-color:focus-visible { outline:2px solid #0078be; outline-offset:2px; }
.roller-calc-swatch { position:relative; flex:none; width:27px; height:27px; border-radius:5px; background:var(--roller-color); box-shadow:inset 0 0 0 1px #00000009; }
.roller-calc-color[data-color="5"] .roller-calc-swatch { box-shadow:inset 0 0 0 1px #b5c7d2; }
.roller-calc-color[aria-pressed="true"] .roller-calc-swatch { outline:2px solid #0084bf; outline-offset:3px; }
.roller-calc-color[aria-pressed="true"] .roller-calc-swatch::after { content:""; position:absolute; left:10px; top:6px; width:7px; height:12px; border:solid #fff; border-width:0 3px 3px 0; transform:rotate(45deg); }
.roller-calc-color[data-color="3"] .roller-calc-swatch::after,
.roller-calc-color[data-color="5"] .roller-calc-swatch::after,
.roller-calc-color[data-color="6"] .roller-calc-swatch::after { border-color:#243e50; }
.roller-calc-measures { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:0; padding:18px 20px; border-top:1px solid #e3ebf0; background:#fff; }
.roller-calc-measure { min-width:0; padding:0 13px; }
.roller-calc-measure + .roller-calc-measure { border-left:1px solid #e6edf2; }
.roller-calc-measure:first-child { padding-left:4px; }
.roller-calc-measure:last-child { padding-right:0; }
.roller-calc-measure dt { min-height:32px; margin:0 0 6px; font-size:11px; line-height:16px; color:#718694; }
.roller-calc-visual .roller-calc-value { position:static; width:auto; margin:0; padding:0; font-size:20px; font-weight:600; line-height:26px; color:#253f50; letter-spacing:-.3px; white-space:nowrap; }
.roller-calc-unit { font-size:11px; font-weight:400; letter-spacing:0; color:#718694; }
/* A narrow desktop still uses the separate desktop template. Keep the palette at the side. */
@media (max-width:1399px) {
    .roller-calc-head { padding:16px 18px 0; }
    .roller-calc-title { font-size:15px; }
    .roller-calc-stage { grid-template-columns:minmax(0,1fr) 112px; height:350px; padding:20px 18px; gap:18px; }
    .roller-calc-colors { grid-template-columns:1fr; gap:1px; }
    .roller-calc-color-caption { flex-wrap:wrap; margin-bottom:8px; }
    .roller-calc-measures { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 0; padding:16px 18px; }
    .roller-calc-measure:nth-child(odd) { padding-left:0; border-left:0; }
    .roller-calc-measure dt { min-height:0; }
}
.mobile .roller-calc-visual { display:none; }