.hero-paint-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.hero-paint-controls{position:absolute;z-index:3;right:5%;bottom:90px;width:340px;max-width:calc(100% - 36px);padding:18px;background:#101a27ed;border:1px solid #ffffff40;border-radius:16px;box-shadow:0 12px 40px #0003;color:#fff}.paint-title{display:flex;justify-content:space-between;gap:12px;font-size:15px;font-weight:600}.paint-title output{color:#f1cc40}.hero-swatches{display:flex;gap:8px;margin:12px 0}.hero-swatches button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:6px;border:1px solid #ffffff40;border-radius:8px;background:transparent;color:white;font-size:13px}.hero-swatches button[aria-pressed=true]{background:#ffffff18;border-color:#f1cc40}.hero-swatches i{width:18px;height:18px;border-radius:50%;border:1px solid #ffffff80}.paint-compare{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap}.paint-compare input{width:100%;min-width:30px;min-height:32px;accent-color:#f1cc40}.hero-paint-handle{position:absolute;z-index:2;width:44px;padding:0;transform:translateX(-50%);border:0;background:transparent;touch-action:none;cursor:ew-resize;color:#101a27}.hero-paint-handle:before{content:'';position:absolute;left:21px;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 5px #0008}.hero-paint-handle span{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 3px 14px #0005;font-size:24px}.hero-overlay{pointer-events:none}
@media(max-width:600px){.new-hero{min-height:1080px!important;max-height:none!important}.new-hero>picture,.hero-paint-canvas{top:240px;height:740px}.hero-paint-controls{bottom:105px;right:18px;left:18px;width:auto}.hero-paint-handle{z-index:2}.new-hero .hero-editorial{padding-bottom:0}.hero-bottom{min-height:80px!important}.hero-swatches button{font-size:14px}}
@media(min-width:601px) and (max-width:1000px){.hero-paint-controls{right:24px;bottom:82px;width:310px}}

/* Compact palette: keep touch targets, remove the bulky card heading. */
.hero-paint-controls{width:286px;padding:8px;border-radius:12px;background:#101a27eb;border-color:#ffffff2b;box-shadow:0 6px 24px #0003}.hero-paint-controls .paint-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hero-swatches{margin:0;gap:5px}.hero-swatches button{min-height:44px;padding:7px 9px;border-color:transparent;border-radius:7px;font-size:13px;gap:6px}.hero-swatches button:hover{background:#ffffff12}.hero-swatches button[aria-pressed=true]{background:#f1cc4018;border-color:#f1cc4080}.hero-swatches i{width:16px;height:16px;flex-shrink:0}@media(max-width:600px){.hero-paint-controls{left:auto;right:18px;width:286px;bottom:105px}.hero-swatches button{font-size:13px}}