/* 3D-превʼю годинника на сторінці товару (мініатюра-тригер + сцена + чіпи стрілок) */
.product-page__image { position: relative; }

/* мініатюра «3D» у стрічці фото — відкриває 3D-перегляд */
.sm3d-thumb {
    width: 60px; height: 60px; flex: 0 0 60px;
    border-radius: 6px; cursor: pointer; margin-top: 6px;
    display: flex; align-items: center; justify-content: center;
    background: #2a2330; color: #fff; border: 1px solid #d8c2c2;
}
.sm3d-thumb:hover { background: #7a1f1f; }
.sm3d-thumb__badge { font-size: 12px; font-weight: 700; line-height: 1; }

.sm3d { position: absolute; inset: 0; pointer-events: none; z-index: 5; }

/* кутова кнопка «3D» */
.sm3d-toggle {
    position: absolute; top: 12px; right: 12px; z-index: 7;
    pointer-events: auto; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 13px; border: none; border-radius: 22px;
    background: #7a1f1f; color: #fff; font-size: 13px; font-weight: 700;
    box-shadow: 0 2px 10px rgba(0,0,0,.22);
}
.sm3d-toggle:hover { background: #5e1717; }
.sm3d.is-active .sm3d-toggle { display: none; }

/* сцена поверх галереї */
.sm3d-stage {
    position: absolute; inset: 0; display: none; pointer-events: auto;
    background: #fff; border-radius: inherit; overflow: hidden;
}
.sm3d.is-active .sm3d-stage { display: block; }
.sm3d-canvas { width: 100%; height: 100%; display: block; }

.sm3d-close {
    position: absolute; top: 8px; right: 10px; z-index: 8;
    width: 30px; height: 30px; border: none; border-radius: 50%;
    background: rgba(0,0,0,.45); color: #fff; font-size: 20px; line-height: 1;
    cursor: pointer;
}
.sm3d-close:hover { background: rgba(0,0,0,.65); }

.sm3d-hint {
    position: absolute; bottom: 70px; left: 0; right: 0; text-align: center;
    font-size: 11px; color: #8b91a0; pointer-events: none;
}

/* панель чіпів — знизу сцени */
.sm3d-controls {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
    display: none; flex-direction: column; gap: 6px;
    padding: 8px 10px; background: linear-gradient(#ffffff00, #ffffffEE 35%);
}
.sm3d.is-active .sm3d-controls { display: flex; }
.sm3d-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

.sm3d-chip {
    cursor: pointer; border: 1px solid #d8c2c2; background: #fff;
    border-radius: 8px; padding: 5px 10px; font-size: 12px; color: #333;
    display: inline-flex; align-items: center; gap: 5px; line-height: 1;
}
.sm3d-chip.is-active { border-color: #7a1f1f; box-shadow: inset 0 0 0 1px #7a1f1f; font-weight: 600; }
.sm3d-chip--col { padding: 5px 7px; }
.sm3d-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }

@media (max-width: 768px) {
    .sm3d-toggle { top: 8px; right: 8px; padding: 6px 11px; font-size: 12px; }
    .sm3d-hint { display: none; }
}

/* ── 3D-превʼю ЧАШКИ (.sm3d--mug): тло = фірмовий корал, як у майстерні ── */
.sm3d--mug .sm3d-stage { background: #EE7070; }
.sm3d--mug .sm3d-canvas { cursor: grab; touch-action: none; }
.sm3d--mug .sm3d-canvas:active { cursor: grabbing; }
.sm3d--mug .sm3d-hint { bottom: 12px; display: block; }