.mk-cube-stage {
    min-height: 410px;
    background:
        radial-gradient(circle at 72% 18%, rgba(38, 137, 255, .22), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(213, 237, 253, .95));
}

.mk-cube-scene {
    width: min(88%, 390px);
    height: 330px;
    position: relative;
    z-index: 2;
    perspective: 1050px;
    transition: transform .35s ease;
}

.mk-cube-scene:hover { transform: translateY(-4px); }
.mk-cube-shadow { width: 72%; height: 40px; position: absolute; left: 15%; bottom: 18px; border-radius: 50%; background: rgba(5, 31, 60, .28); filter: blur(18px); transform: rotate(-3deg); }

.mk-cube-block {
    width: 218px;
    height: 205px;
    position: absolute;
    left: 49%;
    top: 79px;
    z-index: 3;
    color: #fff;
    transform: translateX(-50%) rotateX(-3deg) rotateY(-7deg) rotateZ(-2deg);
    transform-style: preserve-3d;
    transition: .35s ease;
}

.mk-cube-front {
    width: 218px;
    height: 205px;
    position: absolute;
    inset: 0;
    z-index: 4;
    padding: 24px 23px 19px;
    overflow: hidden;
    background: linear-gradient(150deg, #061426 0%, #0a3154 63%, #0c659e 100%);
    border: 1px solid rgba(117, 208, 255, .3);
    border-radius: 5px 4px 7px 6px;
    box-shadow: 0 25px 43px rgba(5, 31, 60, .26);
}

.mk-cube-front::before { content: ""; width: 180px; height: 180px; position: absolute; right: -91px; bottom: -83px; border: 1px solid rgba(105,202,255,.38); border-radius: 50%; box-shadow: 0 0 0 27px rgba(105,202,255,.055), 0 0 0 54px rgba(105,202,255,.027); }
.mk-cube-front::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(255,255,255,.09); border-radius: 2px; pointer-events: none; }
.mk-cube-top { width: 218px; height: 64px; position: absolute; left: 12px; top: -56px; z-index: 2; padding: 20px 23px; display: flex; align-items: center; justify-content: space-between; color: #9edfff; background: linear-gradient(145deg, #123f67, #0a2441); border: 1px solid rgba(117,208,255,.26); clip-path: polygon(0 88%, 91% 0, 100% 16%, 8% 100%); font-size: 7px; font-weight: 850; letter-spacing: .16em; }
.mk-cube-top b { width: 25px; height: 25px; display: grid; place-items: center; color: #fff; background: #1d79ed; border-radius: 50%; font-size: 10px; }
.mk-cube-side { width: 52px; height: 198px; position: absolute; right: -45px; top: -1px; z-index: 3; padding: 17px 9px; display: flex; flex-direction: column; gap: 7px; color: #0a3154; background: repeating-linear-gradient(0deg, #edf4f7 0 2px, #d3e0e7 2px 3px); border: 1px solid #b8ccd7; border-left: 0; clip-path: polygon(0 2%, 100% 0, 100% 94%, 0 100%); box-shadow: 13px 19px 30px rgba(5,31,60,.17); }
.mk-cube-side i { height: 2px; display: block; background: rgba(10,49,84,.24); }
.mk-cube-side span { margin-top: auto; color: #0c5688; font-size: 9px; font-weight: 900; transform: rotate(90deg); }
.mk-cube-brand { display: flex; align-items: center; gap: 7px; position: relative; z-index: 3; font-size: 8px; }
.mk-cube-brand > b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #1d79ed; font-size: 11px; }
.mk-cube-brand strong { color: #72d2ff; }
.mk-cube-front > small { display: block; margin-top: 40px; position: relative; z-index: 3; color: #73d4ff; font-size: 6px; font-weight: 850; letter-spacing: .18em; }
.mk-cube-front h3 { margin: 7px 0 10px; position: relative; z-index: 3; font-size: 24px; line-height: .91; letter-spacing: -.055em; }
.mk-cube-front p { width: 83%; margin: 0; position: relative; z-index: 3; color: #c1d7e5; font-size: 6px; line-height: 1.5; }
.mk-cube-front footer { position: absolute; left: 23px; bottom: 17px; z-index: 3; color: #c5dfed; font-size: 6px; font-weight: 700; }

.mk-cube-block.finish-mat .mk-cube-front { background: linear-gradient(150deg, #0a1727, #15354d 65%, #28536d); }
.mk-cube-block.has-lak .mk-cube-front { box-shadow: inset 14px 0 35px rgba(255,255,255,.08), 0 25px 43px rgba(5,31,60,.26); }
.mk-cube-block.has-lak .mk-cube-front::after { background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.13) 45%, transparent 64%); }
.mk-cube-block.multi-color .mk-cube-top { border-top-color: #ffcf3c; box-shadow: inset 0 3px #e94776, inset 0 6px #19b9d5; }
.mk-cube-block.paper-400 .mk-cube-side { background: repeating-linear-gradient(0deg, #f0f5f7 0 1.5px, #c9d9e1 1.5px 2.5px); }
.mk-cube-block.paper-500 .mk-cube-side { background: repeating-linear-gradient(0deg, #f2f6f8 0 1px, #c4d4dd 1px 2px); }

.mk-catalog-note { margin: 15px 0 0; padding: 13px 15px; color: #5b7184; background: #f4f9fd; border: 1px solid #dfebf3; border-radius: 11px; font-size: 10px; line-height: 1.65; }
.mk-catalog-note a { color: #1769ec; font-weight: 800; }
.mk-related-products { margin: 34px 0; padding: 28px; display: grid; grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr); gap: 28px; background: linear-gradient(135deg, #07182c, #0e385f); border-radius: 22px; box-shadow: 0 18px 48px rgba(5,31,60,.14); }
.mk-related-products > div > span { color: #72d2ff; font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.mk-related-products h2 { margin: 6px 0 0; color: #fff; font-size: 25px; line-height: 1.15; letter-spacing: -.035em; }
.mk-related-products nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mk-related-products nav a { min-height: 43px; padding: 8px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #c7d9e7; background: rgba(255,255,255,.055); border: 1px solid rgba(162,214,248,.12); border-radius: 9px; font-size: 9px; font-weight: 700; transition: .18s; }
.mk-related-products nav a:hover { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(114,210,255,.3); transform: translateY(-1px); }
.mk-related-products nav b { color: #72d2ff; font-size: 12px; }

@media (max-width: 1180px) {
    .mk-cube-stage { min-height: 365px; }
    .mk-cube-scene { height: 300px; transform: scale(.9); }
    .mk-cube-scene:hover { transform: scale(.9) translateY(-3px); }
    .mk-related-products { grid-template-columns: 1fr; }
    .mk-related-products nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .mk-cube-stage { min-height: 325px; }
    .mk-cube-scene { width: min(90%, 330px); height: 275px; transform: scale(.8); }
    .mk-cube-scene:hover { transform: scale(.8) translateY(-3px); }
    .mk-related-products { padding: 20px; }
    .mk-related-products nav { grid-template-columns: 1fr; }
}