.cpp3d{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:#f6f5f5;color:#20251e;font-family:'DIN 2014',sans-serif}
.cpp3d::backdrop{background:#f6f5f5}
.cpp3d__texture{position:absolute;width:min(988px,100vw);height:auto;left:50%;bottom:10%;transform:translateX(-50%);pointer-events:none}
.cpp3d__fade{position:absolute;inset:57% 0 0;background:linear-gradient(transparent,#f6f5f5 40%);pointer-events:none}
.cpp3d__frame{position:absolute;inset:13% 18% 24%}
.cpp3d__frame iframe{width:100%;height:100%;border:0;display:block;background:transparent}
.cpp3d__header{position:absolute;inset:40px 32px auto;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
.cpp3d__header h2{font-family:'Cardinal Fruit',serif;font-size:24px;line-height:1.1;font-weight:600;color:#20251e;margin:0 0 16px}
.cpp3d__header h2 sup{font-size:.54em}
.cpp3d__price{font-size:20px;line-height:1.1;opacity:.5}
.cpp3d__logo{position:absolute;left:50%;transform:translateX(-50%)}
.cpp3d__close{border:0;background:none;padding:0;cursor:pointer;pointer-events:auto}
.cpp3d__colors{position:absolute;left:50%;bottom:16.5%;transform:translateX(-50%);display:flex;gap:12px;align-items:center;justify-content:center;max-width:calc(100% - 32px);flex-wrap:wrap}
.cpp3d__colors button{display:block;flex:none;width:30px;height:30px;min-width:30px;padding:0;border:0;border-radius:50%;background:var(--swatch-background-image,var(--swatch-background,#ddd));background-size:cover;background-position:center;cursor:pointer}
.cpp3d__colors button[aria-pressed=true]{outline:1px solid #20241f;outline-offset:2px}
.cpp3d__colors button:focus-visible,.cpp3d__close:focus-visible{outline:2px solid #2066c0;outline-offset:4px}
.cpp3d__colors img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover}
.cpp3d__status{position:absolute;inset:13% 18% 24%;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;background:#f6f5f5;font-size:14px}
.cpp3d__status[hidden]{display:none}
@media(max-width:749px){.cpp3d__status{inset:20% 0 27%}}
@media(max-height:500px) and (min-width:750px){.cpp3d__status{inset:10% 25% 20%}}
@media(max-width:749px){.cpp3d__header{inset:24px 20px auto}.cpp3d__header h2{font-size:21px;margin-bottom:10px}.cpp3d__price{font-size:16px}.cpp3d__logo{top:70px}.cpp3d__frame{inset:20% 0 27%}.cpp3d__texture{width:150vw;max-width:none;bottom:18%}.cpp3d__colors{width:340px;gap:16px;bottom:max(8%,env(safe-area-inset-bottom));padding:4px}.cpp3d__fade{top:60%}}
@media(max-height:500px) and (min-width:750px){.cpp3d__header{top:20px}.cpp3d__colors{bottom:7%}.cpp3d__frame{inset:10% 25% 20%}}