/* CERAMICO R7 · fill the photo stage without a dark edge. */
.ceramic-explorer{position:relative;width:min(100%,1536px);margin:0 auto 30px;color:#fff;font-family:Saira,Arial,sans-serif;isolation:isolate;container-type:inline-size}
.ceramic-explorer *, .ceramic-explorer *::before,.ceramic-explorer *::after{box-sizing:border-box}
.ceramic-explorer [hidden]{display:none!important}
.ceramic-explorer__stage{position:relative;width:100%;aspect-ratio:2048/916;background:#090909;isolation:isolate}
.ceramic-explorer__scene{position:absolute;inset:0}
.ceramic-explorer__photo{display:block;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}
.ceramic-explorer__points{position:absolute;inset:0}
.ceramic-explorer__point{--icon-size:clamp(36px,3vw,54px);position:absolute;left:var(--x);top:var(--y);display:block;width:44px;height:44px;padding:0;margin:0;border:0;border-radius:50%;background:transparent;color:inherit;transform:translate(-50%,-50%);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;z-index:2}
.ceramic-explorer__point img{position:absolute;left:50%;top:50%;width:var(--icon-size);height:auto;max-width:none;transform:translate(-50%,-50%);pointer-events:none;user-select:none;transition:opacity .16s ease}
.ceramic-explorer__point .ceramic-explorer__icon-hover{width:calc(var(--icon-size)*1.906);opacity:0}
.ceramic-explorer__point:focus-visible{outline:2px solid #fff;outline-offset:5px}
@media(hover:hover) and (pointer:fine){
 .ceramic-explorer__point:hover{z-index:5}
 .ceramic-explorer__point:hover .ceramic-explorer__icon-normal{opacity:0}
 .ceramic-explorer__point:hover .ceramic-explorer__icon-hover{opacity:1;animation:ceramic-hotspot-in .24s ease-out}
}
@media(hover:none){
 .ceramic-explorer__point:active .ceramic-explorer__icon-normal{opacity:0}
 .ceramic-explorer__point:active .ceramic-explorer__icon-hover{opacity:1}
}
@keyframes ceramic-hotspot-in{from{transform:translate(-50%,-50%) scale(.84)}to{transform:translate(-50%,-50%) scale(1)}}
.ceramic-explorer__back{position:absolute;left:24px;top:24px;z-index:8;display:flex;align-items:center;gap:9px;padding:10px 17px;min-height:44px;border:1px solid #ffffffa6;border-radius:6px;background:#111b;color:#fff;font-family:inherit;font-size:15px;font-weight:500;letter-spacing:.08em;cursor:pointer;touch-action:manipulation;backdrop-filter:blur(5px)}
.ceramic-explorer__back:hover{background:#111}
.ceramic-explorer__back:focus-visible,.ceramic-explorer__close:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ceramic-explorer__back svg{width:17px;height:17px}
.ceramic-explorer__line{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none}
.ceramic-explorer__line line{stroke:#fff;stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ceramic-explorer__panel{position:absolute;z-index:6;left:var(--panel-x);top:var(--panel-y);width:var(--panel-width,24%);padding:clamp(12px,1.15cqw,18px);border:1.5px solid #ffffffe0;border-radius:10px;background:rgba(130,130,130,.62);box-shadow:0 5px 22px #0002;backdrop-filter:blur(3px);animation:ceramic-panel-in .18s ease-out}
.ceramic-explorer__panel h3{margin:0 12px 9px 0;padding:0 0 8px;border-bottom:1px solid #fff8;font-family:inherit;font-size:clamp(14px,1.4cqw,22px);font-weight:500;line-height:1.18;letter-spacing:.025em;color:#fff;text-align:center}
.ceramic-explorer__close{position:absolute;right:7px;top:5px;display:grid;place-items:center;width:28px;height:28px;border:0;background:transparent;color:#fff;font-size:23px;line-height:1;cursor:pointer}
.ceramic-explorer__rows{display:grid;gap:5px}
.ceramic-explorer__row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;overflow:hidden;border-radius:7px;background:#191919;color:#fff;font-size:clamp(13px,1.4cqw,22px);line-height:1.15;text-align:center;text-decoration:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.ceramic-explorer__row:focus-visible{outline:2px solid #fff;outline-offset:2px;z-index:1}
@media(hover:hover) and (pointer:fine){.ceramic-explorer__row:hover{transform:scale(1.035);box-shadow:0 3px 10px #0005;z-index:1}}
.ceramic-explorer__row:active{transform:scale(1.015)}
.ceramic-catalog [id^="ceramic-"][tabindex="-1"]{scroll-margin-top:24px}
.ceramic-catalog [id^="ceramic-"][tabindex="-1"]:focus-visible{outline:2px solid #ed0806;outline-offset:4px}
.ceramic-explorer__product{display:grid;align-content:center;padding:5px 8px;min-width:0}
.ceramic-explorer__duration{display:grid;align-content:center;min-width:clamp(70px,6cqw,96px);padding:5px 10px;background:#000;font-weight:500;border-radius:7px}
.ceramic-explorer__hint{margin:0;padding:13px 16px 0;text-align:center;color:#646464;font-size:14px;line-height:1.45;letter-spacing:.02em}
.ceramic-explorer__status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes ceramic-panel-in{from{opacity:0}to{opacity:1}}
@media(min-width:801px){.ceramic-explorer{width:min(100%,1536px,calc((100svh - 135px)*2.23580786))}}
@media(max-width:800px){
 .ceramic-explorer{margin-bottom:14px}
 .ceramic-explorer__point{--icon-size:36px}
 .ceramic-explorer__back{left:10px;top:10px;min-height:36px;padding:5px 10px;font-size:12px;gap:6px}
 .ceramic-explorer__panel{position:relative;left:auto;top:auto;width:calc(100% - 28px);max-width:470px;margin:14px auto 0;padding:20px 18px;background:#626262;backdrop-filter:none;border-color:#c6c6c6}
 .ceramic-explorer__panel h3{font-size:18px;line-height:1.25;margin-right:15px}
 .ceramic-explorer__row{font-size:16px;min-height:43px}
 .ceramic-explorer__duration{min-width:96px}
 .ceramic-explorer__line{display:none}
 .ceramic-explorer__hint{font-size:12px;padding-top:10px}
}
@media(prefers-reduced-motion:reduce){.ceramic-explorer *,.ceramic-explorer *::before,.ceramic-explorer *::after{animation:none!important;transition:none!important}}