@media (hover: hover) and (pointer: fine) {
    #product-modal.product-modal-desktop-nav .tns-controls {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        display: flex;
        justify-content: space-between;
        padding: 0 14px;
        pointer-events: none;
        z-index: 120;
    }

    #product-modal.product-modal-desktop-nav .tns-controls button {
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(101, 67, 33, 0.84);
        color: #faf5eb;
        box-shadow: 0 8px 20px rgba(25, 20, 12, 0.24);
        cursor: pointer;
        pointer-events: auto;
        transition: transform 0.2s ease, background-color 0.2s ease;
    }

    #product-modal.product-modal-desktop-nav .tns-controls button:hover {
        transform: scale(1.06);
        background: rgba(101, 67, 33, 0.95);
    }
}